脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript类库 → React → React memo bug

记一个React.memo引起的bug

 更新时间：2022年03月08日 10:09:39   作者：a_little16125  
memo可以自己决定是否更新，但它是一个函数组件而非一个类，本文主要介绍了React.memo引起的bug，具有一定的参考价值，感兴趣的可以了解一下

与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内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

相关文章

  • React中useState的使用方法及注意事项

    React中useState的使用方法及注意事项

    useState通过在函数组件里调用它来给组件添加一些内部state,下面这篇文章主要给大家介绍了关于React中useState的使用方法及注意事项的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
    2022-08-08
  • react-redux action传参及多个state处理的实现

    react-redux action传参及多个state处理的实现

    本文主要介绍了react-redux action传参及多个state处理的实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
    2022-07-07
  • Electron打包React生成桌面应用方法详解

    Electron打包React生成桌面应用方法详解

    这篇文章主要介绍了React+Electron快速创建并打包成桌面应用，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习吧
    2022-12-12
  • react Table准备Spin Empty ConfigProvider组件实现

    react Table准备Spin Empty ConfigProvider组件实现

    这篇文章主要为大家介绍了react Table准备Spin、Empty、ConfigProvider组件实现详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪<BR>
    2023-02-02
  • React.js入门实例教程之创建hello world 的5种方式

    React.js入门实例教程之创建hello world 的5种方式

    React 是近期非常热门的一个前端开发框架。应用非常广泛，接下来通过本文给大家介绍React.js入门实例教程之创建hello world 的5种方式 ，需要的朋友参考下吧
    2016-05-05
  • 关于react的代理配置(可配置多个代理)

    关于react的代理配置(可配置多个代理)

    这篇文章主要介绍了关于react的代理配置(可配置多个代理)，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
    2022-12-12
  • 基于React.js实现原生js拖拽效果引发的思考

    基于React.js实现原生js拖拽效果引发的思考

    这篇文章主要为大家详细介绍了基于React.js实现原生js拖拽效果，继而引发的一系列思考，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2016-03-03
  • React高阶组件的使用浅析

    React高阶组件的使用浅析

    高阶组件就是接受一个组件作为参数并返回一个新组件（功能增强的组件）的函数。这里需要注意高阶组件是一个函数，并不是组件，这一点一定要注意，本文给大家分享React高阶组件使用小结，一起看看吧
    2022-08-08
  • react父组件调用子组件的方式汇总

    react父组件调用子组件的方式汇总

    在react中常用props实现子组件数据到父组件的传递,但是父组件调用子组件的功能却不常用,下面这篇文章主要给大家介绍了关于react父组件调用子组件的相关资料,需要的朋友可以参考下
    2022-08-08
  • React中设置样式style方式

    React中设置样式style方式

    这篇文章主要介绍了React中设置样式style方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2023-11-11

最新评论