React项目性能优化

1. 使用生产版本和Fragment

1. 生产版本

确保发布的代码是生产模式下（压缩）打包的代码。

一般运行npm run build命令。

直接从webpack看配置文件，需要设置mode = 'production'。调用teaser-webpack-plugin

React Devtools可以根据地址栏右侧图标颜色判断是否是生产模式。

2. Fragment

减少不必要节点的生成。也可以使用空标签（<></>）

2. 类组件使用PureComponent

减少不必要的重复渲染！

PureComponent的原理是重新设置了shouldComponentUpdate(nextProps, nextState)方法。

在该方法中将nextProps和this.props对象浅比较，将nextState和this.state对象进行浅比较

PureComponent模拟代码实现：

import React from 'react';

function shallowCompare(obj1, obj2) {

  if(obj1 === obj2) {

    return true;

  }

  if(typeof obj1 !== 'object' || obj1 === null || typeof obj2 !== 'object' || obj2 === null) {

    return false;

  }

  const obj1Keys = Object.keys(obj1);

  const obj2Keys = Object.keys(obj2);

  if (obj1Keys.length !== obj2Keys.length) {

    return false;

  }

  for(let key of obj1Keys) {

    // 如果obj1[key]和obj2[key]为对象；浅比较有些情况会失效

    if (!obj2.hasOwnProperty(key) || obj1[key] !== obj2[key]) {

      return false;

    }

  }

  return true

}

export default class PureComponent extends React.Component {

  shouldComponentUpdate(nextProps, nextState) {

    return !(shallowCompare(nextProps, this.props) && shallowCompare(nextState, this.state))

  }

}

测试用例：

/*******父组件********/

class App extends React.Component{

  constructor(props) {

    super(props);

    this.state = {

      number: 1

    }

    this.ref = React.createRef();

  }

  add = () => {

    // this.state.number通过prop传递给Counter

    // Counter通过PureComponnet进行浅比较

    // Number(this.ref.current.value)为0时，Counter不刷新

    this.setState(state => ({

      number: state.number + Number(this.ref.current.value)

    }))

  }

  render() {

    console.log('App Render');

    return (

      <div>

        <Counter number={this.state.number} />

        <input ref={this.ref} />

        <button onClick={this.add}>+</button>

      </div>

    )

  }

}

/*********子组件***********/

import React from 'react';

import PureComponent from './pureComponent';

export default class Counter extends PureComponent {

  constructor(props) {

    super(props);

    this.state = {

      count: 1

    }

  }

  // 证明PureComponent会对this.state和nextState进行浅比较

  add = () => {

    // 不会导致render

    this.setState((state) => ({

      count: state.count + 0 // 0不会刷新，其他值会刷新

    }))

  }

  render() {

    console.log('Counter Render');

    return (

      <div>

        <div>

          Counter:{this.state.count}

        </div>

        <button onClick={this.add}>+</button>

        <div>

          {this.props.number}

        </div>

      </div>

    )

  }

};

3. 不可变数据-immutable

上面的PureComponent只是对简单数据（值为原始类型）进行浅比较；

而实际开发应用中，数据都是多层嵌套的复杂数据；只使用PureComponent可能会导致render失效。

示例（错误示例-数组）：

  state= {words: []};

  add = () => {

    // 将一个对象赋值给另一个变量；两者对应同一个地址

    let newWords = this.state.words;

    // push,pop,shift,splice方法都不会改变原址;

    newWords.push(this.ref.current.value);

    // 如果在子组件使用了PureComponent浅比较words的值,nextProps.words === this.props.words

    // 所以不会引起子组件Counter的render方法调用

    this.setState({

      words: newWords

    });

  }

上面的示例可以通过不可变数据修复BUG。

不可变数据：保持原数据不变，生成一个新的对象进行赋值

示例1：

  add = () => {

    // concat方法调用后，返回一个新数组

    this.setState(state => ({

      words: state.words.concat(this.ref.current.value)

    }))

  }

