为什么 react/javascript 每次我们调用它时都会重新创建一个函数实例？

Question

例如onChange函数：

const MyComponent = () => {
  const onChange = (e) => {
    doSomething(e.target.value)
  }

  return <input onChange={onChange} />
};

每次更改都会重新创建。为什么会这样，为什么函数不能保持原来的引用？

Answer 1

React 函数组件只是运行每个渲染周期和 return JSX 的函数。所以每个渲染都有一个完全不同的 onChange 常量，它持有对函数的不同引用（即使行为相同）。

如果你想保留渲染之间的引用，你应该使用 React.useCallback。您可以在 React 文档中找到更多相关信息：https://reactjs.org/docs/hooks-reference.html#usecallback

Why does react/javascript recreates a function instance every time we call it?