根据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?