示例2:

  add = () => {

    // []符号本身就是new Array()的简写形式

    this.setState(state => ({

      words: [...state.words, this.ref.current.value]

    }))

  }

上面的示例都是复合数据是数组的情形；对于数据是对象的示例如下：

错误示例（对象）：

class App extends React.PureComponent{

  constructor(props) {

    super(props);

    this.state = {

      words: {}

    }

    this.ref = React.createRef();

  }

  add = () => {

    // Object.assign()被修改对象在第一个参数时，直接在原state.words对象地址上修改；

    // 对于PureComponent来说,nextState和this.state相同,永远不会render

    this.setState(state => ({

      words: Object.assign(state.words, {a:this.ref.current.value})

    }))

  }

  render() {

    console.log('App Render');

    return (

      <div>

        <input ref={this.ref} />

        <button onClick={this.add}>+</button>

      </div>

    )

  }

}

使用不可变数据，生成新对象的方法修改；

示例1:

  add = () => {

    // Object.assign()第一个参数是空对象，表明生成一个新的对象

    this.setState(state => ({

      words: Object.assign({}, state.words, {a:this.ref.current.value})

    }))

  }

示例2:

  add = () => {

    // {}本身是new Object的简写形式

    this.setState(state => ({

      words: {...state.words, a: this.ref.current.value}

    }))

  }

上面的方法虽然解决了使用PureComponent组件时，对象导致的不刷新问题；

但是，会出现，只要是调用setState就重新的render的情况，尽管对应的值其实是一样的。

因为对于js引擎来说，任何两个对象都不相同。而且，嵌套层次特别深时，书写也复杂。

immutable库可以解决这个！

immutable

immutable不仅可以生成新的对象；还可以对对象进行深层次的值比较。

import { Map, is } from 'immutable';

class App extends React.Component{

  constructor(props) {

    super(props);

    this.state = {

      // is方法判断的时候，深层比较只能比较从immutable对象变化而来的对象

      // 因为这里考虑words会进行深层变化，要追踪变化，需要将其变成immutable对象

      words: Map({}),

      number: 1

    }

    this.ref = React.createRef();

  }

  shouldComponentUpdate(nextProps, nextState) {

    // is方法用于比较两个immutable对象是否值相等

    return !(is(Map(nextState), Map(this.state)) && is(Map(nextProps), Map(this.props)))

  }

  add = () => {

    // set方法给immutable对象赋值；

    // 另可以通过get获取immutable对象的值

    // this.state.words.get('a')

    this.setState(state => ({

      words: state.words.set('a', this.ref.current.value)

    }))

  }

  reset = () => {

    this.setState(state => ({

      number: state.number + 1

    }))

  }

  render() {

    console.log('App Render');

    return (

      <div>

        <input ref={this.ref} />

        <button onClick={this.add}>+</button><br/>

        <button onClick={this.reset}>reset</button>

      </div>

    )

  }

}

4. 函数组件使用React.memo避免重复渲染

React.memo()本质上是将函数组件转为继承React.PureComponent的类组件的高阶组件。

稍有不同的是，只比较props的值。

代码实现如下：

function memo(WrappedComponent) {

  return class extends React.PureComponent {

    render() {

      return (

        <WrappedComponent {...this.props} />

      )

    }

  }

}

对于深层比较，还可以接受第二个参数

function MyComponent(props) {

  /* 使用 props 渲染 */

}

function areEqual(prevProps, nextProps) {

  /*

  如果把 nextProps 传入 render 方法的返回结果与

  将 prevProps 传入 render 方法的返回结果一致则返回 true，

  否则返回 false

  */

}

export default React.memo(MyComponent, areEqual);

