根据props去初始化state
前言:
使用props去在getInitialState中生成初始state(或者在constructor中初始化)很容易导致多个数据源的问题, 也会给使用者带来这样的疑问: 我们的真正的数据源到底来自哪? 这是因为getInitialState只在组件第一次初始化的时候被调用一次.
这样做的危险在于, 有可能组件的props发生了改变但是组件却没有被更新.(见下面的例子) 新的props的值不会被React认为是更新的数据因为构造器(constructor)或者getInitialState方法在组件创建之后不会再次被调用了,因此组件的state不再会被更新. 要记住, State的初始化只会在组件第一次初始化的时候发生.
坏的实践
class SampleComponent extends Component {
// constructor function (or getInitialState)
constructor(props) {
super(props);
this.state = {
flag: false,
inputVal: props.inputValue
};
}
render() {
return <div>{this.state.inputVal && <AnotherComponent/>}</div>
}
}
好的实践
class SampleComponent extends Component {
// constructor function (or getInitialState)
constructor(props) {
super(props);
this.state = {
flag: false
};
}
render() {
return <div>{this.props.inputValue && <AnotherComponent/>}</div>
}
}
参考资料:
- React Anti-Patterns: Props in Initial State
- Why is passing the component initial state a prop an anti-pattern?
看完两件小事
如果你觉得这篇文章对你挺有启发,我想请你帮我两个小忙:
- 把这篇文章分享给你的朋友 / 交流群,让更多的人看到,一起进步,一起成长!
- 关注公众号 「IT平头哥联盟」,公众号后台回复「资源」 免费领取我精心整理的前端进阶资源教程