为什么更新我的列表不会触发我的组件的重新渲染？

Question

鉴于下面的代码，我希望在单击按钮时看到一个新的列表项添加到。状态数据似乎已更新，但 DOM 未更改。我承认我是 React 和 Hooks 的新手所以希望这只是我不理解这里的绑定模型的问题。


import React, {useState,useEffect} from 'react';
import './App.css';

function App() {

  const [someList, setSomeList] = useState([]);

  useEffect(() =>
    {
      const someDataForTheList = [1,2,3];
      setSomeList(someDataForTheList);
    }, []);

  const onClickAddToList = () =>
      {
        let newDataForTheList = someList;
        newDataForTheList.push(someList.length + 1);

        setSomeList(newDataForTheList);

        console.log(someList);
      }

  return (
    <div className="App">
        <h1>{someList ? someList.length : null}</h1>
        <ul>
          {someList ? someList.map((i) =>
              <li key={i}>
                {i}
              </li>)
              : null}
        </ul>
        <button onClick={onClickAddToList}>Add to list</button>
    </div>
  );
}

export default App;

Answer 1

这是因为 React 在检查更新时不会进行深度检查（默认情况下）。所以在同一个列表上推送一个新项目，然后使用钩子的调度方法重新分配它 React 确定这是相同的 object/item，因此得出结论视图不必更新。

但是您可以执行以下操作：

const onClickAddToList = () => {
  // creating a new list
  const newDataForTheList = [...someList, someList.length + 1];
  setSomeList(newDataForTheList)
}

为什么更新我的列表不会触发我的组件的重新渲染？

Why doesn't updating my list trigger a re-render of my component?

dom

render

reactjs

react-hooks