使用 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是一个数组。