经验首页 前端设计 程序设计 Java相关 移动开发 数据库/运维 软件/图像 大数据/云计算 其他经验
当前位置：技术经验 » JS/JS库/框架 » React » 查看文章
记一个React.memo引起的bug
来源：jb51　　时间：2022/3/8 10:54:55　　对本文有异议

与PureComponent不同的是PureComponent只是进行浅对比props来决定是否跳过更新数据这个步骤，memo可以自己决定是否更新，但它是一个函数组件而非一个类，但请不要依赖它来“阻止”渲染，因为这会产生 bug。

一般memo用法：

import React from "react";

function MyComponent({props}){
? ? console.log('111);
? ? return (
? ? ? ? <div> {props} </div>
? ? )
};

function areEqual(prevProps, nextProps) {
? ? if(prevProps.seconds===nextProps.seconds){
? ? ? ? return true
? ? }else {
? ? ? ? return false
? ? }

}
export default React.memo(MyComponent,areEqual)

问题描述

我们在处理业务需求时，会用到memo来优化组件的渲染，例如某个组件依赖自身的状态即可完成更新，或仅在props中的某些数据变更时才需要重新渲染，那么我们就可以使用memo包裹住目标组件，这样在props没有变更时，组件不会重新渲染，以此来规避不必要的重复渲染。
下面是我创建的一个公共组件：

type Props = {
?inputDisable?: boolean
?// 是否一直展示输入框
?inputVisible?: boolean
?value: any
?min: number
?max: number
?onChange: (v: number) => void
}

const InputNumber: FC<Props> = memo(
?(props: Props) => {
? ?const { inputDisable, max, min, value, inputVisible } = props

? ?const handleUpdate = (e: any, num) => {
? ? ?e.stopPropagation()
? ? ?props.onChange(num)
? ?}
? ?return (
? ? ?<View className={styles.inputNumer}>
? ? ? ?{(value !== 0 || inputVisible) && (
? ? ? ? ?<>
? ? ? ? ? ?<Image
? ? ? ? ? ? ?className={styles.btn}
? ? ? ? ? ? ?src={require(value <= min
? ? ? ? ? ? ? ?? '../../assets/images/reduce-no.png'
? ? ? ? ? ? ? ?: '../../assets/images/reduce.png')}
? ? ? ? ? ? ?onClick={e => handleUpdate(e, value - 1)}
? ? ? ? ? ? ?mode='aspectFill'
? ? ? ? ? ?/>
? ? ? ? ? ?<Input
? ? ? ? ? ? ?value={value}
? ? ? ? ? ? ?disabled={inputDisable}
? ? ? ? ? ? ?alwaysEmbed
? ? ? ? ? ? ?type='number'
? ? ? ? ? ? ?cursor={-1}
? ? ? ? ? ? ?onInput={e => handleUpdate(e, parseInt(e.detail.value ? e.detail.value : '0'), 'input')}
? ? ? ? ? ?/>
? ? ? ? ?</>
? ? ? ?)}
? ? ? ?<Image
? ? ? ? ?className={styles.btn}
? ? ? ? ?src={require(max !== -1 && (value >= max || min > max)
? ? ? ? ? ?? '../../assets/images/plus-no.png'
? ? ? ? ? ?: '../../assets/images/plus.png')}
? ? ? ? ?onClick={e => handleUpdate(e, value + 1)}
? ? ? ?/>
? ? ?</View>
? ?)
?},
?(prevProps, nextProps) => {
? ?return prevProps.value === nextProps.value && prevProps.min === nextProps.min && prevProps.max === nextProps.max
?}
)

export default InputNumber

这个组件是一个自定义的数字选择器，在memo的第二个参数中设置我们需要的参数，当这些参数有变更时，组件才会重新渲染。
在下面是我们用到这个组件的场景。

type Props = {
info: any
onUpdate: (items) => void
}

const CartBrand: FC<Props> = (props: Props) => {
const { info } = props
const [items, setItems] = useState<any>(
? info.items.map(item => {
? // selected默认为false
? ? return { num:1, selected: false }
? })
)

useEffect(() => {
? getCartStatus()
}, [])

// 获取info.items中没有提供，但是展示需要的数据
const getCartStatus = () => {
? setTimeout(() => {
? ? setItems(
? ? ? info.items.map(item => {
? ? ? //更新selected为true
? ? ? ? return {num: 1, selected: true }
? ? ? })
? ? )
? }, 1000)
}

return (
? <View className={styles.brandBox}>
? ? {items.map((item: GoodSku, index: number) => {
? ? ? return (
? ? ? ? <InputNumber
? ? ? ? ? key={item.skuId}
? ? ? ? ? inputDisable
? ? ? ? ? min={0}
? ? ? ? ? max={50}
? ? ? ? ? value={item.num}
? ? ? ? ? onChange={v => {
? ? ? ? ? ? console.log(v, item.selected)
? ? ? ? ? }}
? ? ? ? />
? ? ? )
? ? })}
? </View>
)
}

export default CartBrand

这个组件的目的是展示props传过来的列表，但是列表中有些数据服务端没有给到，需要你再次通过另一个接口去获取，我用settimeout替代了获取接口数据的过程。为了让用户在获取接口的过程中不需要等待，我们先根据props的数据给items设置了默认值。然后在接口数据拿到后再更新items。
但几秒钟后我们在子组件InputNumber中更新数据，会看到:

selected依然是false!
这是为什么呢？前面不是把items中所有的selected都改为true了吗？
我们再打印一下items看看：

似乎在InputNumber中的items依然是初始值。
对于这一现象，我个人理解为memo使用的memoization算法存储了上一次渲染的items数值，由于InputNumber没有重新渲染，所以在它的本地状态中，items一直是初始值。

解决方法

方案一. 使用useRef + forceUpdate方案

我们可以使用useRef来保证items一直是最新的，讲useState换为useRef

? type Props = {
? info: any
? onUpdate: (items) => void
}

const CartBrand: FC<Props> = (props: Props) => {
? const { info } = props
? const items = useRef<any>(
? ? info.items.map(item => {
? ? // selected默认为false
? ? ? return { num:1, selected: false }
? ? })
? )

? useEffect(() => {
? ? getCartStatus()
? }, [])
??
? // 获取info.items中没有提供，但是展示需要的数据
? const getCartStatus = () => {
? ? setTimeout(() => {
? ? ? items.current = info.items.map(() => {
? ? ? ? return { num: 1, selected: true }
? ? ? })
? ? }, 1000)
? }

? return (
? ? <View className={styles.brandBox}>
? ? ? {items.current.map((item: GoodSku, index: number) => {
? ? ? ? return (
? ? ? ? ? <InputNumber
? ? ? ? ? ? key={item.skuId}
? ? ? ? ? ? inputDisable
? ? ? ? ? ? min={0}
? ? ? ? ? ? max={50}
? ? ? ? ? ? value={item.num}
? ? ? ? ? ? onChange={v => {
? ? ? ? ? ? ? console.log(v, items)
? ? ? ? ? ? }}
? ? ? ? ? />
? ? ? ? )
? ? ? })}
? ? </View>
? )
}

export default CartBrand

这样再打印的时候我们会看到

items中的selected已经变成true了
但是此时如果我们需要根据items中的selected去渲染不同的文字，会发现并没有变化。

? return (
? ? <View className={styles.brandBox}>
? ? ? {items.current.map((item: GoodSku, index: number) => {
? ? ? ? return (
? ? ? ? ? <View key={item.skuId}>
? ? ? ? ? ? <View>{item.selected ? '选中' : '未选中'}</View>
? ? ? ? ? ? <InputNumber
? ? ? ? ? ? ? inputDisable
? ? ? ? ? ? ? // 最小购买数量
? ? ? ? ? ? ? min={0}
? ? ? ? ? ? ? max={50}
? ? ? ? ? ? ? value={item.num}
? ? ? ? ? ? ? onChange={() => {
? ? ? ? ? ? ? ? console.log('selected', items)
? ? ? ? ? ? ? }}
? ? ? ? ? ? />
? ? ? ? ? </View>
? ? ? ? )
? ? ? })}
? ? </View>
? )

显示还是未选中

这是因为useRef的值会更新，但不会更新他们的 UI，除非组件重新渲染。因此我们可以手动更新一个值去强制让组件在我们需要的时候重新渲染。

const CartBrand: FC<Props> = (props: Props) => {
? const { info } = props
? // 定义一个state,它在每次调用的时候都会让组件重新渲染
? const [, setForceUpdate] = useState(Date.now())
? const items = useRef<any>(
? ? info.items.map(item => {
? ? ? return { num: 1, selected: false }
? ? })
? )
? useEffect(() => {
? ? getCartStatus()
? }, [])

const getCartStatus = () => {
? ? setTimeout(() => {
? ? ? items.current = info.items.map(() => {
? ? ? ? return { num: 1, selected: true }
? ? ? })
? ? ? setForceUpdate()
? ? }, 5000)
? }

? return (
? ? <View className={styles.brandBox}>
? ? ? {items.current.map((item: GoodSku, index: number) => {
? ? ? ? return (
? ? ? ? ? <View key={item.skuId}>
? ? ? ? ? ? <View>{item.selected ? '选中' : '未选中'}</View>
? ? ? ? ? ? <InputNumber
? ? ? ? ? ? ? inputDisable
? ? ? ? ? ? ? // 最小购买数量
? ? ? ? ? ? ? min={0}
? ? ? ? ? ? ? max={50}
? ? ? ? ? ? ? value={item.num}
? ? ? ? ? ? ? onChange={() => {
? ? ? ? ? ? ? ? console.log('selected', items)
? ? ? ? ? ? ? }}
? ? ? ? ? ? />
? ? ? ? ? </View>
? ? ? ? )
? ? ? })}
? ? </View>
? )
}

export default CartBrand

这样我们就可以使用最新的items，并保证items相关的渲染不会出错

方案2. 使用useCallback

在InputNumber这个组件中，memo的第二个参数，我没有判断onClick回调是否相同，因为无论如何它都是不同的。
参考这个文章：use react memo wisely
函数对象只等于它自己。让我们通过比较一些函数来看看：

function sumFactory() {

return (a, b) => a + b;

}

const sum1 = sumFactory();

const sum2 = sumFactory();

console.log(sum1 === sum2); // => false

console.log(sum1 === sum1); // => true

console.log(sum2 === sum2); // => true

sumFactory()是一个工厂函数。它返回对 2 个数字求和的函数。
函数sum1和sum2由工厂创建。这两个函数对数字求和。但是，sum1和sum2是不同的函数对象（sum1 === sum2is false）。
每次父组件为其子组件定义回调时，它都会创建新的函数实例。在自定义比较函数中过滤掉onClick固然可以规避掉这种问题，但是这也会导致我们上述的问题，在前面提到的文章中，为我们提供了另一种解决思路，我们可以使用useCallback来缓存回调函数：

type Props = {
? info: any
? onUpdate: (items) => void
}

const CartBrand: FC<Props> = (props: Props) => {
? const { info } = props
? const [items, setItems] = useState(
? ? info.items.map(item => {
? ? ? return { num: 1, selected: false }
? ? })
? )
? useEffect(() => {
? ? getCartStatus()
? }, [])
? // 获取当前购物车中所有的商品的库存状态
? const getCartStatus = () => {
? ? setTimeout(() => {
? ? ? setItems(
? ? ? ? info.items.map(() => {
? ? ? ? ? return { num: 1, selected: true }
? ? ? ? })
? ? ? )
? ? }, 5000)
? }

? // 使用useCallback缓存回调函数
? const logChange = useCallback(
? ? v => {
? ? ? console.log('selected', items)
? ? },
? ? [items]
? )

? return (
? ? <View className={styles.brandBox}>
? ? ? {items.map((item: GoodSku, index: number) => {
? ? ? ? return (
? ? ? ? ? <View key={item.skuId}>
? ? ? ? ? ? <InputNumber
? ? ? ? ? ? ? inputDisable
? ? ? ? ? ? ? // 最小购买数量
? ? ? ? ? ? ? min={0}
? ? ? ? ? ? ? max={50}
? ? ? ? ? ? ? value={item.num}
? ? ? ? ? ? ? onChange={logChange}
? ? ? ? ? ? />
? ? ? ? ? </View>
? ? ? ? )
? ? ? })}
? ? </View>
? )
}

相应的，我们可以把InputNumber的自定义比较函数去掉。

type Props = {
?inputDisable?: boolean
?// 是否一直展示输入框
?inputVisible?: boolean
?value: any
?min: number
?max: number
?onChange: (v: number) => void
}

const InputNumber: FC<Props> = memo(
?(props: Props) => {
? ?const { inputDisable, max, min, value, inputVisible } = props

? ?const handleUpdate = (e: any, num) => {
? ? ?e.stopPropagation()
? ? ?props.onChange(num)
? ?}
? ?return (
? ? ?<View className={styles.inputNumer}>
? ? ? ?{(value !== 0 || inputVisible) && (
? ? ? ? ?<>
? ? ? ? ? ?<Image
? ? ? ? ? ? ?className={styles.btn}
? ? ? ? ? ? ?src={require(value <= min
? ? ? ? ? ? ? ?? '../../assets/images/reduce-no.png'
? ? ? ? ? ? ? ?: '../../assets/images/reduce.png')}
? ? ? ? ? ? ?onClick={e => handleUpdate(e, value - 1)}
? ? ? ? ? ? ?mode='aspectFill'
? ? ? ? ? ?/>
? ? ? ? ? ?<Input
? ? ? ? ? ? ?value={value}
? ? ? ? ? ? ?disabled={inputDisable}
? ? ? ? ? ? ?alwaysEmbed
? ? ? ? ? ? ?type='number'
? ? ? ? ? ? ?cursor={-1}
? ? ? ? ? ? ?onInput={e => handleUpdate(e, parseInt(e.detail.value ? e.detail.value : '0'), 'input')}
? ? ? ? ? ?/>
? ? ? ? ?</>
? ? ? ?)}
? ? ? ?<Image
? ? ? ? ?className={styles.btn}
? ? ? ? ?src={require(max !== -1 && (value >= max || min > max)
? ? ? ? ? ?? '../../assets/images/plus-no.png'
? ? ? ? ? ?: '../../assets/images/plus.png')}
? ? ? ? ?onClick={e => handleUpdate(e, value + 1)}
? ? ? ?/>
? ? ?</View>
? ?)
?}
)

export default InputNumber

这样在items更新的时候，inputNumber也会刷新，不过在复杂的逻辑中，比如items的结构非常复杂，items中很多字段都会有高频率的改变，那这种方式会减弱InputNumber中memo的效果，因为它会随着items的改变而刷新。

总结

在最后，我还是选择了方案一解决这个问题。同时提醒自己，memo的使用要谨慎??

到此这篇关于记一个React.memo引起的bug的文章就介绍到这了,更多相关React memo bug内容请搜索w3xue以前的文章或继续浏览下面的相关文章希望大家以后多多支持w3xue！

 友情链接： NPS

React热门文章

  • React报错解决之ref返回undefined或null
  • 使用react-beautiful-dnd实现列表间拖拽踩坑
  • React使用高德地图的实现示例(react-amap)
  • react项目添加本地音频
  • vue3+ts中ref与reactive指定类型实现示例
  • React antd tabs切换造成子组件重复刷新
  • react&nbsp;可拖拽进度条的实现
  • React如何创建组件
  • React Native项目中使用Lottie动画的方法
  • PowerBuilder编程新思维5：包装（界面美化与WebUI+React）

    • React推荐文章

  • react-router-dom?v6?使用详细示例
  • React项目中使用Redux的?react-redux
  • react创建项目启动报错的完美解决方法
  • Project?Reactor源码解析publishOn使用示例
  • Jetpack?Compose对比React?Hooks?API相似度
  • 记一个React.memo引起的bug
  • 详解React的组件通讯
  • React列表栏及购物车组件使用详解
  • React + Threejs + Swiper 实现全景图效果的完整代码
  • React如何创建组件