Чисты ли встроенные собственные компоненты React? - PullRequest
Новая
       17

Чисты ли встроенные собственные компоненты React?

4 голосов
/ 16 июня 2020

Я обнаружил в документации, что 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>
  );
};

Ответы [ 2 ]

7 голосов
/ 16 июня 2020

TL; DR Flatlist, SectionList, VirtualizedList это React.PureComponent остальные компоненты React.Component.

Как узнать, какой компонент использует PureComponent

Вы можете проверить исходный код компонентов React-native на Github, которые используют PureComponent или обычный компонент.

Вы видите, что TouchableOpacity из React-Native расширен с помощью Component.

Источник TouchableOpacity

enter image description here

But on the other hand, you can see FlatList uses PureComponent

Источник FlatList

enter image description here

Also, you can see SectionList is used to React.PureComponent

Источник SectionList

enter image description here

Here is the Text component of React-Native which is not using React.PureComponent.

Источник текста

enter image description here

So the conclusion is by default every component extends with React. Component excluding those components which they have mentioned in the docs that they are using React.PureComponent.

Where to use useCallback hook

So as you know, the Pure component is used to optimizing rendering of a class component so if you wanted to optimize functional component, then?

you can use React.memo

useCallback is useful when passing callbacks to optimized child components that rely on reference equality to prevent unnecessary renders (e.g. shouldComponentUpdate).

Learn about when to use memo or useCallback read this interesting article.

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

5 голосов
/ 19 июня 2020

  1. Как узнать, какие компоненты PureComponent, а какие нет?

    Если вы не можете найти ответ в документации, вы можете просто проверить исходный код реакции. Например:

  2. Если все остальные компоненты не pure не обязательно использовать useCallback?

    Это действительно зависит от:

    • React.memo делает то же самое React.PureComponent, но для функционального компонента. Это означает, что если компонент React Native реализован с использованием React.memo, useCallback тоже полезен.
    • Если компонент React Native использует shouldComponentUpdate для управления повторным рендерингом и задействованы реквизиты, которые вы передаете из вашего компонента в нем вам тоже пригодится useCallback. Проверьте в этой статье , вы можете найти пример кода для недопонимания.
...