将对象作为道具传递给子组件时，如何避免重新渲染？

问题描述

我有一个带有多个子组件的父组件。从api获取数据后，会将不同类型的数据传递给子组件。一些组件将获得对象作为道具。我试图避免在该部分中退货。即使数据相同，也将重新呈现。我如何避免这种退缩？

const Parent = () => {
  const [childData,setChildData] = useState(null);
  
  useEffect(() => {
    const data = getChildData();
    setChildData(data);
  },[])

  return (
      <Child data={childData}/>
  );
};

const Child = React.memo((props) => {
  const {name,email} = props.data;
  return (
      <div>
        <p>Name: {name}</p>
        <p>Email: {email}</p>
      </div>
  );
});

解决方法

根据React Official Docs，默认情况下，React只会浅比较props对象中的复杂对象。如果要控制比较，还可以提供自定义比较功能作为第二个参数。 https://reactjs.org/docs/react-api.html#reactmemo。这是一个例子。

const Parent = () => {
    const [childData,setChildData] = useState(null);

    useEffect(() => {
        const data = getChildData();
        setChildData(data);
    },[])

    return (
        <Child data={childData} />
    );
};

function areEqual(prevProps,nextProps) {
    return prevProps.name == nextProps.name && prevProps.email == nextProps.email;
}
const Child = React.memo((props) => {
    const { name,email } = props.data;
    return (
        <div>
            <p>Name: {name}</p>
            <p>Email: {email}</p>
        </div>
    );
},areEqual);

,

默认情况下，React.memo仅会shallowly compare中的props个复杂对象。

您可以使用道具的自定义等同性检查。将自定义检查功能作为第二个参数传递给React.memo，如下所示

const areEqual = (prevProps,nextProps) => {
  const {name,email} = prevProps.data;
  const {name: nextName,email: nextEmail} = nextProps.data;
  return name === nextName && email === nextEmail;
};

const Child = React.memo((props) => {...},areEqual);

有关更多详细信息，请检查here。