使用 useState() 的 concat 方法

Question

我正在学习 React Hooks，并试图了解 useState 如何与数组一起工作。所以，我有这个代码：    const App = () => {      const initialTodos = [  {    id: 'a',    task: 'Learn React',    complete: true,  },  {    id: 'b',    task: 'Learn Firebase',    complete: true,  },  {    id: 'c',    task: 'Learn GraphQL',    complete: false,  },];      const [todos, setTodos] = useState(initialTodos);      const [task, setTask] = useState('');      const handleChangeInput = event => {        setTask(event.target.value);      };      const handleSubmit = event => {        if (task) {          setTodos(todos.concat({ id: 'd', task, complete: false }));        }        setTask('');        event.preventDefault();      };      ...    };我想问的问题是，为什么我们要使用 concat 将新对象不变地添加到数组中，如果 mutate 并使用 push() 会怎样？

Answer 1

如果变异并使用 push() 会怎样？

正如反应文档中所说：

永远不要直接改变 this.state，因为之后调用 setState() 可能会替换你所做的改变。将 this.state 视为不可变的。

原因：

1/ setState 是批量工作的，这意味着不能指望 setState 立即进行状态更新，它是一种异步操作，因此状态更改可能会在稍后的时间点发生，这意味着手动改变状态可能会被 setState 覆盖。

2/ 性能。当使用纯组件或 shouldComponentUpdate 时，它们将使用 === 运算符进行浅比较，但如果您改变状态，对象引用仍将相同，因此比较会失败。

来源：这篇优秀的媒体文章。

Answer 2

setTodos(prevTodos => prevTodos.concat({ id: 'd', task, complete: false }));

不要忘记这todos是一个数组。