Skip to content

React

Jump to bottom
Sᴛѧʀʟɪɴɢ edited this page Feb 27, 2019 · 5 revisions

Функциональный setState(state, callback)

setState(state, callback)

https://stackoverflow.com/questions/42038590/when-to-use-react-setstate-callback https://medium.com/@WoTzap/%D1%84%D1%83%D0%BD%D0%BA%D1%86%D0%B8%D0%BE%D0%BD%D0%B0%D0%BB%D1%8C%D0%BD%D1%8B%D0%B9-setstate-%D1%8D%D1%82%D0%BE-%D0%B1%D1%83%D0%B4%D1%83%D1%89%D0%B5%D0%B5-react-d262be6a6c02

PureComponent

PureComponent изменяет lifecycle-метод shouldComponentUpdate, автоматически,
проверяя, нужно ли заново отрисовывать компонент.

PureComponent будет вызывать рендер только если обнаружит изменения в state или
props компонента.

Исходный код:

if (this._compositeType === CompositeTypes.PureClass) {
 shouldUpdate = !shallowEqual(prevProps, nextProps) || ! shallowEqual(inst.state, nextState);
}

Использование shallowEqual говорит о том, что происходит неглубокая проверка
params и state, так что сравнение не будет происходить по глубоко вложенным
объектам, массивам.

Глубокое сравнение — очень затратная операция. Если бы PureComponent каждый раз
ее вызывал, то он бы приносил больше вреда, чем пользы.

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

PureComponent будет всегда заново отрисовывать компоненты, если будет получать
ссылки на разные объекты. Поэтому нужно избегать конструкций по типу:

<Entity values={this.props.values || []}/>

Новый массив (даже пустой) заставляет проект отрисовываться заново. Это можно
решить, задав defaultProps.

Следующая функция будет всегда создаваться заново, а значит и PureComponent
будет каждый раз видеть новые данные:

<CustomInput onChange={e => this.props.update(e.target.value)} />;

Это можно решить, вынося callback в методы компонента.

Также любой компонент, который содержит дочерние элементы, созданные в JSX, будет
всегда выдавать false на shallowequal проверках.

Важно помнить, что PureComonent пропускает отрисовку не только самого компонента,
но и всех его “детей”, так что безопаснее всего применять его в
presentational-компонентах, без “детей” и без зависимости от глобального
состояния приложения.

В случае, если pure-компонент имеет детей, все дочерние компоненты, зависящие
от смены контекста, не будут реагировать на изменения, если в родительском
pure-компоненте не будет объявлен contextTypes.

https://habr.com/ru/company/redmadrobot/blog/318222/

Controlled vs Uncontrolled

В контролируемом компоненте данные формы обрабатываются компонентом React.
В неконтролируемых компонентах данные формы обрабатываются самим DOM.

Для того, чтобы написать неконтролируемый компонент, вместо написания
обработчика события для каждого изменения состояния, вы можете использовать ref,
чтобы получать значения формы из DOM.

Использовать не желательно, но можно:

  • когда нужно быстро что-то проверить
  • когда проводится интеграция React с не React приложением

Начальное значение можно определить с помощью атрибута defaultValue.

Жизненный цикл компонента

В процессе работы компонент проходит через ряд этапов жизненного цикла:

  • constructor(props): конструктор, начальная инициализация компонента
  • componentWillMount(): вызывается перед рендерингом компонента
  • render(): рендеринг компонента
  • componentDidMount(): вызывается после рендеринга компонента (здесь можно
    выполнять запросы к удаленным ресурсам)
  • componentWillUnmount(): вызывается перед удалением компонента из DOM

Ряд функций, вызывающихся при обновлении состояния после рендеринга компонента:

  • shouldComponentUpdate(nextProps, nextState): вызывается каждый раз при
    обновлении объекта props или state. В качестве параметра передаются новый объект
    props и state. Эта функция должна возвращать true (надо делать обновление)
    или false (игнорировать обновление). По умолчанию возвращается true.
  • componentWillUpdate(nextProps, nextState): вызывается перед обновлением
    компонента (если shouldComponentUpdate возвращает true)
  • render(): рендеринг компонента (если shouldComponentUpdate возвращает true)
  • componentDidUpdate(prevProps, prevState): вызывается сразу после обновления
    компонента (если shouldComponentUpdate возвращает true). В качестве параметров
    передаются старые значения объектов props и state.

В версии 17 componentWillMount, componentWillUpdate, componentWillReceiveProps deprecated.

И отдельно стоит отметить функцию componentWillReceiveProps(nextProps), которая
вызывается при обновлении объекта props. Новые значения этого объекта передаются в
функции в качестве параметра. Как правило, в этой функции устанавливаются те свойства
компонента, в том числе из this.state, которые зависят от значений из props.

Clone this wiki locally