编写高性能React组件-传值篇

很多人在写React组件的时候没有太在意React组件的性能，使得React做了很多不必要的render，现在我就说说该怎么来编写搞性能的React组件。

首先我们来看一下下面两个组件

import React, {PureComponent,Component} from "react"
import PropTypes from "prop-types"
class A extends Component {
    constructor(props){
        super(props);
    }
    componentDidUpdate() {
        console.log("componentDidUpdate")
    }
    render (){
        return (
            <div />
        )
    }
}
class Test extends Component {
    constructor(props) {
        super(props);
        this.state={
            value:0
        };
    }
    static propTypes = {};
    static defaultProps = {};
    componentDidMount() {
        setTimeout(()=>{
            this.setState({value:this.state.value+1})
        },100);
    }
    render() {
        return (
            <A />
        )
    }
}

运行结果：

Test state change.
A componentDidUpdate

我们发现上面代码中只要执行了Test组件的中的setState，无论Test组件里面包含的子组件A是否需要这个state里面的值，A componentDidUpdate始终会输出

试想下如果子组件下面还有很多子组件，组件又嵌套子组件，子子孙孙无穷尽也，这是不是个很可怕的性能消耗？

当然，针对这样的一个问题最初的解决方案是通过shouldComponentUpdate方法做判断更新，我们来改写下组件A

class A extends Component {
    constructor(props){
        super(props);
    }
    static propTypes = {
        value:PropTypes.number
    };
    static defaultProps = {
        value:0
    };
    shouldComponentUpdate(nextProps, nextState) {
        return nextProps.value !== this.props.value;
    }
    componentDidUpdate() {
        console.log("A componentDidUpdate");
    }
    render (){
        return (
            <div />
        )
    }
}

这里增加了shouldComponentUpdate方法来对传入的value属性进行对面，虽然这里没有传，但是不影响，运行结果：

Test state change.

好了，这次结果就是我们所需要的了，但是如果每一个组件都这样做一次判断是否太过于麻烦？

那么React 15.3.1版本中增加了 PureComponent ，我们来改写一下A组件

class A extends PureComponent {
    constructor(props){
        super(props);
    }
    static propTypes = {
        value:PropTypes.number
    };
    static defaultProps = {
        value:0
    };
    componentDidUpdate() {
        console.log("A componentDidUpdate");
    }
    render (){
        return (
            <div />
        )
    }
}

这次我们去掉了shouldComponentUpdate，继承基类我们改成了PureComponent，输出结果：

Test state change.

很好，达到了我们想要的效果，而且代码量也减小了，但是真的可以做到完全的防止组件无谓的render吗？让我们来看看PureComponent的实现原理

最重要的代码在下面的文件里面，当然这个是React 16.2.0版本的引用

/node_modules/fbjs/libs/shallowEqual

大致的比较步骤是：

1.比较两个Obj对象是否完全相等用===判断

2.判断两个Obj的键数量是否一致

3.判断具体的每个值是否一致

不过你们发现没有，他只是比对了第一层次的结构，如果对于再多层级的结构的话就会有很大的问题

来让我们修改源代码再来尝试：

class A extends PureComponent {
    constructor(props){
        super(props);
    }
    static propTypes = {
        value:PropTypes.number,
        obj:PropTypes.object
    };
    static defaultProps = {
        value:0,
        obj:{}
    };
    componentDidUpdate() {
        console.log("A componentDidUpdate");
    }
    render (){
        return (
            <div />
        )
    }
}

class Test extends Component {
    constructor(props) {
        super(props);
        this.state={
            value:0,
            obj:{a:{b:123}}
        };
    }
    static propTypes = {};
    static defaultProps = {};
    componentDidMount() {
        setTimeout(()=>{
            console.log("Test state change.");
            let {obj,value} = this.state;
            //这里修改了里面a.b的值　　
            obj.a.b=456;
            this.setState({
                value:value+1,
                obj:obj
            })
        },100);
    }
    render() {
        let {
            state
        } = this;
        let {
            value,
            obj
        } = state;
        return (
            <A obj={obj} />
        )
    }
}

输出结果：

Test state change.

这里不可思议吧！这也是很多人对引用类型理解理解不深入所造成的，对于引用类型来说可能出现引用变了但是值没有变，值变了但是引用没有变，当然这里就暂时不去讨论js的数据可变性问题，要不然又是一大堆，大家可自行百度这些

那么怎么样做才能真正的处理这样的问题呢？我先增加一个基类：

