memo、useMemo和useCallback

memo

memo用来优化函数组件的重复渲染行为，当传入属性值都不变的情况下不会触发组件的重新渲染，否则就会触发组件的重新渲染

const Product = memo(({ products, brands, keyWord }: any) => {
  return (
    <View className={styles.product}>
      {products.map((product) => (
        <SearchProductDetail
          keyWord={keyWord}
          productDetail={product}
          brandName={findBrandName(product.brandRawid, brands)}
        />
      ))}
    </View>
  )
})

useMemo

定义了一段函数逻辑是否重复执行

const renderTags = useMemo(() => {
  const tags = showSearchResult?.tags || []
  return tags.map((tag) => <TagChoose tag={tag} setSeletedTags={setSeletedTags} seletedTags={seletedTags} />)
}, [showSearchResult, seletedTags])

useCallback

useCallback的使用几乎与useMemo一样，不过useCallback缓存的是一个函数体，当依赖项中的一项发现变化，函数体会重新创建。