小编Sud*_*mar的帖子

19
推荐指数
6
解决办法
1万
查看次数

当我将对象作为道具传递给子组件时,如何避免重新渲染?

我有带有多个子组件的父组件。从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>
  );
});
Run Code Online (Sandbox Code Playgroud)

javascript ecmascript-6 reactjs react-native

3
推荐指数
1
解决办法
3646
查看次数