前言

传统的Diff算法O(N³)，React Diff基于三大前提将复杂度降为O(N)

1.tree diff，跨层dom操作比较少，结构不同直接销毁
2.component diff，相同类型节点有相同树形结构，只做更新，不同类型直接销毁
3.element diff，同层子元素根据唯一标识做区分

一.代码优化

1.key

设置唯一稳定的key

render() {
  return (
    <div>
      this.state.user.map(item => <div key={item.id}>{item.name}</div>)
    </div>  
  )
}

2.节点内容

节点类型分两大类，一类是DOM元素类型（如div,span），另一类是React组件

Dom元素比较属性和内容

<div style={{color: 'red'}} onClick={() =>this.handleClick()}>变化前</div>
...
// 变化后属性和内容都变化了
<div style={{color: 'red'}} onClick={() =>this.handleClick()}>变化后</div>

注意引用类型的比较

 {color: 'red'} === {color: 'red'}  // false
 var fun1 = () => {}
 var fun2 = () => {}
 fun1 === fun2  // false

优化后，属性指向都不变

const style = {color: 'red'}
...
constructor(props) {
  super(props)
  this.handleClick = this.handleClick.bind(this)
}
...
render() {
  return {
    <div style={style} onClick={this.handleClick}>更改后</div>
  }
}

redux版本优化前，

<TodoItem
  key={item.id}
  onRemove={() => onRemoveTodo(item.id)}
  ...

...

redux版本优化后

// 方法1
<TodoItem
  key={item.id}
  onRemove={onRemoveTodo}
  id={item.id}
  ...
>
...

const mapDispatchToProps = (dispatch,ownProps) => ({
  onRemoveTodo: ownProps.onRemoveTodo(ownProps.id)),
})

// 方法2
<TodoItem
  key={item.id}
  id={item.id}
  ...
>
...
const mapDispatchToProps = (dispatch,ownProps) => ({
  onRemoveTodo: () => dispatch(onRemoveTodo(ownProps.id)),
})

3.shouldComponentUpdate(nextProps,nextState)

为了避免浪费多余的渲染，return false可以阻止组件的更新

shouldComponentUpdate(nextProps,nextState) {
  return nextProps.isChange !== this.props.isChange   // true or false
}

PureComponent类内部也是用了shouldComponentUpdate

// PureComponent内部
if (this._compositeType === CompositeTypes.PureClass) {
  shouldUpdate = !shallowEqual(prevProps, nextProps)
  || !shallowEqual(inst.state, nextStat e);
}
return shouldUpdate;

shallowEqual(浅比较)，只做简单类型的判断。

state = {
  arr = [1,2,3,4,5]
}
shouldComponentUpdate(nextProps,nextState) {
  return nextState.arr !== this.state.nextState // false
}
handleClick = () => {
 const { arr } = this.state
  arr.push(6)
    this.setState({
      arr,
  })
}

render () {
  ...
}

解决方法deepEqual，但如果变量嵌套深会对性能有消耗

二.工具使用

1.immutable（一种不可更改的数据）

网上一般写法

import { is } from 'immutable' 
...
  shouldComponentUpdate = (nextProps = {} , nextState = {}) => {
    if(Object.keys(this.props).length !== Object.keys(nextProps).length ||
        Object.keys(this.state).length !== Object.keys(nextState).length
    ) {
      return true
    }
    for(const key in nextProps) {
      if(this.props[key] !== nextProps[key] || !is(this.props[key],nextProps[key])) {
        return true
      }
    }
    for(const key in nextState) {
      if(this.state[key] !== nextState[key] || !is(this.state[key],nextState[key])) {
        return true
      }
    }
    return false
  }
...

我项目中优化前后对比

  shouldComponentUpdate = (nextProps = {} , nextState = {}) => {
    if(!is(nextState,this.state)) {
      return true
    }
    return false
  }

优化前.png
优化后.png

使用了结构共享，避免deepCopy，可节省内存

2.reselect

一种选择器中间件，认为输入参数state相同，就没必要进行计算，直接抽取以往的值

const mapState = (state)=>({
  todos:state.todos,
  filter:state.filter,
  visibleTodos:getVisibleTodos(state.todos,state.filter)
});
//selector.js
export const todosSelector = (state) => state.todos;
export const filterSelector = (state) => state.filter;
export const visibleTodosSelector = createSelector(
  [todosSelector,filterSelector],
  (todos,filter)=>{return getVisibleTodos(todos,filter)}  //这里假设已经定义一个getVisibleTodos函数用来返回要显示哪些todo项
 );
 
//container.js
import {visibleTodosSelector}
const mapState = (state)=>({
  todos:visibleTodosSelector(state)
});

3.其他

少用{...props}
适当拆分组件
压缩，合并，commonChunksPulgin(webpack4里面移除了commonChunksPulgin插件，放在了config.optimization里面)

css预处理语言写法，防止多余编译

三.Fiber架构迁移

以往的react渲染是一气呵成，不能打断，同步渲染计算大的话容易阻塞UI线程。
react16后提出Fiber，使react从Stack reconciler转变为fiber reconciler

Fiber两个Phase.png

将渲染分割成多个事务，使得以往的栈结构可以定制优先级，暂停，复用，其中第一个阶段是可以随时被打断的阶段，这使得某部分旧的生命周期函数造成不安全的危害
componentWillMount
componentWillReceiveProps
componentWillUpdate
用其它生命周期函数再结合两个新的生命周期函数，足以替代它们的业务场景

getDerivedStateFromProps(nextProps, prevState)

  static getDerivedStateFromProps(nextProps, prevState) {
    if (nextProps.selectCodeId !== prevState.codeId) {
      return {
        codeId: nextProps.selectCodeId,
        first: false,
      };
    }
    return null;
  }

getDerivedStateFromProps没有附加渲染的情况下更新状态的唯一方法，可以用来替代componentWillReceiveProps

getSnapshotBeforeUpdate(prevProps, prevState)

export default class ScrollingList extends Component {
  constructor(props) {
    super(props)
    this.scrollRef = null
  }

  getSnapshotBeforeUpdate(prevProps, prevState) {
    if (prevProps.list.length < this.props.list.length) {
      return (
        this.scrollRef.scrollHeight - this.scrollRef.scrollTop
      );
    }
    return null;
  }

  componentDidUpdate(prevProps, prevState, snapshot) {
    if (snapshot !== null) {
      this.scrollRef.scrollTop =
        this.scrollRef.scrollHeight - snapshot;
    }
  }

  render() {
    return (
      ....
    );
  }


}

react16.png