协会网站设计方案,制作网站用什么代码,wordpress英文换成中文,甘孜建设机械网站问题背景
在数据没有发生变化的情况下React组件会进行数次重复渲染#xff0c;绘制出来完全相同的两个图
排查思路
寻找子组件重渲染原因实验
测试一#xff1a;在子组件的props未发生任何变更的情况下是否会发生重新渲染
import React, { useState } from react绘制出来完全相同的两个图
排查思路
寻找子组件重渲染原因实验
测试一在子组件的props未发生任何变更的情况下是否会发生重新渲染
import React, { useState } from react
import { Select } from antdconst { Option } Selectexport function Chart() {console.log(父组件重新渲染了)const [selectedOption, setSelectedOption] useState(option1)function handleSelectChange(value) {setSelectedOption(value)}return (divSelect defaultValue{selectedOption} onChange{handleSelectChange}Option valueoption1Option 1/OptionOption valueoption2Option 2/OptionOption valueoption3Option 3/Option/SelectChildComponent //div)
}function ChildComponent() {console.log(ChildComponent重新渲染了)return divHello from ChildComponent/div
}测试结论子组件即使不接收任何props当父组件重新渲染时子组件也会重新渲染
解决方案
使用React.memo关于memo介绍如下
包装一个组件memo以获得该组件的记忆版本。只要组件的 props 没有改变当它的父组件重新渲染时组件的这个记忆版本通常不会被重新渲染。 但 React 可能仍然会重新渲染它memoization 是一种性能优化而不是保证。
import React, { useState } from react
import { Select } from antdconst { Option } Selectexport function Chart() {console.log(父组件重新渲染了)const [selectedOption, setSelectedOption] useState(option1)function handleSelectChange(value) {setSelectedOption(value)}return (divSelect defaultValue{selectedOption} onChange{handleSelectChange}Option valueoption1Option 1/OptionOption valueoption2Option 2/OptionOption valueoption3Option 3/Option/Select{/* ChildComponent / */}MemoChild //div)
}function ChildComponent() {console.log(ChildComponent重新渲染了)return divHello from ChildComponent/div
}const MemoChild React.memo(ChildComponent)
即使使用memo但其仍然会在其接受的props发生变更时及其所在的上下文发生变更时重新渲染。
因此为了更好的使用memo应当尽量减少props的变化。具体方案如下
当props为引用值时应当使用useMemo返回相同引用值使得 props 中接受最少的必要信息当props包含函数时要么在组件外部声明它以使其永远不会更改要么useCallback在重新渲染之间缓存其定义。
例如当props为对象时应当减少props对象的变化
测试内组件对memo的影响
接下来进行另外的测试将子组件放在Adapt中称为内部组件
可以发现此时子组件的缓存失效了尽管子组件没有props的变化
但每次父组件重新渲染子组件仍然会重新渲染
import React, { useState } from react
import { Select } from antdconst { Option } Selectexport function Adapt() {console.log(父组件重新渲染了)const [selectedOption, setSelectedOption] useState(option1)function handleSelectChange(value) {setSelectedOption(value)}return (divSelect defaultValue{selectedOption} onChange{handleSelectChange}Option valueoption1Option 1/OptionOption valueoption2Option 2/OptionOption valueoption3Option 3/Option/Select{/* ChildComponent / */}MemoChild //div)
}function ChildComponent() {console.log(ChildComponent重新渲染了)return divHello from ChildComponent/div
}const MemoChild React.memo(ChildComponent)
React.memo 失效的原因是因为将 ChildComponent 和 MemoChild 定义在了 Adapt 组件的内部。这意味着每当 Adapt 组件重新渲染时ChildComponent 和 MemoChild 都会重新定义导致了缓存失效。
测试props变更对memo的影响
改写测试用例测试当父组件的props变更时子组件是否重新渲染
import React, { useState } from react
import { Select } from antdconst { Option } Selectexport function Adapt() {console.log(Adapt重新渲染了)const [filterList, setFilterList] useState(null)function onRefresh(value) {setFilterList(value)}return (divChart {...{ onRefresh, filterList }} //div)
}function Chart({ filterList, onRefresh }) {console.log(Chart重新渲染了)return (divSelect value{filterList} onChange{onRefresh}Option valueoption1Option 1/OptionOption valueoption2Option 2/OptionOption valueoption3Option 3/Option/SelectMemoChild //div)
}function ChildComponent() {console.log(ChildComponent重新渲染了)return divhello/div
}const MemoChild React.memo(ChildComponent)export default Adapt
子组件仍然可以进行正常的缓存可得知当子组件使用memo
无论是父组件的state或者props状态变更只要子组件的props和上下文未变化都不会影响到子组件
问题结论
导致组件重复渲染的可能如下
当子组件未使用memo时子组件会随着父组件一起重新渲染因此即使子组件的props未变化仍会多次渲染子组件当子组件使用了memo但仍然重新渲染 子组件接受的props或者context变更了子组件的上下文及props都没变更但子组件时内部组件所以每次都是重新创建的
因此为了优化子组件的多次渲染应当注意
重复的渲染可以使用memo缓存父组件传递的重复的props参数可以使用useMemo每次传递的props应当是最小的props不然无关的props变更会影响组件缓存失效组件及函数应该尽量以纯函数形式写在组件之外避免组件重渲染时重新创建函数带来的影响
