Пользовательский реагирующий выпадающий компонент повторного рендеринга на каждый пользовательский ввод

У меня возникли некоторые проблемы с контролем количества рендеринга, выполняемого React. Скажем, у меня есть этот пользовательский ввод прямо здесь:

handleFirstNameChange: function(e) {
    this.setState({ firstName: e.target.value, userTyping: true });
},
render: function(){
<RB.Input value={this.state.firstName} onChange={this.handleFirstNameChange} name=""
                    type="text" label="First name" placeholder="First name.."/>
}

И этот пользовательский выпадающий компонент:

<SearchDropdown title="Role" options={this.props.currentUser.roles} 
                            selectedOptions={this.props.currentUser.selectedRoles} />

Каждый раз, когда пользователь вводит букву, выпадающий список будет отображать каждую опцию, даже если (как кажется) компоненты не имеют ничего общего друг с другом. Я пытался справиться с этим, включив логическое значение "userIsTyping" в качестве опоры для выпадающего компонента и проверив его в ComponentShouldUpdate, но теперь это становится большей проблемой, когда у меня есть вложенные компоненты. Я все еще нахожусь на ранних стадиях использования React, поэтому я почти уверен, что здесь есть что-то очевидное, чего мне не хватает.

Источник

3 ответа

Решение

С React, onChange срабатывает каждый раз при нажатии клавиши. В вашем коде это в свою очередь вызовет setState через handleFirstNameChange обработчик, и это вызовет повторную визуализацию.

Два варианта:

  1. Не беспокойся об этом. Повторный рендеринг не обязательно вызовет у вас какие-либо проблемы, и если нет проблем с производительностью, вы можете просто проигнорировать это. Ваш компонент довольно прост, если бы я был на вашем месте, я бы просто забыл об этом:)
  2. Не использовать onChangeиспользовать onBlur и тогда ваш обработчик будет срабатывать только тогда, когда поле теряет фокус.

Вы можете прочитать больше о поведении onChange Реагируем в документации:

https://facebook.github.io/react/docs/forms.html

Источник

Вы можете управлять условиями повторного рендеринга для компонента React, добавив метод жизненного цикла. shouldComponentUpdate в ваш класс.

Я не уверен, какие условия фактически потребуют повторного рендеринга раскрывающегося списка в вашем приложении, но вы можете указать эти условия для реакции следующим образом:

var SearchDropdown = React.createClass({

    // ... (your existing code)

    shouldComponentUpdate: function(nextProps, nextState) {
        // Do a boolean compare; re-render only if this returns true
        return this.props.options.somethingToCheck !== nextProps.options.somethingToCheck;
    }
});

Документы: https://facebook.github.io/react/docs/component-specs.html

Источник

React был разработан для интеллектуального вычисления наиболее эффективных манипуляций DOM, которые потребуются для получения желаемого результата, поэтому на самом деле не проблема в том, что ваш компонент так часто перерисовывается.

Похоже, вы используете onChange обновлять состояние вашего компонента всякий раз, когда ваш вход имеет другое значение. Могу ли я порекомендовать LinkedStateMixin? Таким образом, вы можете заставить определенное состояние всегда соответствовать некоторому значению на входе.

render: function(){
<RB.Input valueLink={this.linkState.firstName} name=""
                    type="text" label="First name" placeholder="First name.."/>
}

В этом коде выше (при условии, что RB.Input ведет себя так же, как типичный input), ваш компонент firstName Состояние всегда будет эквивалентно любому значению, содержащемуся в вашем вводе.

Источник
Другие вопросы по тегам