[英]React and pre-binding functions for performance
I just read this highly enlightening article today: 我今天刚读了这篇极具启发性的文章:
https://medium.com/@esamatti/react-js-pure-render-performance-anti-pattern-fb88c101332f https://medium.com/@esamatti/react-js-pure-render-performance-anti-pattern-fb88c101332f
The article uses the following example to show how to pre-bind functions to prevent components from needless re-rendering: 本文使用以下示例来说明如何预绑定函数以防止组件不必要的重新呈现:
class App extends PureComponent {
constructor(props) {
super(props);
this.update = this.update.bind(this);
}
update(e) {
this.props.update(e.target.value);
}
render() {
return <MyInput onChange={this.update} />;
}
}
This makes sense, though I can't figure out how to pass an argument to the function without using bind or () => this.myFunc('some arg')
. 这是有道理的,虽然我无法弄清楚如何在不使用bind或
() => this.myFunc('some arg')
情况下将参数传递给函数。 Example: 例:
<div>
<TextField
floatingLabelText="Email"
required
value={this.state.email}
onChange={e => this.setState({email: e.target.value})}
/>
</div>
<div>
<TextField
type="password"
floatingLabelText="Password"
required
value={this.state.password}
onChange={e => this.setState({password: e.target.value})}
/>
</div>
I'm not sure how to refactor this to not use binding. 我不知道如何重构这个不使用绑定。 I've got this class method as a starting point:
我把这个类方法作为一个起点:
_textChange(field, value) {
this.setState({
[field]: value,
});
}
But I'm not sure how to pass arguments into it from the onChange
prop and follow the suggestions laid out by the article above. 但是我不确定如何从
onChange
道具中传递参数,并遵循上面文章中提出的建议。
Additionally, I have code that I've refactored into this: 另外,我有代码,我已经重构为:
export default OrgList = (props) => {
const orgs = props.orgs.map((org) => {
const addEditOrg = props.onAddEditOrg.bind(null, org, 'edit');
const deleteOrg = props.onDeleteOrg.bind(null, org);
return <TableRow key={org._id}>
<TableRowColumn>{org.name}</TableRowColumn>
<TableRowColumn>
<IconButton onTouchTap={addEditOrg}>
<ModeEdit />
</IconButton>
[...]
But I'm not sure if those pre-bound functions are in the right place. 但我不确定这些预先绑定的功能是否在正确的位置。 Do they need to be totally outside the component?
他们是否需要完全在组件之外?
I use name attribute for this. 我为此使用name属性。 Example:
例:
handleChange(e) {
this.setState({[e.target.name]: e.target.value})
}
<TextField
name="email"
onChange={this.handleChange}
/>
<TextField
name="password"
onChange={this.handleChange}
/>
Unfortunately, you have to create separate methods which set email/password. 不幸的是,您必须创建设置电子邮件/密码的单独方法。
linkState
is noop here, since it always returns different object. linkState
在这里是noop,因为它总是返回不同的对象。 Same apply to higher order function (returning anonymous function as handler). 同样适用于高阶函数(将匿名函数作为处理程序返回)。
I would end up with this code. 我最终会得到这个代码。 Event handlers are same, no unnecessary rendering is triggered this way.
事件处理程序是相同的,没有以这种方式触发不必要的渲染。
setEmail(e) {
this.setState({email: e.target.value})
}
setPassword(e) {
this.setState({password: e.target.value})
}
<TextField
onChange={this.setEmail}
/>
<TextField
onChange={this.setPassword}
/>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.