react-native
Лучшая практика
Поиск…
Вступление
Тема для важных заметок о конкретном способе поведения компонента Component.render.
Функции в JSX
Для лучшей производительности важно избегать использования функции массива (лямбда) в JSX.
Как описано в https://github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/jsx-no-bind.md :
Функция привязки или функция стрелки в JSX prop создаст совершенно новую функцию для каждого отдельного рендеринга. Это плохо для производительности, так как это приведет к тому, что сборщик мусора будет вызван больше, чем это необходимо. Это может также привести к ненужным повторным рендерингом, если новая функция передается в качестве опоры для компонента, который использует контрольную проверку равенства на prop, чтобы определить, следует ли обновлять ее.
Поэтому, если код jsx code выглядит следующим образом:
<TextInput
onChangeValue={ value => this.handleValueChanging(value) }
/>
или же
<button onClick={ this.handleClick.bind(this) }></button>
вы можете сделать это лучше:
<TextInput
onChangeValue={ this.handleValueChanging }
/>
а также
<button onClick={ this.handleClick }></button>
Для правильного контекста в функции handleValueChanging вы можете применить его в конструкторе компонента:
constructor(){
this.handleValueChanging = this.handleValueChanging.bind(this)
}
больше в привязке функции, переданной компоненту
Или вы можете использовать такие решения: https://github.com/andreypopp/autobind-decorator и просто добавить декоратор @autobind к каждому методу, с которым вы хотите привязать:
@autobind
handleValueChanging(newValue)
{
//processing event
}