Question

物品会重新渲染多次，每当新物品添加到数据道具阵列时。因此，如何避免这种无用的项目重新呈现。

我正在使用

本机0.59.0

反应16.8.3

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

renderItem 0

renderItem 1

renderItem 2

renderItem 3

//从这里再次渲染 renderItem 0

renderItem 1

renderItem 2

renderItem 3

renderItem 4

renderItem 5

renderItem 6

renderItem 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，它会进行浅表比较来确定是否需要重新渲染。您也可以通过实现shouldComponentUpdate() on React.Component来实现这一点。

已经有example in FlatList's docs演示了如何使用PureComponent呈现列表，只需向下滚动并查找“更复杂的示例”：）

如果您更喜欢使用Functional Component而不是Class Component，请结帐React.memo，这与React.PureComponent类似，但适用于Functional Components。希望对您有所帮助。

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

2 个答案: