React函数组件内部使用memo()是否合规？附实现代码咨询

你的当前写法不可行，原因是：每次Input组件渲染时，都会重新执行memo(Animated.createAnimatedComponent(Ui.Text))，生成一个全新的AnimatedText组件实例。即使你用了memo，也无法阻止子组件的重复渲染——因为组件类型发生了变化，React会判定这是完全不同的组件，进而销毁旧组件并重新挂载新组件，既浪费性能，还可能丢失组件内部的状态或动画状态。

正确的方案是使用useMemo包裹，配合空依赖数组，确保AnimatedText组件只在组件首次渲染时创建一次：

export function Input({ placeholder }) {
  const AnimatedText = useMemo(() => {
    return memo(Animated.createAnimatedComponent(Ui.Text))
  }, [])

  return (
    <AnimatedText>
      {placeholder}
    </AnimatedText>
  )
}

补充说明：

• useMemo的空依赖数组[]保证回调函数只执行一次，生成的AnimatedText组件实例在组件生命周期内保持不变。
• 这里的memo是否需要，取决于Ui.Text本身的props变化情况——如果Ui.Text的props不会频繁无意义变化，memo可以进一步优化渲染；如果Ui.Text本身已经是优化过的组件，也可以考虑去掉memo，只保留Animated.createAnimatedComponent在useMemo中。

内容的提问来源于stack exchange，提问作者Ilja