状态更新过程中"setter of React.useState"和"this.setState"有什么区别

Question

当我点击AppFunctional的按钮时，组件不会更新，但状态发生了变化。在AppClass中可以。

在这两种情况下，用"；"推动"；，但我不明白有什么不同。

提前谢谢。

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

数组是引用类型，所以这段代码意味着你返回的是同一个对象，尽管你同时推送了另一个值

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组件挂钩，并提供用于更新状态的回调方法，而setState

Answer 3

useState用于函数组件，setState用于类组件，但如果您想了解如何以及为什么，类中的React取决于"这个"；为了触发更改(renders(，这就是为什么它必须以不同的方式对待类；这个"；具有状态aka"的关键字；this.setState"；以及"；这个状态"；或"；这个道具；

我强烈建议Dan Abramov解释这两者之间的差异：https://overreacted.io/how-are-function-components-different-from-classes/