为什么在 React Native 中包装的组件每次都会重新渲染？

Question

我在 React Native (expo) 中有一个功能组件，它通过堆栈导航器渲染页面。此页面返回一个简单的颜色选择器（react-native-wheel-color-picker），它是一个本机组件，以及一个更新状态的按钮。

我注意到，当直接输出颜色选择器时，它不会在状态更新期间重新渲染（很好）。但是，如果我将它包装在一个简单的功能组件中，它就会（不好）。

非常简单的例子：

  import { useState } from 'react';
  import ColorPicker from 'react-native-wheel-color-picker'

  const [test, setTest] = useState<number>(0);

  const ColorPickerFn = () => {
    // This one re-renders everytime. Why?
    return (<ColorPicker />) 
  }

  return (
    <>
      <ColorPickerFn />
      <ColorPicker />
      <Button onPress={ () => { setTest(test + 1); }}>{test}</Button>
    </>
  );

有人可以向我解释一下发生了什么事吗？

Answer 1

使用

React.memo

这会包装一个功能组件并防止它重新渲染，除非它的 props 发生变化。由于 ColorPickerFn 没有 props，因此除非明确告知，否则它不会重新渲染。

import React, { useState, memo } from 'react';
import ColorPicker from 'react-native-wheel-color-picker';

const ColorPickerFn = memo(() => {
    return (<ColorPicker />);
});

const MyComponent = () => {
   const [test, setTest] = useState(0);

   return (
     <>
        <ColorPickerFn />
        <ColorPicker />
        <Button onPress={() => { setTest(test + 1); }}>{test}</Button>
     </>
  );
};
export default MyComponent;