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  } = propsreturn (<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  } = propsconsole.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  } = propsreturn (<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