Поиск…


Вступление

Тема для важных заметок о конкретном способе поведения компонента 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
        }


Modified text is an extract of the original Stack Overflow Documentation
Лицензировано согласно CC BY-SA 3.0
Не связан с Stack Overflow