内置的 React Native 组件是纯的吗？

Question

我在文档中发现Flatlist，SectionList是PureComponents. 没有关于其他组件的任何信息（例如TouchableOpacity）。我想找出哪个 RN 内置组件useCallback在必要时可以使用。

如果所有其他组件都不是纯组件，则无需useCallback在此示例中使用。

export default App = () => {
  const [count, setCount] = useState(0);
  const onPress = useCallback(() => setCount(prevCount => prevCount + 1), [prevCount]);

  return (
    <View style={styles.container}>
      <TouchableOpacity
        style={styles.button}
        onPress={onPress}
      >
        <Text>Press Here</Text>
      </TouchableOpacity>
    </View>
  );
};

Answer 1

TL;DR Flatlist, SectionList, VirtualizedList是React.PureComponent其余的组件是React.Component.

如何查找哪个组件正在使用 PureComponent

您可以在 Github 上查看 react-native 组件的源代码，它们使用 PureComponent 或普通组件。

你看到 React-Native 的 TouchableOpacity 是用 Component 扩展的。

TouchableOpacity 源

但另一方面， you can see FlatList uses PureComponent

FlatList 源

另外，你可以看到SectionList用于React.PureComponent

节列表源

这是Text component of React-Nativewhich is not using React.PureComponent。

文字来源

所以结论是默认情况下每个组件都会扩展，但React. Component不包括他们在他们正在使用的文档中提到的那些组件React.PureComponent。

在哪里使用 useCallback 钩子

所以大家知道，Pure 组件是used to optimizing rendering of a class component这样的，如果你想优化功能组件，那么呢？

you can use React.memo

useCallback 在将回调传递给依赖引用相等的优化子组件时很有用，以防止不必要的渲染（例如 shouldComponentUpdate）。

Learn about when to use memo or useCallback 阅读这篇有趣的文章。

https://kentcdodds.com/blog/usememo-and-usecallback

Answer 2

1. 如何找出哪些组件PureComponent不是哪些组件？

   如果您在文档中找不到答案，您基本上可以检查 react native 源代码。例如：

   • FlatList 的源代码你可以看到它扩展React.PureComponent==> 它是纯组件

   • TouchableOpacity 的源代码你可以看到它扩展React. Component==> 它是正常的组件

2. 如果所有其他组件都不是纯的，则不需要使用useCallback?

   这真的取决于：

   • React.memo 正在做类似的事情，React.PureComponent但它用于功能组件。这意味着如果使用 React.memo 实现 React Native 组件，useCallback也会很有帮助。
   • 如果使用 shouldComponentUpdate 来控制重新渲染的 React Native 组件以及您从组件传递的 props 参与其中，那么您useCallback也很有帮助。查看这篇文章，您可能会发现一些示例代码以供理解。