React Redux生成的无状态组件性能

layabout 发表于 Dev

闲逛

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

因此，我有无状态组件，可以接收通用的道具，例如“ year”。我想克隆这个无状态组件超过9000次并更新它们。例如，将其prop（year）从2016更改为2015。

我在测试项目中构建了该组件，并且可以正常工作，但是响应速度很慢，尤其是在IE 11中。我是React + redux的新手，也许我的代码做错了什么。

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


    shouldComponentUpdate（nProps，nState）{
        返回nProps.year！= this.props.year;
      }

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

还作为相关问题-可以使用lodash.assign（）更新我的状态吗？我也正在使用打字稿，它似乎没有为Object.assign（）内置的polyfill；这就是为什么我决定尝试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;