时间戳

首页 > 解决方案 > 使用 useState() 的 concat 方法

javascript - 使用 useState() 的 concat 方法

问题描述

我正在学习 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() 会怎样？

标签： javascriptreactjs

解决方案

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

正如反应文档中所说：

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

原因：

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

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

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

推荐阅读