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

我正在学习 redux 和 react。我决定运行一个简单的"压力测试"，假设有 15k 行生成的组件（我希望我做对了）。

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

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

正如我在 Discord 聊天室中建议的那样，我已添加到我的页面组件中：

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

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

同样作为相关问题 - 可以使用 lodash.assign（）更新我的状态吗？我也在使用打字稿，它似乎没有内置的 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;

和页面组件：

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中仍然有延迟。

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

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

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

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

因此，这部分回答了我关于性能的问题，并很好地了解了这两个库在我的案例中的表现。

相关内容

最新更新

热门标签：