Question

我在控制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的早期阶段，所以我很确定这里有一些我不知道的东西。

Answer 1

使用React，每次按下某个键时onChange都会触发。在您的代码中，这将导致通过setState处理程序调用{{1}}，这将导致重新呈现。

两个选项：

别担心。重新渲染不一定会导致任何问题，如果没有性能问题，那么你可以忽略它。如果我在你的鞋子里你的组件很简单我可能会忘记它：）
请勿使用handleFirstNameChange，请使用onChange，然后您的处理程序只会在字段失去焦点时触发。

您可以在文档中详细了解React中onBlur的行为：

https://facebook.github.io/react/docs/forms.html#interactive-props

Answer 2

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状态将始终等同于其中包含的任何值你的意见。

Answer 3

您可以通过向您的班级添加生命周期方法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; } });来管理React组件的重新渲染条件。

我不确定在您的应用程序中实际需要重新呈现下拉列表的条件，但您可以指定这些条件，如下所示：

{{1}}

文档：https://facebook.github.io/react/docs/component-specs.html#updating-shouldcomponentupdate

自定义响应下拉组件在每个用户输入上重新呈现

3 个答案: