[英]how to use React.memo with a Component contains children
需要帮助~
孩子
const Child = ()=> <div>I'm Child</div
export default Child
家长
const Parent = (props)=> <div>{props.children}</div>
export default React.memo(Parent)
const App = () => {
const [count, setCount] = useState(0)
return(
<div>
<button onClick={()=>setCount(count+1)}></button>
<Parent>
<Child></Child>
</Parent>
</div>
)
}
父组件将重新渲染,因此备忘录不起作用,因为它的子组件是一个函数组件
我知道用useMemo解决的方法,但是又丑又不友好,大家有更好的想法吗?
const App = () => {
const [count, setCount] = useState(0)
const children = useMemo(()=><Child></Child>,[])
return(
<div>
<button onClick={()=>setCount(count+1)}></button>
<Parent>
{children}
</Parent>
</div>
)
}
用React.memo
包裹你的<Child />
:
const Child = ()=> {
console.log('render') // fires only once - on initial render
return <div>I'm Child</div>
}
const MChild = React.memo(Child);
const Parent = (props)=> <div>{props.children}</div>
const MParent = React.memo(Parent)
const App = () => {
const [count, setCount] = useState(0);
return(
<div>
<button onClick={()=>setCount(count+1)}>increment {count}</button>
<MParent>
<MChild></MChild>
</MParent>
</div>
)
}
render(<App />, document.getElementById('root'));
const children = useMemo(()=><Child></Child>,[])
是最简单的方法。 使用memo(Child)
不起作用,因为每当您调用<Child />
时,jsx 实际上都会返回一个新对象。 React.memo
默认只使用简单的浅比较,所以真的没有其他直接的方法来解决它。 您可以创建自己的函数,最终支持子项并将其传递给React.memo(MyComp, myChildrenAwareEqual)
。
将<Parent><Child/></Parent>
到一个单独的组件中,并记住该组件:
const Family = memo(() => <Parent><Child/></Parent>);
const App = () => {
const [count, setCount] = useState(0);
return (
<>
<button onClick={() => setCount(count => count + 1)}>{count}</button>
<Family />
</>
)
}
const Memo = React.memo(({ children, value }) => {
return children
}, (prev, next) => prev.value === next.value)
然后使用它
function Title() {
const [count, setCount] = useState(0)
const onClick = () => {
setCount(c => c + 1)
}
const a = ''
return (
<>
<div onClick={onClick}>{count}</div>
<Memo value={a}>
<Child>
<Nothing2 a={a} />
</Child>
</Memo>
</>
)
}
当a
改变时,Child 渲染,否则它会与之前的渲染一起跳出。
我在我的博客中概述了它背后的理性, https://javascript.plainenglish.io/can-usememo-skip-a-child-render-94e61f5ad981
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.