import React ,{Component} from 'react';
import {is} from 'immutable';
class BaseComponent extends Component {
    constructor(props, context, updater) {
        super(props, context, updater);
    }
    shouldComponentUpdate(nextProps, nextState) {
        const thisProps = this.props || {};
        const thisState = this.state || {};
        nextState = nextState || {};
        nextProps = nextProps || {};
        if (Object.keys(thisProps).length !== Object.keys(nextProps).length ||
            Object.keys(thisState).length !== Object.keys(nextState).length) {
            return true;
        }
        for (const key in nextProps) {
            if (!is(thisProps[key], nextProps[key])) {
                return true;
            }
        }
        for (const key in nextState) {
            if (!is(thisState[key], nextState[key])) {
                return true;
            }
        }
        return false;
    }
}
export default BaseComponent

大家可能看到了一个新的东西Immutable，不了解的可以自行百度或者 Immutable 常用API简介， Immutable 详解

我们来改写之前的代码：

import React, {PureComponent,Component} from "react"
import PropTypes from "prop-types"
import Immutable from "immutable"
import BaseComponent from "./BaseComponent"
class A extends BaseComponent {
    constructor(props){
        super(props);
    }
    static propTypes = {
        value:PropTypes.number,
        obj:PropTypes.object
    };
    static defaultProps = {
        value:0,
        obj:{}
    };
    componentDidUpdate() {
        console.log("A componentDidUpdate");
    }
    render (){
        return (
            <div />
        )
    }
}
class Test extends Component {
    constructor(props) {
        super(props);
        this.state={
            value:0,
            obj:Immutable.fromJS({a:{b:123}})
        };
    }
    static propTypes = {};
    static defaultProps = {};
    componentDidMount() {
        setTimeout(()=>{
            console.log("Test state change.");
            let {obj,value} = this.state;
            //注意,写法不一样了
            obj = obj.setIn(["a","b"],456);
            this.setState({
                value:value+1,
                obj:obj
            })
        },100);
    }
    render() {
        let {
            state
        } = this;
        let {
            value,
            obj
        } = state;
        return (
            <A obj={obj} />
        )
    }
}

执行结果：

Test state change.
A componentDidUpdate

这样也达到了我们想要的效果

当然，还有一种比较粗暴的办法就是直接把obj换成一个新的对象也同样可以达到跟新的效果，但是可控性不大，而且操作不当的话也会导致过多的render，所以还是推荐使用immutable对结构层级比较深的props进行管理

上面的一大堆主要是讲述了对基本类型以及Object(Array 其实也是Object，这里就不单独写示例了)类型传值的优化，下面我们来讲述关于function的传值

function其实也是Object，但是纯的function比较特么，他没有键值对，无法通过上面提供的方法去比对两个function是否一致，只有通过引用去比较，所以改不改引用成为了关键

改了下代码：

import React, {PureComponent,Component} from "react"
import PropTypes from "prop-types"
import Immutable from "immutable"
import BaseComponent from "./BaseComponent"
class A extends BaseComponent {
    constructor(props){
        super(props);
    }
    static propTypes = {
        value:PropTypes.number,
        obj:PropTypes.object,
        onClick:PropTypes.func
    };
    static defaultProps = {
        value:0,
        obj:{}
    };
    componentDidUpdate() {
        console.log("A componentDidUpdate");
    }
    render (){
        let {
            onClick
        } = this.props;
        return (
            <div onClick={onClick} >
                你来点击试试！！！
            </div>
        )
    }
}
class Test extends Component {
    constructor(props) {
        super(props);
        this.state={
            value:0,
        };
    }
    static propTypes = {};
    static defaultProps = {};
    componentDidMount() {
        setTimeout(()=>{
            console.log("Test state change.");
            let {value} = this.state;
            this.setState({
                value:value+1,
            })
        },100);
    }
    onClick(){
        alert("你点击了一下！")
    }
    render() {
        let {
            state
        } = this;
        let {
            value,
            obj
        } = state;
        return (
            <A
                onClick={()=>this.onClick()}
            />
        )
    }
}

运行结果：

Test state change.
A componentDidUpdate

我们setState以后控件A也跟着更新了，而且还用了我们上面所用到的BaseComponent，难道是BaseComponent有问题？其实并不是，看Test组件里面A的onClick的赋值，这是一个匿名函数，这就意味着其实每次传入的值都是一个新的引用，必然会导致A的更新，我们这样干：

class Test extends Component {
    constructor(props) {
        super(props);
        this.state={
            value:0,
        };
    }
    static propTypes = {};
    static defaultProps = {};
    componentDidMount() {
        setTimeout(()=>{
            console.log("Test state change.");
            let {value} = this.state;
            this.setState({
                value:value+1,
            })
        },100);
    }
    onClick=()=>{
        alert("你点击了一下！")
    };
    render() {
        let {
            state
        } = this;
        let {
            value
        } = state;
        return (
            <A
                onClick={this.onClick}
            />
        )
    }
}

