Выпущен React 16.6, волна новых функций позволит вам увидеть будущее разработки React.

внешний интерфейс React.js NPM

Недавно (2018-10-23) React официально выпущен16.6Версия, откройте кучу новых функций, а некоторые из которых являются новыми функциями, оно представляет будущее развитие реагирования, которое позволяет нам заглянуть в будущее сейчас.

lazy

Самая ожидаемая функция, безусловно,lazyфункцию и выпустилSuspenseкомпонент, который первоначально называлсяPlaceholderкомпоненты, используемые для сопряженияrenderАсинхронная операция внутри метода, давайте сначала посмотримlazyПрименение

import React, {lazy, Suspense} from 'react';
const OtherComponent = lazy(() => import('./OtherComponent'));

function MyComponent() {
  return (
    <Suspense fallback={<div>Loading...</div>}>
      <OtherComponent />
    </Suspense>
  );
}

сделалcode-splittingстуденты могут чувствовать знакомый запах. Если раньше мы использовали сторонний пакет или сами обрабатывали асинхронный процесс, то теперь React поддерживает его нативно, и вы можете напрямую кинуть асинхронный процесс вrenderВ методе это то же самое, что писать обычные компоненты, и его можно легко передатьSuspenseкомпоненты для обеспеченияfallback

Однако это не толькоSuspenseЕдинственное использование, по сути, на этот раз React официально открытSuspenseКомпоненты представляют все асинхронные операции, которые могут бытьrenderСпособы какие делают, на самом деле меня удивили, я думал конечно придется подождать до официального открытия 17 версии

Итак, что еще могут делать асинхронные операции? Если школьники увидели начало годаDanРазделяя в Исландии, вы должны знать,SuspenseЭто делает операцию загрузки данных очень простой для нас. Студенты, которые не видели, могут посмотретьздесь, теперь есть еще и пакет на npm, обеспечивающий функцию загрузки данных,simple-cache-provider, но пока не используйте его в формальной среде.

О том, как реализована эта часть, я подробно объясню позже в анализе исходного кода, а заинтересованные студенты могут подписаться на меня.

React.memo

ClassComponentкласс может быть унаследованPureComponentили реализоватьshouldComponentUpdateдля активного определения необходимости повторного рендеринга компонента для повышения производительности, ноFunctionalComponentАналогичной функции пока нет.

Итак, сегодня React выпустилReact.memoметод для достижения чего-то вродеPureComponentфункция,поверхностное сравнениеpropsЕсть ли изменение, если нет изменений, не перерисовывать текущий компонент

const FunctionalComponent = React.memo((props) => {
  // only render if props change
})

static contextType

В React 16.3 мы предоставляем стандартную замену старойcontextAPI, то естьReact.createContext, то черезcontext.Providerа такжеcontext.ConsumerЧтобы обеспечить ценность, этот подход устраняет старыеcontextПроблема низкой производительности API,Я также подробно разбирал этот вопрос ранее, и заинтересованные студенты могут прочитать егоздесь, а старого кода API много, поэтому в следующей основной версии React старый API будет удален.

Однако в процессе обновления экологического плагина до нового API кто-то предложилClassComponentИспользовать новый API обременительно (??? я его не чувствую), поэтому React предоставляетClassComponentИспользование новых методов API

import React, { Component } from 'react';

const context = React.createContext('defaultValue')


const ProviderComp = ({ children }) => (
  <context.Provider value="provider">
    {children}
  </context.Provider>
)

class ConsumerComp extends Component {
  static contextType = context

  componentDidMount() {
    console.log(this.context)
  }

  render() {
    return (
      <p>{this.context}</p>
    )
  }
}

class App extends Component {
  render() {
    return (
      <ProviderComp>
        <ConsumerComp />
      </ProviderComp>
    );
  }
}

по заявлениюstatic contextType = context,ПозволятьClassComponentМожно подписаться на самый последнийcontext provider,обратите внимание здесьcontextTypeЭто фиксированное объявление, и оно не будет работать, если вы измените его на другое имя.. еслиConsumerCompне вProviderподдерево, затем используйтеdefaultValue

class App extends Component {
  render() {
    return (
      <>
        <ProviderComp />
        <ConsumerComp />  // show default value
      </>
    );
  }
}

Это также попытка удалить старые API для повышения общей производительности React.

static getDerivedStateFromError()

ПроводкаError BoundariesReact предоставляет новый метод жизненного цикла, когдаcomponentDidCatch, он будет срабатывать при обнаружении ошибки, вы можете изменить его в немstateЧтобы отобразить пользовательский интерфейс напоминания об ошибке или отправить информацию об ошибке на сервер дляlogдля постанализа. Но вот проблема,В момент обнаружения ошибки React отобразит компонент какnull, что может привести к тому, что его родительский компонент установит указанное вышеrefполучатьnullвызвать некоторые проблемы, поэтому этот метод теперь предоставляется.

Этот метод аналогиченgetDerivedStateFromPropsАналогично, разница только в том, что он срабатывает только при возникновении ошибки, он относительныйcomponentDidCatchПреимущество в том, что его можно изменить в текущем цикле рендеринга.state, чтобы в текущем рендеринге мог появиться неправильный пользовательский интерфейс без необходимостиnullпромежуточное состояние.

Появление этого метода также означает, что при возникновении ошибки в будущем модифицируйтеstateДелать это нужно здесь, а последующий сбор информации об ошибках и тому подобное помещается вcomponentDidCatchв.

Новое напоминание в StrictMode

StrictModeОн используется, чтобы напомнить разработчикам об использовании API, которые скоро устареют, напримерcomponentWillMountЭти циклы объявлений будут напоминаться На этот раз добавлены два новых напоминания API.ReactDOM.findDOMNode(), и старыйcontext api.

Это также означает, что эти две следующие основные версии определенно будут удалены. Так что братья, не торопитесь и обновляйтесь!

Я Джоки, фронтенд-инженер, который фокусируется на навыках React и глубоком анализе React определенно является фреймворком, который чем больше вы изучаете, тем больше вы чувствуете, что его дизайн сложный и думает наперед. Подписывайтесь на меня, чтобы получать последние новости о React и самые глубокие знания о React.Больше статей здесь

Категории