为什么不能根据道具反应设定初始状态

Question

我有一个es6 react组件，我希望状态的初始值依赖于传递的道具的初始值，但它的值总是false：

<AttachStateToProps VALUE=false />

class AttachStateToProps extends React.Component {
  state = {
    stateValue: this.props.VALUE,
  }
  render() {
    console.log('Value of Prop - ', this.props.VALUE)
    console.log('Value of State - ', this.state.stateValue)

  return null
  }
}

`Value of Prop - false` // this changes whenever I change prop value in 
   <AttachStateToProps />

`Value of State - false` // this does not change accordingly.

我想这可能与state/setstate是异步的和旧的getInitialState有关，但我不知道为什么。

Answer 1

从构造函数中的道具初始化状态，或作为类属性初始化状态，不会在道具更改时更新状态。但是，react确实检测到道具更改，并重新发送组件。

示例：

class AttachStateToProps extends React.Component {
  state = {
    stateValue: this.props.VALUE,
  }
  render() {
    console.log('Value of Prop - ', this.props.VALUE)
    console.log('Value of State - ', this.state.stateValue)

  return null
  }
}

const renderWithVal = (val) => ReactDOM.render(
  <AttachStateToProps VALUE={val} />,
  demo
);

renderWithVal(5);
renderWithVal(15);
renderWithVal(115);

<script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>

<div id="demo"></div>