chore(List): getDerivedStateFromProps replace UNSAFE_componentWillReceiveProps

Author: cuilanxin

packages/core/src/List/Item.tsx

@@ -1,4 +1,4 @@
-import React, { Component } from 'react';
+import React from 'react';
 import {
   View,
   ViewProps,
@@ -23,7 +23,7 @@ export interface ListItemProps extends ViewProps, TouchableWithoutFeedbackProps
   size?: 'small' | 'default' | 'large';
 }
 
-export default class ListItem extends Component<ListItemProps> {
+export default class ListItem extends React.PureComponent<ListItemProps> {
   static defaultProps: ListItemProps = {
     underlayColor: '#DADADA',
     // paddingLeft: 16,

packages/core/src/List/index.tsx

@@ -1,4 +1,4 @@
-import React, { Component } from 'react';
+import React from 'react';
 import { FlatList, FlatListProps, Text, StyleProp, ViewStyle, View } from 'react-native';
 import Item, { ListItemProps } from './Item';
 
@@ -43,7 +43,7 @@ export interface ListState {
   data: ListProps['data'];
 }
 
-export default class List extends Component<ListProps, ListState> {
+export default class List extends React.PureComponent<ListProps, ListState> {
   static Item = Item;
   static defaultProps: ListProps = {
     data: [],
@@ -57,27 +57,25 @@ export default class List extends Component<ListProps, ListState> {
       data: [],
     };
   }
-  getData(nextProps?: ListProps) {
-    const { size, extra, paddingLeft, children } = nextProps || this.props;
-    const dataSource = React.Children.toArray(children)
-      .map((child: React.ReactNode) => {
-        if (!React.isValidElement(child)) {
-          return null;
-        }
-        const props = { size, ...child.props };
-        return React.cloneElement(<Item paddingLeft={paddingLeft} extra={extra} {...props} />);
-      })
-      .filter(Boolean);
-    this.setState({ data: dataSource as ListProps['data'] });
-  }
-  componentDidMount() {
-    if (!this.props.renderItem) {
-      this.getData();
-    }
-  }
-  UNSAFE_componentWillReceiveProps(nextProps: ListProps) {
-    if (nextProps !== this.props) {
-      this.getData(nextProps);
+  static getDerivedStateFromProps(props: ListProps) {
+    const getData = () => {
+      const { size, extra, paddingLeft, children } = props;
+      const dataSource = React.Children.toArray(children)
+        .map((child: React.ReactNode) => {
+          if (!React.isValidElement(child)) {
+            return null;
+          }
+          const props = { size, ...child.props };
+          return React.cloneElement(<Item paddingLeft={paddingLeft} extra={extra} {...props} />);
+        })
+        .filter(Boolean);
+      return dataSource;
+    };
+    if (!props.renderItem) {
+      const result = getData();
+      return {
+        data: result,
+      };
     }
   }
   renderItemChild(props: ListRenderItemInfoCustom<{}>): React.ReactElement {

packages/core/src/SelectCascader/index.tsx

@@ -1,5 +1,5 @@
 import { View, Text, StyleSheet, TouchableHighlight, StyleProp, TextStyle, ViewStyle } from 'react-native';
-import React, { Component, ReactNode } from 'react';
+import React, { Component } from 'react';
 import { Picker } from '@react-native-picker/picker';
 import arrayTreeFilter from '../utils/arrayTreeFilter';
 import Modal from '../Modal';