react re-render的解决方案

问题代码

import {Dispatch, FC, SetStateAction, useState} from 'react'

import './App.css'


const Child: FC<{  m: number, setM: Dispatch<SetStateAction<number>>  }> = (props) => {
    const {m, setM  } = props
    return (
        <div>
            <button onClick={() => setM(m + 1)}>addM</button>
            <span>child</span>
            <span>{m}</span>
        </div>
    )
}
const App = () => {
    const [n, setN] = useState(0)
    const [m, setM] = useState(0)
    return (
        <div>
            <button onClick={() => setN(n + 1)}>addN</button>
            <span>father</span>
            <span>{n}</span>
            <div>
                <Child m={m} setM={setM}/>
            </div>

        </div>
    )
}

export default App

问题描述

上面这个组件现在存在的问题：
当我们在点击n+1时，会导致App组件重新渲染，然后Child组件虽然不依赖n，但是由于父组件re-render,他自己也会进行无效的re-render

解决方法一 使用Memo

为了减少这种无效的re-render,我们经常会使用memo()去包裹组件，配合useCallback缓存函数，useMemo缓存其他变量来达到缓存组件，减少无效更新的情况。

import {Dispatch, FC, memo, SetStateAction, useCallback, useState} from 'react'

import './App.css'


const _Child: FC<{  m: number, setM: Dispatch<SetStateAction<number>>  }> = (props) => {
    const {m, setM  } = props
    console.log('child render')
    return (
        <div>
            <button onClick={() => setM(m + 1)}>addM</button>
            <span>child</span>
            <span>{m}</span>
        </div>
    )
}
const Child= memo(_Child)


const App = () => {
    const [n, setN] = useState(0)
    const [m, setM] = useState(0)
    return (
        <div>
            <button onClick={() => setN(n + 1)}>addN</button>
            <span>father</span>
            <span>{n}</span>
            <div>
                <Child m={m} setM={useCallback(setM, [])}/>
            </div>
        </div>
    )
}

解决方法二 向下移动state

这个解决方法其实就是将组件粒度变得更细。
将state下沉到与之相关的组件中去，也就是将与该状态相关的组件抽离成一个单独的组件。

import {useState} from 'react'

import './App.css'


const Child = () => {
    const [m, setM] = useState(0)
    return (
        <div>
            <button onClick={() => setM(m + 1)}>addM</button>
            <span>child</span>
            <span>{m}</span>
        </div>
    )
}

const Child2 = () => {
    const [n, setN] = useState(0)
    return (
        <>
            <button onClick={() => setN(n + 1)}>addN</button>
            <span>Child2</span>
            <span>{n}</span>
        </>
    )
}
const App = () => {
    return (
        <div>
            <div>
                <Child2/>
            </div>
            <div>
                <Child/>
            </div>

        </div>
    )
}

export default App

解决方法三 内容提升

像上面那种情况，组件可以单独抽离是因为知道Child组件不依赖n的状态 代码如下。
但是如果我们假设是App中的div依赖n呢。这种情况下其实Child组件依然不应该刷新

import {Dispatch, FC, SetStateAction, useState} from 'react'

import './App.css'


const Child: FC<{  m: number, setM: Dispatch<SetStateAction<number>>  }> = (props) => {
    const {m, setM  } = props
    return (
        <div>
            <button onClick={() => setM(m + 1)}>addM</button>
            <span>child</span>
            <span>{m}</span>
        </div>
    )
}
const App = () => {
    const [n, setN] = useState(0)
    const [m, setM] = useState(0)
    return (
        <div class={n.toString()}>  //父组件依赖n
            <button onClick={() => setN(n + 1)}>addN</button>
            <span>father</span>
            <span>{n}</span>
            <div>
                <Child m={m} setM={setM}/>
            </div>

        </div>
    )
}

export default App

解决上面代码的问题

将于n相关的组件放到Father中，然后不相关的作为children传给Father组件。
这样在Father组件re-render的时候，由于App（父组件）中的组件没有变化，所以拿到的children依然是上一次的（没有发生变化的）所以children部分不会re-render。
这样就避免了无效的刷新

import {FC, HTMLAttributes, useState} from 'react';

export default function App() {
    return (
        <Father>
            <Child/>
        </Father>
    );
}

// 将内容提升到该父组件中
interface Props extends HTMLAttributes<HTMLDivElement>{}
const  Father:FC<Props>=({children})=> {
    const [n, setN] = useState(0)
    return (
        <div>
            <button onClick={() => setN(n + 1)}>addN</button>
            <span>father</span>
            <span>{n}</span>
            <div>
                {children}
            </div>

        </div>
    )
}

const Child = () => {
    const [m, setM] = useState(0)
    console.log("执行了")
    return (
        <div>
            <button onClick={() => setM(m + 1)}>addM</button>
            <span>child</span>
            <span>{m}</span>
        </div>
    )
}

解决方法四 内容集中

import {useState} from 'react'

import './App.css'


const App = () => {
    const [n, setN] = useState(0)
    const [m, setM] = useState(0)
    return (
        <div className={n.toString()}>
            <div>
                <button onClick={() => setN(n + 1)}>addN</button>
                <span>father</span>
                <span>{n}</span>
            </div>
            // 将内容提升到该父组件中
            <div>
                <button onClick={() => setM(m + 1)}>addM</button>
                <span>child</span>
                <span>{m}</span>
            </div>

        </div>
    )
}

export default App