<p>所以据说，useCallback可以缓存一个函数，我认为意图是为了使代码运行更快。</p> <p>例如，如果我有：</p> <pre class="brush:js;toolbar:false;"> const handleChange = (ev) => { setMsg(ev.target.value); }; </pre> <p>我也可以将其改为：</p> <pre class="brush:js;toolbar:false;"> const handleChange = useCallback((ev) => { setMsg(ev.target.value); }, []); </pre> <p>这样现在函数被缓存了。然而，这个函数不管怎样都需要在组件重新渲染时创建吗？</p> <p>为了测试它，我将其改为IIFE，这样函数就从中输出出来，它会打印出函数正在被输出。</p> <p>请参见： https://codesandbox.io/s/jolly-nightingale-zxqp8k</p> <p>所以每当你在输入框中输入内容时，都会输出一个新的函数，如控制台所示。这意味着，IIFE每次都会执行，这也意味着，即使它不是IIFE，函数字面量也会每次都被转换为函数对象。那么这如何帮助代码运行更快呢？</p>

useEffect(() => {
  // ... 使用handleChange做一些事情
}, [handleChange]);

const Parent = () => {
  const handleChange = useCallback((ev) => {
    setMsg(ev.target.value);
  }, []);
  return <Child handleChange={handleChange}/>
}

const Child = React.memo(({ handleChange }) => {
  // ... 使用handleChange做一些事情
})