如果定义为匿名函数，React功能组件会重新呈现整个组件

Question

const List = props => {
  const SubList = (number, key) => <p key={number}>{number}</p>;

  const WholeList = () => props.numbers.map(SubList);

  // method 1 return (<WholeList/>)
  // method 2 return props.numbers.map(SubList);
};

function App() {
  const [numbers, setNumbers] = useState([1, 2, 3, 4, 5]);

  return (
    <>
      <button onClick={() => setNumbers([...numbers, numbers.length + 1])}>
        Plus one
      </button>
      <List numbers={numbers} />
    </>
  );
}

[方法1和2渲染完全相同，只是它们的重新渲染行为不同。

在方法1中，当我单击Plus One并检查DOM时，我发现整个列表都已重新呈现。如果改为使用方法2，则仅将新添加的数字插入DOM。我发现它们都有用例，但是我不确定其行为。任何人都可以阐明这种行为吗？难道是因为我以前从未在React中使用过class-component的事实吗？

我在这里有一个codesandbox示例！

感谢一堆！

Answer 1

我发现我的问题是Why does React discard the entire DOM subtree and recreate it from scratch?的重复项>

简而言之，每次在渲染组件中定义的功能组件都会被重新创建。尽管React无法渲染新功能，但React无法区分渲染结果。

但是，反应可以查看道具更改，并决定是否应重新渲染功能组件。

在我最初的问题中，const WholeList = () => props.numbers.map(SubList);在List中定义，因此，每次List重新渲染时都会重新创建。 React无法可靠地确定WholeList是否已更改，因此无法重新提交。

在情况2中，呈现结果是确定性的，这是<p>的列表。 React可以比较之前的结果和新的结果。请参见反应Reconciliation。

目前，我仍然不确定我的理解是否正确。让我知道我做对了。 Downvote很好，但请与我分享您的想法。