Question

我正在学习redux并做出反应。我决定运行一个简单的“压力测试”，让我们说15k行生成的组件（我希望我做对了）。

所以我有无状态组件接收共同道具，例如'year'。我想克隆这个无状态组件超过9000次并更新它们。例如，将其从2016年改为道具（年）到2015年。

我在我的测试项目中构建了这个组件并且它正在工作，但响应速度很慢，特别是在IE 11中。我很反应+ redux，也许我在代码中做错了。

正如不和谐聊天室所建议的那样，我已添加到我的页面组件中：


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

这确实有点帮助。但它仍然很慢。

另外作为相关问题 - 使用lodash.assign（）来更新我的状态是否可以？我也使用打字稿，似乎没有内置的polyfill for Object.assign（）;这就是为什么我决定尝试lodash。

所以这是我的顶级基础组件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;

和Page组件：

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开始，并且真正让事情变得非常快，而不会弄得一团糟。

Answer 2

我在这里发现了这个讨论：https://twitter.com/mweststrate/status/720177443521343488

因此，这部分回答了我关于绩效的问题，并就这两个图书馆如何与我的案例表现出良好的视野。

React redux生成无状态组件性能

2 个答案: