React.js 建议将 `props` 直接分配给状态

Question

抛出 React.js 警告：

IndexPage: It is not recommended to assign props directly to state because updates to props won't be reflected in state. In most cases, it is better to use props directly.

我有以下代码：

    class IndexPage extends React.Component<IProps, IState> {
       constructor(props) {
          super(props)
          this.state = props
       }
    }

但是，当我将代码更改为：

    class IndexPage extends React.Component<IProps, IState> {
       constructor(props) {
          super(props)
          this.state = {...props}
       }
    }

警告消失。

你能解释一下为什么吗？

Answer 1

由于 JS 对象值赋值的工作方式，将一个对象赋值给另一个对象意味着第二个变量将 "point" 指向同一个实例，或者持有对它的引用：

let x = { v: 1 };
let y = x;
x.v = 2;
console.log(y.v) // prints "2"

警告是为了防止关于道具自动 "propagated" 状态的意外假设。 IOW，它并不像您通常期望的那样工作：

// assume props = { v: 1 };
this.state = props;
// now props changes to { v: 2 };
console.log(this.state.v) // still prints 1, and that's why you get the warning

警告消失了，因为通过解构，你明显地表明正在创建一个新对象，并且你不希望状态在更改时具有与 props 相同的值。

React.js 建议将 `props` 直接分配给状态

React.js Recommended Assigning `props` Directly To State

warnings

reactjs

react-props

react-component

react-state