[英]How to avoid re-rendering when i pass an object as prop to child component?
我有多个子组件的父组件。 从 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 官方文档,默认情况下,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
复杂对象。
您可以使用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);
有关更多详细信息,请查看此处。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.