5. React.lazy(）和Suspense进行懒加载

import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';

import React, { Suspense, lazy } from 'react';

const Home = lazy(() => import('./routes/Home'));

const About = lazy(() => import('./routes/About'));

const App = () => (

  <Router>

    <Suspense fallback={<div>Loading...</div>}>

      <Switch>

        <Route exact path="/" component={Home}/>

        <Route path="/about" component={About}/>

      </Switch>

    </Suspense>

  </Router>

);

其中：React.lazy()中import只支持默认导出的组件。

其外要包含在Suspense组件中。

6. 异常捕获边界（Error Boundaries）

捕获发生异常的React组件。将异常组件和正常组件分割开。

提高用户的体验性能。

import MyErrorBoundary from './MyErrorBoundary';

const OtherComponent = React.lazy(() => import('./OtherComponent'));

const AnotherComponent = React.lazy(() => import('./AnotherComponent'));

const MyComponent = () => (

  <div>

    <MyErrorBoundary>

      <Suspense fallback={<div>Loading...</div>}>

        <section>

          <OtherComponent />

          <AnotherComponent />

        </section>

      </Suspense>

    </MyErrorBoundary>

  </div>

);

MyErrorBoundary代码：

class MyErrorBoundary extends React.Component {

  constructor(props) {

    super(props);

    this.state = { hasError: false };

  }

  static getDerivedStateFromError(error) {

    // 更新 state 使下一次渲染能够显示降级后的 UI

    return { hasError: true };

  }

  componentDidCatch(error, errorInfo) {

    // 你同样可以将错误日志上报给服务器

    logErrorToMyService(error, errorInfo);

  }

  render() {

    if (this.state.hasError) {

      // 你可以自定义降级后的 UI 并渲染

      return <h1>Something went wrong.</h1>;

    }

    return this.props.children;

  }

}

7. 骨架屏

骨架屏插件以react-content-loader（svg图片生层）为基础。

用于在页面初始加载时，避免出现白屏现象。

代码参考

8.长列表优化

虚拟化长列表：只加载可视范围内的数据。

当网站需要加载大批量数据（成千上万）时，会加载特别慢。

这个时候我们可以使用“虚拟滚动”技术（react-window或者react-virtualized），只渲染当前屏幕范围内的数据。

鼠标滚动去触发事件，再渲染一屏。

react-window用法示例：

import { FixedSizeList as List } from 'react-window';

const Row = ({index, style}) => (

  <div style={{...style, backgroundColor: getRandomColor()}}>

    Row{index}

  </div>

)

function Container(props) {

  return (

    <List

      height={200}

      itemCount={100}

      itemSize={30}

      width={'100%'}

    >

      {Row}

    </List>

  )

}

function getRandomColor() {

  const color = Math.floor((Math.random()*0xFFFFFF)).toString(16)

  if (color.length === 6) {

    return '#' + color

  }

  return getRandomColor();

}

ReactDOM.render(<Container />, window.root)

原理是监听鼠标的滚动事件。

实现react-window的FixedSizeList的源码如下：

import React from 'react';

export class FixedSizeList extends React.Component {

  constructor(props) {

    super(props);

    this.ref = React.createRef();

    this.state = {

      start: 0

    }

  }

  componentDidMount() {

    this.ref.current.addEventListener('scroll', () => {

      // 注意： 监听函数内部有this.ref，需要使用箭头函数

      let scrollTop = this.ref.current.scrollTop;

      this.setState({

        start: Math.floor(scrollTop/this.props.itemSize)

      })

    })

  }

  render() {

    const { itemSize, itemCount, height, width, } = this.props;

    const containerStyle = {

      height, width, position: 'relative', overflow: 'auto'

    }

    let children = [];

    const itemStyle = {

      height: itemSize,

      width: '100%',

      position: 'absolute',

      top: 0,

      left: 0

    }

    const { start } = this.state;

    for(let i=start; i< start + Math.ceil(height/itemSize); i++) {

      children.push(this.props.children({index: i, style: {...itemStyle, top: i*30}}))

    }

    return (

      <div style={containerStyle} ref={this.ref}>

        <div style={{width: '100%', height: itemSize*itemCount}}>

          {children}

        </div>

      </div>

    )

  }

}

9. 根据性能优化工具修改代码

1. 使用Chrome的Performance工具

2. React Devtools的Profiler工具分析；

通过React.Profiler组件包裹需要分析渲染时间的组件（不适合生产环境）。

巴特西