每次渲染相同的数据行太多

Question

每当将新项目添加到数据道具数组时，项目都会重新渲染多次。那么我怎样才能避免这种无用的项目重新渲染。

我正在使用

反应本机 0.59.0

响应 16.8.3

这是我登录时得到的，它的渲染方法中的项目

渲染项目 0

渲染项目 1

渲染项目 2

渲染项目 3

// 从这里再次渲染渲染项目 0

渲染项目 1

渲染项目 2

渲染项目 3

渲染项目 4

渲染项目 5

渲染项目 6

渲染项目 7


//gettingData and displaying component

let offset = this.props.fetchedData.length;

//function to fetch data from server
getData() {
  fetch(url, {
      method: 'POST',
      headers: {
        Accept: 'application/json',
        'Content-Type': 'application/json',
        Authorization: `Bearer ${token}`,
      },
      body: JSON.stringify({
        limit: 20,
        offset,
      }),
    })
      .then(response => (response.json())
        .then((responseJson) => {
          if (responseJson.status) {
               this.props.fetchedDataChange(responseJson.data);
            }
        })
        .catch((error) => {
          alert(error);
        }));
}

//renderItem function for flatlist
renderItem({ item }) {
  return (
     <View>
       <Text>
          {item.name}
       </Text>
     </View>
  );
}

render() {
   return (
   <View>
      <FlatList
         data={this.props.fetchedData}
         renderItem={{ item } => this.renderItem({ item })}
         keyExtractor={(item, index) => index.toString()}
         extraData={this.props}
         initialNumToRender={20}
         maxToRenderPerBatch={20}
         onEndReached={() => this.getData()}
         onEndReachedThreshold={0.5}
      />
   </View>
);
}

const mapStateToDispatchProps = dispatch => ({
 fetchedDataChange: value => dispatch(fetchedDataChange(value)
});

const mapStateToProps = state => ({
  fetchedData: state.fetchedDataReducer.fetchedData
});

export default connect(mapStateToProps, mapDispatchToProps)(gettingData);



//fetchedData reducer component

const INITIAL_STATE = {
   fetchedData: [],
};

export default (state = INITIAL_STATE, action) => {
  switch (action.type) {
    case FETCHED_DATA_CHANGED:
      return {
           ...state,
           fetchedData: [...state.fetchedData, ...action.payload]
      };

    default:
      return state;
  }
};

Answer 1

如果每次状态更改时您的数据道具都从状态变量中更新，则会发生重新渲染。

Answer 2

我相信您可能正在寻找 React.PureComponent which implements a shallow comparison to decide if rerender is needed. You can also achieve this by implementing shouldComponentUpdate() on React.Component。

已经有一个 example in FlatList's docs 演示了如何使用 PureComponent 来呈现您的列表，只需向下滚动一点并查找 "more complex example" :)

如果您更喜欢使用 Functional Component 而不是 Class Component，请查看 React.memo，它与 React.PureComponent 类似，但用于 Functional Components。希望对你有帮助。

每次渲染相同的数据行太多

render same dataRow too much every time

react-native

react-native-flatlist