[英]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.