state 更新期间“React.useState 的设置器”和“this.setState”有什么区别

Question

当我单击 AppFunctional 的按钮时，组件不会更新，但 state 已更改。 在 AppClass 中没问题。

在这两种情况下，都用“推”改变原始 state，但我不明白有什么区别。

提前致谢。

const List = ({ items }) => {
  return <h1>{items.join("-")}</h1>;
};

class AppClass extends React.Component {
  state = {
    items: [1],
  };

  addItem = () => {
    const { items } = this.state;
    items.push(2);
    this.setState({
      items,
    });
  };

  render() {
    const { items } = this.state;
    return (
      <div>
        <button onClick={this.addItem}>Add Item</button>
        <List items={items} />
      </div>
    );
  }
}

const AppFunctional = () => {
  const [items, setItems] = useState([1]);

  const addItem = () => {
    setItems((state) => {
      state.push(2);
      return state;
    });
  };

  return (
    <div>
      <button onClick={addItem}>Add Item</button>
      <List items={items} />
    </div>
  );
};

Answer 1

Arrays 是引用类型，因此此代码意味着您返回相同的 object，尽管您同时推送了另一个值

setItems((state) => {
   state.push(2);
   return state;
});

为了让useState钩子了解发生了变化，您需要返回另一个引用，因此只需复制数组：

setItems((state) => {
   state.push(2);
   return state.slice();
});

或者，更好：扩展运算符会将state的所有项目复制到一个新数组中，并且您还在末尾附加 2。

setItems((state) => [...state, 2]);

Answer 2

useState是一个functional组件挂钩，用于设置初始 state 并提供一个回调方法来更新 state 而setState是一个class组件方法来更新 state

Answer 3

那么 useState 用于功能组件，而 setState 用于 class 组件，但是如果您想了解如何以及为什么，类中的 React 依赖于“this”来触发更改（重新渲染），这就是为什么它必须以不同方式对待类并使用“this” " 关键字与 state aka "this.setState" 和 "this.state" 或 "this.props"

我强烈推荐 Dan Abramov 解释它们之间的区别： https://overreacted.io/how-are-function-components-different-from-classes/