React：将状态作为Prop传递给组件作为变量防止更新？

Question

假设我们有以下设置，其中父组件有两个子组件C1和C2:

Example: container for C1 and C2, with a state called data

    -C1: input, updates state in Example through handler passed as propdisplay, shows state from Example
    -C2: display, shows state from Example

这里是代码和代码：

class Example extends React.Component {
  constructor (props) {
    super(props)
    this.state = { data: 'test' }
  }

  onUpdate (data) { this.setState({ data }) }

  render () {
    return (
      <div>
        <C1 onUpdate={this.onUpdate.bind(this)}/>
        <C2 data={this.state.data}/>
      </div>
    )
  }
}

class C1 extends React.Component {
    constructor(props) {
      super(props);
      this.onUpdate = this.props.onUpdate;
    }

    render () {
      return (
        <div>
          <input type='text' ref='myInput'/>
          <input type='button' onClick={this.update.bind(this)} value='Update C2'/>
        </div>
      )
    }

    update () {
      //this.props.onUpdate(this.refs.myInput.getDOMNode().value);
      this.onUpdate(this.refs.myInput.getDOMNode().value);
    }
}

class C2 extends React.Component {
    constructor(props) {
      super(props);
      this.data = this.props.data;
    }

    render () {
      return <div>{this.props.data}</div>
      //return <div>{this.data}</div>
    }
}

/*
 * Render the above component into the div#app
 */
React.render(<Example />, document.getElementById('app'));

注意，在C2的构造函数中，我们引用了this.props.data。如果我们将该变量设置为类属性，如this.data=this.props.data，React即使在单击update按钮并且示例的this.state.data已经更改之后，也无法更新C1。我已经注释掉了直接引用this.props.data的行。

Answer 1

因为构造函数只调用一次，而不是每次它获得新的状态或道具，所以类变量引用最初传递的道具，而不是新的道具，因为它不会再次重新运行构造函数。参见构造函数

React组件的构造函数在装入之前被调用

因此，一旦它被挂载，就不会再被调用。另一方面，函数，特别是纯函数，将工作良好，因为您没有修改函数本身或其中的任何值。

如果希望根据道具更改更新类变量，则可能需要检查shouldComponentUpdate或componentWillReceiveProps

因此，在C2组件中的示例中，要修复它，请使用以下命令：

componentWillReceiveProps(nextProps) {
  this.data = this.nextProps.data
}

但我认为这样做是多余的，this.props大多数时候都很好。