We read every piece of feedback, and take your input very seriously.
To see all available qualifiers, see our documentation.
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
PureComponent:
PureComponent
相当于一个HOC,将组件的shouldComponentUpdate覆盖
HOC
shouldComponentUpdate
在shouldComponentUpdate中执行浅比较,遍历第一层,使用Object.is比较值和引用地址
Object.is
缺点:
如果引用类型为多层,浅比较则失效
如果JSX中,往子组件传入的props为下文这样,会导致失效
props
<Son value={value||[]}> // 每次渲染都是一个新的数组,引用地址改变
React.memo:
React.memo
(preProps,nextProps)
Context:
Context
value
懒加载:React.lazy等(常见于路由懒加载)
React.lazy
虚拟列表
受控组件细化
state
独立数据请求
手动批量更新
unstable_batchedUpdates:react-dom 中提供了unstable_batchedUpdates方法进行手动批量更新
unstable_batchedUpdates
react-dom
const handerClick = () => { Promise.resolve().then(()=>{ unstable_batchedUpdates(()=>{ setB( { ...b } ) setC( c+1 ) setA( a+1 ) }) }) } // 三次更新合并为一次
上文是因为在legacy模式下。将ReactDom.render改为createRoot也可解决上述问题
useMemo、useCallback
key
type
tagName
The text was updated successfully, but these errors were encountered:
No branches or pull requests
React优化相关
减少Render次数
PureComponent
:相当于一个
HOC
,将组件的shouldComponentUpdate
覆盖在
shouldComponentUpdate
中执行浅比较,遍历第一层,使用Object.is
比较值和引用地址缺点:
如果引用类型为多层,浅比较则失效
如果JSX中,往子组件传入的
props
为下文这样,会导致失效React.memo
:props
变更(preProps,nextProps)
,返回值与shouldComponentUpdate
相反Context
:value
值变化时会引发所有使用Context
组件的更新减少渲染数量
懒加载:
React.lazy
等(常见于路由懒加载)虚拟列表
受控组件细化
state
属性,从而引发渲染,可将与受控组件相关的逻辑单独摘出,这样state
更新只会引发部分渲染独立数据请求
手动批量更新
unstable_batchedUpdates
:react-dom
中提供了unstable_batchedUpdates
方法进行手动批量更新上文是因为在legacy模式下。将ReactDom.render改为createRoot也可解决上述问题
减少渲染计算量
useMemo、useCallback
:防止内次渲染导致重新生成该变量Diff方面
key
:避免将key赋值为索引type
或者tagName
操作:type更改会导致该元素及其子元素节点被删除,并重新创建新节点The text was updated successfully, but these errors were encountered: