[React] Optimization Cookbook

本文主要是介绍[React] Optimization Cookbook，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

Containerization of State within Child React Components

The changing of state is the reason why components re-render. If you lift all of your state up into the parent container and pass it down to child components, any update to that state in the parent affects all other sibling components. Causing many useless re-renders. By simply moving the state into that child component, saves having to use React.Memo on all sibling components.

function Parent () {
    const [count, setCount] = useState(0);
    
    return (
        <>
            <Child count={count} setCount={setCount} />
            <SecondChild />
            <ThirdChild />
        </>
    )
}

function Child({count, setCount}) {
    ...
}

We lift Child component state to its Partent component, then passing the props down to the Child component. 

这篇关于[React] Optimization Cookbook的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！