Question

我正在学习React。我了解到反应中的道具是只读的。

但我在某处读过

getDerivedStateFromProps根据道具更改更新状态

所以我很困惑。如果道具是只读的，它们如何更改？

Answer 1

它们在组件的上下文中是只读的，这意味着您不能为它们分配新的值。

但是将道具传递给孩子的父母可以根据某些条件传递不同的道具。在这种情况下，孩子会得到不同的道具。

示例：


class Parent extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      value: 0,
    };
  }
  render() {
    return (
      <div>
        <Child prop1={this.state.value} />
        <button onClick={() => this.setState({ value: this.state.value + 1 })}>Click me</button>
      </div>
    );
  }
}

在我的示例中，每次单击父级按钮都会更改其状态，因此，React将重新渲染它，然后该父级会将新值传递给Child组件。

Answer 2

我认为您需要了解组件的生命周期以及如何使用和处理道具，下面的链接对此进行了详细介绍：

https://reactjs.org/docs/react-component.html#static-getderivedstatefromprops https://reactjs.org/docs/components-and-props.html#props-are-read-only

道具是只读的，意味着您不能更改该值，但这并不意味着您不能更新它，因为您需要将更新的道具传递回子组件并为其使用任何生命周期方法。 / p>

Answer 3

更新可能是由于道具或状态的更改引起的。当有更新render()方法被调用时。
您说的是对道具的更新，这直接意味着您正在更改和修改孩子，
道具更改意味着，从父级传递的数据发生了变化，导致道具更改，
永远记住从父母传递来的状态被视为孩子的道具。
static getDerivedStateFromProps(props, state)在render()之后立即被调用，很少用于动画过渡目的。 componentWillRecieveProps()完成了componentDidUpdate()和getDerivedStateFromProps()可能发生的事情，它会根据对象的更改返回对象，如果没有更改，则返回null，听起来很棒。
如您所见，方法是static，您无法更改任何数据，只能播放nextProps和prevState。
这对于具有异步api调用的组件很有用。

如果React道具是只读的，它们将如何更改（getDerivedStateFromProps的用法是什么）？

3 个答案: