React前端渲染优化——父组件导致子组件重复渲染

本篇文章是针对父组件导致子组件重复渲染的优化方法

一、 说明
目前我们所使用 react 版本一般会有以下四种方式触发渲染 render，而其中通过父组件 render 会直接通知子组件也进行 render。

二、一般的优化方式
鉴于此种情况，如果完全不做控制下，父组件 render, 那么子组件一定会 render。真实 dom 的渲染 react 会在 diff 算法之后合计出最小改动，进行操作。但对于结构复杂页面，自顶向下，只是单纯 diff 也要花费很长的时间来处理 js 任务。再加上我们每个组件的 render 中也会写很多业务、数据处理。
js 为单线程执行，显然，不必要的子组件的 render 会浪费 js 线程资源，复杂任务还会长时间占用线程导致假死状态，也就是页面卡顿，react 底层有 Fiber 来优化任务队列，但无法优化业务代码上的问题。
一般子组件可以通过确认 props 是否发生变化来控制自身是否进行 render，比如 react-mobx 中的 observer 高阶方法或者 React.PureComponet 就是用来做浅层比较进行控制处理。

三、项目中常见会导致重复渲染的写法以及改进方法

函数导致的渲染重复

箭头函数 props.fn = () => {} 或者 绑定方法 props.fn = this.xxx.bind(this)

这样的写法每次父组件 render 都会新声明一个 function 传递给子组件，会导致 observer 失去比对作用，父组件每次 render 都会使这个组件 render，严重影响性能!

import React from 'react';
import { observer } from 'mobx-react';
// 我们开发中常见的一个被观测组件，例如 ObserverComponent
@observer
class ObserverComponent extends React.Component {
    render() {
        return (<div>ObserverComponent</div>)
    }
}
// 例如在父组件 Parent 使用被观测的子组件 ObserverComponent
// 请不要给子组件 ObserverComponent 的 props 设置 箭头函数 () => {} 或者 fn.bind(this) 方法
@observer
class Parent extends React.Component {
    constructor(props) {
        super(props);
        this.handleChange = this.handleChange.bind(this); // 【正确】
    }
    handleChange() {}
    doSomething = () => {}
    render() {
        return (
            <ObserverComponent
                onChange={() => {}}                      // 【错误】
                onChange={this.handleChange.bind(this)}  // 【错误】
                onChange={this.handleChange}             // 【正确】
                todo={this.doSomething}                  // 【正确】
            />
        )
    }
}

字面量写法导致的渲染重复

由于字面量的写法{} 和 { pageSizeOptions: ['10'] }，每次都会字面量声明一个新的对象传递给列表组件，导致页面重新 render。

toJS() 方法每次也会返回新对象，会导致页面重新渲染