自定义反应下拉组件在每个用户输入上重新呈现
Custom react dropdown component re-rendering on every user input
我在控制 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 的早期阶段,所以我很确定这里有一些明显的东西是我遗漏的。
使用 React,onChange
每次按下一个键都会触发。在您的代码中,这将导致通过 handleFirstNameChange
处理程序调用 setState
,这将导致重新渲染。
两个选项:
- 别担心。重新渲染不一定会给您带来任何问题,如果没有性能问题,那么您可以忽略它。如果我处在你的位置,你的组件相当简单,我可能会忘记它:)
- 不要使用
onChange
,使用 onBlur
,然后您的处理程序将仅在字段失去焦点时触发。
您可以在文档中阅读更多关于 onChange
在 React 中的行为:
https://facebook.github.io/react/docs/forms.html#interactive-props
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
状态将始终等同于输入中包含的任何值.
您可以通过将生命周期方法 shouldComponentUpdate
添加到 class 来管理 React 组件的重新渲染条件。
我不确定什么条件实际上需要在您的应用程序中重新呈现下拉列表,但您可以像这样指定这些条件以做出反应:
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#updating-shouldcomponentupdate
我在控制 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 的早期阶段,所以我很确定这里有一些明显的东西是我遗漏的。
使用 React,onChange
每次按下一个键都会触发。在您的代码中,这将导致通过 handleFirstNameChange
处理程序调用 setState
,这将导致重新渲染。
两个选项:
- 别担心。重新渲染不一定会给您带来任何问题,如果没有性能问题,那么您可以忽略它。如果我处在你的位置,你的组件相当简单,我可能会忘记它:)
- 不要使用
onChange
,使用onBlur
,然后您的处理程序将仅在字段失去焦点时触发。
您可以在文档中阅读更多关于 onChange
在 React 中的行为:
https://facebook.github.io/react/docs/forms.html#interactive-props
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
状态将始终等同于输入中包含的任何值.
您可以通过将生命周期方法 shouldComponentUpdate
添加到 class 来管理 React 组件的重新渲染条件。
我不确定什么条件实际上需要在您的应用程序中重新呈现下拉列表,但您可以像这样指定这些条件以做出反应:
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#updating-shouldcomponentupdate