当使用React钩子和备忘录时，如何防止子组件重新呈现？

当使用React钩子和备忘录时，如何防止子组件重新呈现？

在您的情况下，记住Child并不真正有意义，因为如果项发生更改，则必须重新渲染child。但是，如果情况不变，道具仍然不变，但由于重新创建了功能，仍然在重新渲染孩子，则您将

useCallback

在每个渲染上使用钩子来记住功能。另外，由于已经记住了处理程序，因此应该使用回调方法来更新状态，因为

item

处理程序内部将仅引用最初创建函数时所具有的值。

function Parent() {  const [item, setItem] = useState({ name: "item", value: 0 });  const handleChangeItem = useCallback(() => {    setItem(prevItem => ({ ...prevItem, value: prevItem.value + 1 }));  }, []);  return (    <>      Name: {item.name} Value: {item.value}      <Child changeItem={handleChangeItem} />    </>  );}const Child = React.memo(function Child({ item, changeItem }) {  function handleClick() {    changeItem();  }  console.log("child render");  return (    <div>      <button onClick={handleClick}>change state in parent</button>    </div>  );});

工作演示

PS
感谢@danAbramov提供指导