不使用setState() 去操作state
导致的问题
- 在state改变时组件不会重新渲染.
- 在未来某个时候如果通过setState改变了state, 那么这次未通过setState去改变的state将会同样生效.
坏实践
class SampleComponent extends Component {
constructor(props) {
super(props);
this.state = {
items: ['foo', 'bar']
};
this.handleClick = this.handleClick.bind(this);
}
handleClick() {
// 坏实践: 我们手动更改了state而不是通过setState函数.
this.state.items.push('lorem');
this.setState({
items: this.state.items
});
}
render() {
return (
<div>
{this.state.items.length}
<button onClick={this.handleClick}>+</button>
</div>
)
}
}
好实践
class SampleComponent extends Component {
constructor(props) {
super(props);
this.state = {
items: ['foo', 'bar']
};
this.handleClick = this.handleClick.bind(this);
}
handleClick() {
// 我们使用了setState()方法来更新state, 组件将会在state更改后被更新.
this.setState({
items: this.state.items.concat('lorem')
});
}
render() {
return (
<div>
{this.state.items.length}
<button onClick={this.handleClick}>+</button>
</div>
)
}
}
参考资料:
React Design Patterns and best practices by Michele Bertoli.
看完两件小事
如果你觉得这篇文章对你挺有启发,我想请你帮我两个小忙:
- 把这篇文章分享给你的朋友 / 交流群,让更多的人看到,一起进步,一起成长!
- 关注公众号 「IT平头哥联盟」,公众号后台回复「资源」 免费领取我精心整理的前端进阶资源教程