[英]Custom react dropdown component re-rendering on every user input
I'm having a bit of trouble with controlling the amount of re rendering done by React. 我在控制React的重新渲染量时遇到了麻烦。 Say I've got this user input right here:
说我已经在这里获得此用户输入:
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.."/>
}
And this custom dropdown component: 这个自定义的下拉组件:
<SearchDropdown title="Role" options={this.props.currentUser.roles}
selectedOptions={this.props.currentUser.selectedRoles} />
Every single time the user inputs a letter, the dropdown will re render every single option, even though (as it seems) the components have nothing common to each other. 用户每输入一次字母,下拉菜单将重新呈现每个选项,即使(看起来)这些组件之间没有共同之处。 I've been trying to manage this by including a "userIsTyping" boolean as a prop to the dropdown component and checking it in ComponentShouldUpdate but it's becoming more of a problem now that I've got nested components.
我一直在尝试通过包含“ userIsTyping”布尔值作为下拉组件的道具并在ComponentShouldUpdate中对其进行检查来管理此问题,但是由于我已经嵌套了组件,因此它成为一个更大的问题。 I'm still in my early stages of using React so I'm pretty sure there's something obvious here that I'm missing.
我仍处于使用React的初期阶段,因此我可以肯定这里确实有一些我所缺少的东西。
With React, onChange
fires every time a key is pressed. 使用React时,每次按下一个键
onChange
触发onChange
。 In your code, this will in turn cause a call to setState
via the handleFirstNameChange
handler, and that will cause a re-render. 在您的代码中,这又将导致通过
handleFirstNameChange
处理程序调用setState
,这将导致重新渲染。
Two options: 两种选择:
onChange
, use onBlur
and then your handler will only fire when the field loses focus. onChange
,而要使用onBlur
,然后您的处理程序仅在字段失去焦点时才会触发。 You can read more about the behaviour of onChange
in React in the documentation: 您可以在文档中阅读有关
onChange
行为的更多信息:
https://facebook.github.io/react/docs/forms.html#interactive-props https://facebook.github.io/react/docs/forms.html#interactive-props
React was designed to intelligently compute the most efficient DOM manipulations that would be required to get the desired output, so it isn't really a problem that your component is being re-rendered so often. React旨在智能地计算获得所需输出所需的最有效的DOM操作,因此,如此频繁地重新渲染组件并不是真正的问题。
It looks like you're using onChange
to update your component's state whenever your input has a different value. 看起来只要输入值不同,您就在使用
onChange
来更新组件的状态。 Might I recommend the LinkedStateMixin ? 我可以推荐LinkedStateMixin吗? This way, you could force a particular state to always be consistent with some value in an input.
这样,您可以强制特定状态始终与输入中的某些值保持一致。
render: function(){
<RB.Input valueLink={this.linkState.firstName} name=""
type="text" label="First name" placeholder="First name.."/>
}
In that code above (assuming that RB.Input
behaves the same way as a typical input
), your component's firstName
state will always be equivalent to whatever value contained within your input. 在上面的代码中(假设
RB.Input
行为与典型的input
相同),组件的firstName
状态将始终等于输入中包含的任何值。
You can manage re-render conditions for a React component by adding the lifecycle method shouldComponentUpdate
to your class. 您可以通过向类添加生命周期方法
shouldComponentUpdate
来管理React组件的重新渲染条件。
I'm not sure what conditions would actually require a re-render of the dropdown in your application, but you can specify those conditions for react like this: 我不确定在什么情况下实际上需要重新渲染应用程序中的下拉菜单,但是您可以指定这些条件来做出如下反应:
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;
}
});
Docs: https://facebook.github.io/react/docs/component-specs.html#updating-shouldcomponentupdate 文件: https : //facebook.github.io/react/docs/component-specs.html#updating-shouldcomponentupdate
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.