reactjs - React redux 生成的无状态组件性能

Question

我正在学习 redux 和 React。我决定运行一个简单的“压力测试”，让我们说 15k 行生成的组件(我希望我做对了)。

所以我有无状态组件，它接收通用属性，例如“年”。我想将这个无状态组件克隆 9000 多次并更新它们。例如，将 prop(year) 从 2016 更改为 2015。

我在我的测试项目中构建了这个组件并且它正在运行，但响应缓慢，尤其是在 IE 11 中。我是 react+redux 的新手，也许我在我的代码中做错了什么。

按照不和谐聊天室的建议，我已将其添加到我的页面组件中:

    shouldComponentUpdate(nProps, nState) {        return nProps.year != this.props.year;      }

This did help a bit. But it is still slow.

Also as related question - Is it ok to use lodash.assign() to update my state? Also i am using typescript and it seems to have not built-in polyfill for Object.assign(); That's why i decided to try lodash.

So here is my top base component app.tsx:

import * as React from 'react';
import {bindActionCreators} from 'redux';
import {connect} from 'react-redux';
import * as pageActions from '../actions/page';

import User from '../components/user/User';
import Page from '../components/page/Page';

class App extends React.Component<any, any> {

  render() {
    const { user, page } = this.props;
    const { setYear } = this.props.pageActions;

    return (
      <div>
        <User name={user.name} />
        <Page photos={page.photos} year={page.year} setYear={setYear} />
      </div>
    );
  };
}

function mapStateToProps (state) {
  return {
    user: state.user, // (1)
    page: state.page // (2)
  };
}

function mapDispatchToProps(dispatch) {
  return {
    pageActions: bindActionCreators(pageActions, dispatch)
  };
}

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

这是我的页面缩减器:

import {assign} from 'lodash';


const INITIAL_STATE = {
  year: 2016,
  photos: []
};

function pageReducer(state = INITIAL_STATE,
                        action = {type: '', payload: null}) {
  switch (action.type) {
    case 'SET_YEAR':

    return assign({}, state, {year: action.payload});
    default:
      return state;
  }
}

export default pageReducer;

和页面组件:

import * as React from 'react';
import {range} from 'lodash';

let StatelessSpan: React.StatelessComponent<any> = (props) => (
    <span>{props.year} </span>
);

class Page extends React.Component<any, any> {

  constructor(props) {
    super(props);
  }

  private onYearBtnClick = (e) => {
    this.props.setYear(+e.target.innerText);
  };
  shouldComponentUpdate(nProps, nState) {
    return nProps.year != this.props.year;
  }

  render() {
    const {year, photos} = this.props;

    let years = range(15000).map((value, index) => {
      if(index % 4===0){
        return <StatelessSpan key={index} year={year} />;
      }
      return <span key={index}>i am empty</span>
    });

    return <div>
      <p>
        <button onClick={this.onYearBtnClick}>2016</button>
        <button onClick={this.onYearBtnClick}>2015</button>
        <button onClick={this.onYearBtnClick}>2014</button>
      </p>
      {years}
    </div>;
  };
}

export default Page;

有人告诉我 innerText 是实验性的且不稳定，所以我将其更改为 textContent。 IE 仍然有延迟。

Answer 1

React/Redux 可能是编写应用程序的最佳方式，但重要的是要了解优雅有时会以性能问题为代价。幸运的是，采用优雅的解决方案并使其性能比其他方式容易得多。

我可以向您抛出一堆关于 React 和 Redux 的性能优化技巧，但您可能优化了错误的东西。您需要分析您的应用并找出您遇到的性能问题。

您可能会发现此演讲非常有帮助:https://www.youtube.com/watch?v=5sETJs2_jwo .Netflix 已经能够从非常慢的 React 开始，并真正让事情变得超快而不会把事情弄得一团糟。