React/Redux呈现每秒更新的列表

Question

我有一个react组件,每秒从redux商店接收道具.新状态的数组与最后一个数组不同.具体而言,每秒都会将一个元素添加到数组中.例如:在一个状态中,数组是:

[1,2,3,4,5,6]

下一个州

[1,2,3,4,5,6,7]

我的减速机:

return {
  ...state,
  myList: [ payload, ...state.myList.filter(item => payload.id !== item.id).slice(0, -1) ]
}

现在,在我的react组件中,我订阅了这个状态,每次更改时,都会重新呈现列表.

import React, { Component } from 'react';
import MyRow from './MyRow';

class MyList extends Component {

    render() {

        return (

        <div>

            {this.props.myList.map((list, index) => (
                <MyRow key={list.id} data={list}/>
            ))}

        </div>

        );
    }
}

function select({ myList }) {
    return { myList };
}

export default connect(select)(MyList);

在MyRow.js

import { PureComponent } from 'react';

class MyRow extends PureComponent {

    render() {

    const data = this.props.data;

        return (
            <div>
                {data.id} - {data.name}
            </div>
        );

    }
}
export default MyRow;

现在,我的问题是:重新渲染已经渲染的每个元素对我来说代价很高.MyRow大量使用样式组件和其他昂贵的操作.这导致在状态更新时每秒重新呈现整个列表的反应.如果更新在不到1秒内完成,则会变得更糟,例如每秒4次更新.在这种情况下,反应应用程序只会崩溃.

有没有办法只将新添加的项添加到列表中而不重新呈现整个列表？

谢谢

Answer 1

您使用PureComponent,那些浅层比较,那么你的组件MyRow应该不会对添加的每个新项目来重新描绘(请按照下面我的代码示例).

有没有办法只将新添加的项添加到列表中而不重新呈现整个列表？

根据你的问题 - 是的,使用时PureComponent应该只渲染一次新项目:

以下是React的文档所说的内容:

如果React组件的render()函数在给定相同的props和state的情况下呈现相同的结果,则在某些情况下可以使用React.PureComponent来提高性能.

代码示例PureComponent:

你可以查看我为你做的代码示例.

您将看到Item组件始终只呈现一次,因为我们使用React.PureComponent.为了证明我的陈述,每次Item渲染时,我都添加了渲染的当前时间.从示例中您将看到Item Rendered at:时间总是相同的,因为它只渲染了一次.

const itemsReducer = (state = [], action) => {
  if (action.type === 'ADD_ITEM') return [ ...state, action.payload]

  return state
}

const addItem = item => ({
  type: 'ADD_ITEM',
  payload: item
})

class Item extends React.PureComponent {
  render () {
    // As you can see here, the `Item` is always rendered only 1 time,
    // because we use `React.PureComponent`.
    // You can check that the `Item` `Rendered at:` time is always the same.
    // If we do it with `React.Component`,
    // then the `Item` will be rerendered on each List update.
    return <div>{ this.props.name }, Rendered at: { Date.now() }</div>
  }
}

class List extends React.Component {
  constructor (props) {
    super(props)
    this.state = { intervalId: null }
    this.addItem = this.addItem.bind(this)
  }

  componentDidMount () {
    // Add new item on each 1 second,
    // and keep its `id`, in order to clear the interval later
    const intervalId = setInterval(this.addItem, 1000)
    this.setState({ intervalId })
  }

  componentWillUnmount () {
    // Use intervalId from the state to clear the interval
    clearInterval(this.state.intervalId)
  }

  addItem () {
    const id = Date.now()
    this.props.addItem({ id, name: `Item - ${id}` })
  }

  renderItems () {
    return this.props.items.map(item => <Item key={item.id} {...item} />)
  }

  render () {
    return <div>{this.renderItems()}</div>
  }
}

const mapDispatchToProps = { addItem }
const mapStateToProps = state => ({ items: state })
const ListContainer = ReactRedux.connect(mapStateToProps, mapDispatchToProps)(List)

const Store = Redux.createStore(itemsReducer)
const Provider = ReactRedux.Provider

ReactDOM.render(
  <Provider store={Store}>
    <ListContainer />
  </Provider>,
  document.getElementById('container')
)

<script src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/redux/4.0.0/redux.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-redux/5.0.7/react-redux.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-polyfill/6.26.0/polyfill.min.js"></script>

<div id="container">
    <!-- This element's contents will be replaced with your component. -->
</div>

解决方案:

1. 如果性能问题是由MyRow重新发布引起的,请查看重新发布的原因是什么,因为它不应该因为PureComponent使用而发生.
   • 您可以尝试简化您的reducer,以便检查/调试,是导致问题的reducer.例如,只需将新项添加到列表中(不进行任何其他操作,如过滤,切片等):myList: [ ...state.myList, payload ]
   • 请确保始终将相同的内容传递key给商品组件<MyRow key={list.id} data={list} />.如果更改了道具key或data道具,则会重新渲染该组件.

2. 以下是一些其他库,这些库代表了列表的高效渲染.我相信他们会给我们一些选择或见解:

   • react-virtualized - 用于有效渲染大型列表和表格数据的React组件
   • react-infinite - 基于UITableView的基于浏览器的高效滚动容器

Answer 2

看起来您每次都在减速器中创建一个新数组，其中所有数组索引都需要重新计算。您是否尝试过将新节点附加到列表的末尾而不是放在前面？