Reactjs onChange in useEffect 的最佳实践

要求家长将onChange包在useCallback中是可行的，但 似乎是错误的，因为父母不应该关心子元素如何 已经实施了.

这不是关于父组件caring，而是关于子组件100如何传递props 或其任何实现，而是为消费者提供稳定的引用，并且不会触发不必要的重新呈现.换句话说，这是一种性能提升.

Reaction组件重新渲染的原因有两个，它们的状态或props 更新(e.g. via new references)，或者父组件重新渲染.

您正在传递一个匿名回调函数作为onChangeprops ，所以每当这个父组件呈现时，它都会提供一个新的onChange函数引用，并且肯定会触发子重新呈现.

对于这种模式，有没有最佳实践？

是的，记住传递下来的回调，以便将其作为稳定的引用提供.

记忆onChange处理程序函数，以便对子组件提供稳定的函数引用，以便仅在valueprops 更新时呈现to the DOM.

import { useCallback, useEffect, useState } from 'react';

export default function Parent () {
  const [result, setResult] = useState();

  const onChangeHandler = useCallback(r => {
    setResult(r.toString());
  }, [setResult]);

  return (
    <div>
      {result}
      <Child 
        value={0}
        onChange={onChangeHandler} 
      />
    </div>
  );
}

const Child = ({ onChange, value }) => {
  useEffect(() => {
    console.log("called");
    fetch(`blah/${value}`)
      .then(onChange)
      .catch(onChange);
  }, [value, onChange]);

  return <div>Child</div>;
};

因此，现在Reaction可以告诉我们，onChange引用不会将Render更改为Render，并且只要valueprops 没有更新，Reaction就可以放弃子组件(and its 102 sub-ReactTree)重新渲染even though重新渲染的父组件.同样，这只是一个性能优化，以减少不必要的重新渲染.

有关记忆函数引用的更多详细信息和其他原因，请参阅useCallback hook documentation.