編寫高效能React元件-傳值篇

你猜不猜發表於2018-08-31

很多人在寫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引數用於返回其他資料

如果大家有什麼意見或者建議都可以在評論裡面提哦

vue和react元件傳值
2018-08-11
VueReact元件
如何編寫一個React元件
2018-09-10
React元件
如何編寫一個高效能的Angular元件
2018-03-04
Angular元件
react同級元件傳值,使用pubsub.js
2020-11-08
React元件JS
3.React中元件值傳遞的形象理解
2019-02-19
React元件
2020/09/24 react中函式元件父元件動態向子元件傳值
2020-09-24
React函式元件
react篇章-React 元件-向元件傳遞引數
2019-02-21
React元件
Vue 元件傳值
2019-03-22
Vue元件
構建自己的React UI元件庫(三)：文件編寫
2019-03-04
ReactUI元件
Vue--子元件互相傳值，子元件來回傳值，傳值反覆橫跳
2020-12-12
Vue元件
(翻譯)用react-spring以react hook元件的形式編寫動畫
2019-11-06
ReactSpringHook元件動畫
Vue元件、元件傳值和元件插槽
2020-10-21
Vue元件
父元件向子元件傳值
2022-08-31
元件
編寫高效能的JavaScript
2019-02-23
JavaScript
元件：非父子間傳值（同級傳值）
2018-09-22
元件
Vue 元件間傳值
2019-02-16
Vue元件
Python開發篇——基於React-Dropzone開發上傳元件
2021-08-15
PythonReact元件
Vue之元件間傳值
2020-04-05
Vue元件
react,vue編寫介面文件
2020-11-18
ReactVue
vue子元件向父元件傳遞值
2018-04-26
Vue元件
Vue子元件接收父元件傳值方式
2022-04-14
Vue元件
react元件通訊通識篇
2019-04-05
React元件
編寫高效能的Java程式碼
2019-05-14
Java
非父子元件間的傳值
2018-05-16
元件
元件中子給父傳值
2018-09-21
元件
vue元件（component）傳值問題
2020-09-28
Vue元件
[Vue]元件編寫小結
2019-06-22
Vue元件
【VUE入門】父元件給子元件傳值
2019-02-16
Vue元件
VUE 父元件動態傳值給子元件
2020-11-21
Vue元件
vue子元件向父元件傳值（實戰）
2024-09-03
Vue元件
vue子元件怎麼向父元件傳值
2021-09-11
Vue元件
如何實現子元件向父元件傳值
2021-04-20
元件
React 簽字手寫簽名元件 react-signature
2023-12-12
React元件
vue元件巢狀之 - 父元件向子元件傳值
2021-09-09
Vue元件巢狀
初識React(8)：父子元件傳參
2018-09-06
React元件
如何用React寫一個Modal元件
2019-04-08
React元件
手寫一個 React 動畫元件
2022-12-15
React動畫元件
從零到一構建並打包 React + TypeScript + Less元件庫教程（二、元件庫編譯多產物及文件編寫）
2024-11-14
ReactTypeScript元件編譯

編寫高效能React元件-傳值篇

相關文章