反应：将作为道具传递的状态分配给组件作为变量阻止更新？

Question

Suppose we have the following setup with a parent component with two children C1 and 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

Here it is in code and codepen :

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'));

Notice that in C2's constructor, we have a reference to this.props.data . If we set that variable as a class attribute like this.data = this.props.data React fails to update C1 even after we click the update button and Example's this.state.data has been changed. I have commented out the line that works, which references this.props.data directly.

My first idea is that this must be illegal syntax in React. However, further testing with C1 showed that if the props passed in is a function and not state, there is no problem (see the code under C1's update function to confirm what I am talking about).

Why does this not work for state passed in as props but works for functions passed in as props? I would assume Example sees that C1 has changed data state and as a result of this, call a re-rendering of C2 which uses this.data to figure out what to render next.

Answer 1

Because the constructor only gets called once and not every time it gets new state or props so your class variables references the props passed initially and not the new ones because it doesn't rerun the constructor again. See constructor

The constructor for a React component is called before it is mounted

So once it's mounted, it doesn't get called again. The functions on the other hand, especially pure functions, will work fine because you didn't modify the function itself or any values within it.

If you want to update the class variables based on props change you might want to check shouldComponentUpdate or componentWillReceiveProps

So example in your C2 component, to fix it use this:

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

But I think it's redundant doing that, this.props works fine most of the time.