react奇技淫巧一

类型一：

function Son() {
    console.log('son run')
    return (
       <div>儿子</div> 
    )
}

function Parent() {
    const [state, setState] = useState(1);
    console.log('parent run')
    return (
        <>
            <span onClick={() => setState(state + 1)}>add</span>
            <Son />
        </>
    )
}

类型二：

function Son() {
    console.log('son run')
    return (
       <div>儿子</div> 
    )
}
const S = <Son />
function Parent() {
    const [state, setState] = useState(1);
    console.log('parent run')
    return (
        <>
            <span onClick={() => setState(state + 1)}>add</span>
            {S}
        </>
    )
}

类型一当中，当parent更新的时候，son必然会被重新渲染一次，但是son组件本身不依赖父组件的任何状态，所以son组件的重新渲染是没有必要的。

此时我们可以通过React.memo(Son)来解决这个问题。

除了使用memo这种方式外，还可以使用方式二来进行解决：在父组件外层实例化Son组件。

这种方式类似于memo，当react diff到S的时候，会发现S这个react element对象的引用是稳定的，也就是同一个对象，那这个对象的props当然也就是一样的，此时react就会跳过对子组件的重新渲染。