• 根据props去初始化state
    • 坏的实践
    • 好的实践
  • 参考资料:

    根据props去初始化state

    前言:

    使用props去在getInitialState中生成初始state(或者在constructor中初始化)很容易导致多个数据源的问题, 也会给使用者带来这样的疑问: 我们的真正的数据源到底来自哪?
    这是因为getInitialState只在组件第一次初始化的时候被调用一次.

    这样做的危险在于, 有可能组件的props发生了改变但是组件却没有被更新.(见下面的例子)
    新的props的值不会被React认为是更新的数据因为构造器(constructor)或者getInitialState方法在组件创建之后不会再次被调用了,因此组件的state不再会被更新.
    要记住, State的初始化只会在组件第一次初始化的时候发生.

    坏的实践

    1. class SampleComponent extends Component {
    2.   // constructor function (or getInitialState)
    3.   constructor(props) {
    4.     super(props);
    5.     this.state = {
    6.       flag: false,
    7.       inputVal: props.inputValue
    8.     };
    9.   }
    11.   render() {
    12.     return <div>{this.state.inputVal && <AnotherComponent/>}</div>
    13.   }
    14. }

    好的实践

    1. class SampleComponent extends Component {
    2.   // constructor function (or getInitialState)
    3.   constructor(props) {
    4.     super(props);
    5.     this.state = {
    6.       flag: false
    7.     };
    8.   }
    10.   render() {
    11.     return <div>{this.props.inputValue && <AnotherComponent/>}</div>
    12.   }
    13. }

    参考资料:

    • @justintulk/react-anti-patterns-props-in-initial-state-28687846cc2e">React Anti-Patterns: Props in Initial State
    • Why is passing the component initial state a prop an anti-pattern?