输出结果：

Test state change.

嗯，达到我们想要的效果了，完美！

不过我还是发现有个问题，如果我在事件或者回调中需要传值就痛苦了，所以在写每个组件的时候，如果有事件调用或者回调的话最好定义一个接收任何类型的属性，最终的代码类似下面这样

import React, {PureComponent, Component} from "react"
import PropTypes from "prop-types"
import Immutable from "immutable"
import BaseComponent from "./BaseComponent"
class A extends BaseComponent {
    constructor(props) {
        super(props);
    }
    static propTypes = {
        value: PropTypes.number,
        obj: PropTypes.object,
        onClick: PropTypes.func,
        //增加data传值，接收任何类型的参数
        data: PropTypes.any
    };
    static defaultProps = {
        value: 0,
        obj: {},
        data: ""
    };
    componentDidUpdate() {
        console.log("A componentDidUpdate");
    }
    //这里也进行了一些修改
    onClick = () => {
        let {
            onClick,
            data
        } = this.props;
        onClick && onClick(data);
    };
    render() {
        return (
            <div onClick={this.onClick}>
                你来点击试试！！！
            </div>
        )
    }
}
class Test extends Component {
    constructor(props) {
        super(props);
        this.state = {
            value: 0,
        };
    }
    static propTypes = {};
    static defaultProps = {};
    componentDidMount() {
        setTimeout(() => {
            console.log("Test state change.");
            let {value} = this.state;
            this.setState({
                value: value + 1,
            })
        }, 100);
    }
    onClick = () => {
        alert("你点击了一下！")
    };
    render() {
        let {
            state
        } = this;
        let {
            value
        } = state;
        return (
            <A
                onClick={this.onClick}
                data={{message: "任何我想传的东西"}}
            />
        )
    }
}

总结一下：

1.编写React组件的时候使用自定义组件基类作为其他组件的继承类

2.使用Immutable管理复杂的引用类型状态

3.传入function类型的时候要传带引用的，并且注意预留data参数用于返回其他数据

最后编辑于：2018.09.20 09:47:24

人面猴
序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
沈念sama阅读 206,482评论 6赞 481
死咒
序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
沈念sama阅读 88,377评论 2赞 382
救了他两次的神仙让他今天三更去死
文/潘晓璐我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
开封第一讲书人阅读 152,762评论 0赞 342
道士缉凶录：失踪的卖姜人
文/不坏的土叔我叫张陵，是天一观的道长。经常有香客问我，道长，这世上最难降的妖魔是什么？我笑而不...
开封第一讲书人阅读 55,273评论 1赞 279
港岛之恋（遗憾婚礼）
正文为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
茶点故事阅读 64,289评论 5赞 373
恶毒庶女顶嫁案：这布局不是一般人想出来的
文/花漫我一把揭开白布。她就那样静静地躺着，像睡着了一般。火红的嫁衣衬着肌肤如雪。梳的纹丝不乱的头发上，一...
开封第一讲书人阅读 49,046评论 1赞 285
城市分裂传说
那天，我揣着相机与录音，去河边找鬼。笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。我是一名探鬼主播，决...
沈念sama阅读 38,351评论 3赞 400
双鸳鸯连环套：你想象不到人心有多黑
文/苍兰香墨我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
开封第一讲书人阅读 36,988评论 0赞 259
万荣杀人案实录
序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
沈念sama阅读 43,476评论 1赞 300
护林员之死
正文独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋以下内容为张勋视角年9月15日...
茶点故事阅读 35,948评论 2赞 324
白月光启示录
正文我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
茶点故事阅读 38,064评论 1赞 333
活死人
序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
沈念sama阅读 33,712评论 4赞 323
日本核电站爆炸内幕
正文年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
茶点故事阅读 39,261评论 3赞 307
男人毒药：我在死后第九天来索命
文/蒙蒙一、第九天我趴在偏房一处隐蔽的房顶上张望。院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
开封第一讲书人阅读 30,264评论 0赞 19
一桩弑父案，背后竟有这般阴谋
文/苍兰香墨我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。一阵脚步声响...
开封第一讲书人阅读 31,486评论 1赞 262
情欲美人皮
我被黑心中介骗来泰国打工，没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。一个月前我还...
沈念sama阅读 45,511评论 2赞 354
代替公主和亲
正文我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
茶点故事阅读 42,802评论 2赞 345

编写高性能React组件-传值篇

推荐阅读更多精彩内容