阅读 1516

React性能优化之Context

先来说说Context的作用

react之类的mvvm框架有个痛点想必大家都遇到过,那就是祖孙组件之间的通信

现在组件之间的通信规范是:

  • 父 -> 子:属性绑定props
  • 子 -> 父:事件广播(vue之类的emit)react那还是调用父类的props[fn]

仅仅是父子两个组件之间这没有问题
可是祖孙组件之间呢?

react中有个虫洞的概念,相当于直通车,组件【祖先】=> 组件【孙子】,而不需要中间的组件来代理props

下面就先介绍下高端的虫洞(直通车)

直接show code

三个组件App.js,Son.js,GrandSon.js,下面介绍的是用虫洞从App props直通GrandSon,而不需要Son来做代理属性

// App.js的代码

import React from 'react';
import Son from './son';
import PropTypes from 'prop-types';

class App extends React.Component{
    constructor(){
		super();
		
        this.state = {
            grandSonDesc: 'i am grandSonDesc'
        };
    }

    getChildContext(){
        return {
            grandSonDesc: this.state.grandSonDesc
        }
    }
    
    render(){
        return <Son />
    }
}

App.childContextTypes = {
    grandSonDesc: PropTypes.string
}

export default App;
复制代码
// Son.js

import React from 'react';
import GrandSon from './grandSon';

const Son = () => {
    return <GrandSon />
}

export default Son;
复制代码
// GrandSon.js

import React from 'react';
import PropTypes from 'prop-types';

class GrandSon extends React.Component{
    render(){
        return <div>{this.context.grandSonDesc}</div>
    }
}

GrandSon.contextTypes = {
    grandSonDesc: PropTypes.string
};

export default GrandSon;
复制代码

至此就实现了虫洞了,可是需要注意两点:

  • GrrandSon不能为纯函数组件,这样是不能注入的
  • App组件和GrandSon组件需要定义类属性contextTypes,App组件需要定义getChildContext

那么问题来了,为啥要声明contextTypes? 原因是,GrandSon组件除了App这个爷爷组件外,还有Son这个爸爸组件。那么grandSonDesc是从哪个组件继承而来呢,contextTypes就是做这个标识作用,而且多个父组件的context会做merge,也是根据定义contextTypes来的

好的,到这里感觉很爽,虫洞直通车传输props,但是我要说的是,这个实现在react17将被废弃!!!

为何老版本虫洞将被废弃?

如果一个属性将被废弃,多半是跟它的性能有关了,可以试想下,虫洞传输props,其实son组件没有任何更新,那么当grandSonDesc变化时,Son组件会不会被更新?直接show code吧

// App.js

import React from 'react';
import Son from './son';
import PropTypes from 'prop-types';

class App extends React.Component{
    constructor(){
		super();
		
        this.state = {
            grandSonDesc: 'i am grandSonDesc'
        };
	}
	
	componentDidMount(){
		setTimeout(() => {
			this.setState({
				grandSonDesc: 'i am grandSonDesc啊啊啊啊啊啊啊啊'
			});
		}, 3000);
	}

    getChildContext(){
        return {
            grandSonDesc: this.state.grandSonDesc
        }
    }
    
    render(){
        return <Son />
    }
}

App.childContextTypes = {
    grandSonDesc: PropTypes.string
}

export default App;
复制代码
// Son.js

import React from 'react';
import GrandSon from './grandSon';

class Son extends React.Component{
    componentDidUpdate(){
        console.log('son updated!');
    }

    render(){
        return <GrandSon />
    }
}

export default Son;
复制代码
// GrandSon.js

import React from 'react';
import PropTypes from 'prop-types';

class GrandSon extends React.Component{
    componentDidUpdate(){
        console.log('grandson updated!');
    }

    render(){
        return <div>{this.context.grandSonDesc}</div>
    }
}

GrandSon.contextTypes = {
    grandSonDesc: PropTypes.string
};

export default GrandSon;
复制代码

在版本的代码中,App.js在三秒钟之后去更新grandSonDesc,然后在Son和GrandSon组件中加上componentDidUpdate更新之后的log,来看一下控制台输出

三秒之后GrandSon的显示变成了i am grandSonDesc啊啊啊啊啊啊啊啊,而控制台输出son updated

这说明Son组件也被更新了,那么虫洞如果中间层组件比较多的话,岂不是很浪费性能吗?

二代虫洞

那么既然性能不好,世界顶级前端团队就要开始优化了,那么就有了二代虫洞,直接上代码介绍下二代虫洞吧,还是原来的配方App+Son+GrandSon,唯一多的是一个context的配置文件

// App.js

import React from 'react';
import Son from './son';
import Context from './context';
import PropTypes from 'prop-types';

class App extends React.Component {
    constructor(){
        super();

        this.state = {
            grandSonDesc: 'i am grandSon'
        };
    }

	render(){
		return (
			<div className="App">
				<Context.Provider value={this.state}>
					<Son />
				</Context.Provider>
			</div>
		);
	}
}

App.contextType = Context;

export default App;
复制代码
// Son.js

import React, { PureComponent } from 'react';
import GrandSon from './grandSon';
import PropTypes from 'prop-types';

class Son extends PureComponent{
    render(){
        return <GrandSon />
    }
}

export default Son;
复制代码
// GrandSon.js

import React, { PureComponent } from 'react';
import Context from './context';

class GrandSon extends PureComponent{
    render(){
        return <div>
            <Context.Consumer>
                {value => value.grandSonDesc}
            </Context.Consumer>
        </div>
    }
}

export default GrandSon
复制代码
// context.js

import { createContext } from 'react';

let Context = createContext();

export default Context;
复制代码

代码敲完了,可以start看看效果了,可以发现照样跑起来了

那么问题来了,你说一代虫洞性能差,凭什么嘛?

// App.js

import React from 'react';
import Son from './son';
import Context from './context';
import PropTypes from 'prop-types';

class App extends React.Component {
    constructor(){
        super();

        this.state = {
            grandSonDesc: 'i am grandSon'
        };
    }

    componentDidMount(){
        setTimeout(() => {
            this.setState({
                grandSonDesc: 'i am grandSon啊啊啊啊啊啊啊啊啊啊'
            });
        }, 3000);
    }

	render(){
		return (
			<div className="App">
				<Context.Provider value={{grandSonDesc: this.state.grandSonDesc}}>
					<Son />
				</Context.Provider>
			</div>
		);
	}
}

App.contextType = Context;

export default App;

复制代码
// Son.js

import React, { PureComponent } from 'react';
import GrandSon from './grandSon';
import PropTypes from 'prop-types';

class Son extends PureComponent{
    componentDidUpdate(){
        console.log('son updated');
    }

    render(){
        return <GrandSon />
    }
}

export default Son;
复制代码
// GrandSon.js

import React, { PureComponent } from 'react';
import Context from './context';

class GrandSon extends PureComponent{
    componentDidUpdate(){
        console.log('grandson updated');
    }

    render(){
        return <div>
            <Context.Consumer>
                {value => value.grandSonDesc}
            </Context.Consumer>
        </div>
    }
}

export default GrandSon
复制代码

可以发现,3秒之后grandSonDesc变了,两个子组件的componentDidUpdated都没进

这就是两种虫洞的实现方式,到这里差不多讲完了,关于更多新版context的用法可以参考官网 reactjs.org/docs/contex…

文章分类
前端
文章标签