React 通过context(上下文)实现多组件嵌套传值的实现

在React当中,父组件通过props给子组件传递属性的,但是当组件的嵌套层次非常多的时候,使用props传参就不是很方便了,此时可以用context来实现。类似于Vue里的provide/inject这一对选项组,实现的效果是一样的。

React里的context只能由class组件来提供,然后class组件内的子组件就可以获取了,React里的conetxt有两种使用方法:

  • childContextType  ;经典的用法,相比较第二种方法性能不是很好
  • createContext    ;React16提供的一个新的API,通过组件来实现的,效率比较高,推荐使用这个

方法一 childContextType使用方法

在父组件中,我们要提供一个getChildContext方法,用于指定子节点能获取到的所有数据对象,还要在class对象上设置一个childContextTypes属性,用于指定数据的类型,例如:

class Parent extends React.Component{
    getChildContext(){                                        //定义一个getChildContext成员函数,返回Parent组件提供的数据
        return {height:180}                                
    }
    render(){
        return <div>子节点jsx</div>
    }
}

Parent.childContextTypes = {                     //设置childContextTypes属性,用于指定getChildlContext里返回的每个键的类型
    height:PropTypes.number
}

 writer by:大沙漠 QQ:22969969

在组件中,我们在class对象里设置一个contextTypes属性即可,用于指定需要从父节点获取的context,可以通过this.context获取到所有能获取到的context对象,例如:

class Child extends React.Component{
    render(){
        return <div>{this.context.height}</div>
    }
}
Child.contextTypes={                                 //设置contextTypes属性,这里是子组件希望从父层组件提供的context中某几个属性
    height:PropTypes.number
}

使用这种方法时,需要加载一个prop-types.js文件,和声明时的类型有关,script标签可以直接用这个:https://cdnjs.cloudflare.com/ajax/libs/prop-types/15.6.0/prop-types.min.js,。

举个例子:

<div id="root"></div>    
<script type="text/babel">
    class Parent extends React.Component{
        state = {height:180}
        getChildContext(){                                //这里提供给子组件中可以获取的对象
            return {height:this.state.height}
        }                
        render(){
            return (
                <div>
                    <button  onClick={e=>this.setState({height:this.state.height+1})}>测试</button>
                    <Child></Child>
                </div>
            )
        }
    }
    Parent.childContextTypes = {        
        height:PropTypes.number
    }
    
    class Child extends React.Component{
        render(){
            return <p>{this.context.height}</p>
        }
    }
    Child.contextTypes = {                
        height:PropTypes.number
    }

    ReactDOM.render(<Parent></Parent>,root)
</script>

我们在Parent组件上定义了一个button按钮,点击时会使当前的state.height+1,然后又引用了Child子组件,通过childContextType进行了值的传递,渲染如下:

方法二 createContext方法

 这种方法是通过React16新增的一个API叫做React.createContext()来实现的,我们调用React.createContext时可以传入一个参数,参数就是默认值,返回一个对象,含有一个Provider组件和一个Consumer组件,在需要使用context(上下文)的地方直接使用即可。

React.createContext()返回一个包含Provider和Consumer组件引用的对象,我们在需要提供数据的class组件内使用Provider组件(例如上面的Parent组件),在需要获取数据的子组件内(例如上面的Child组件),直接使用context组件即可,Provider和Consumer组件的用法如下:

  1. Provider组件     ;给该组件传递一个value属性,用于指定当前提供的数据,数据可以是任意值,数字、字符串、对象都可以
  2. Consumer组件   ;我们在显示数据的地方直接使用即可,该组件的子节点是一个函数模板,React内部会直接执行该函数,参数就是传递的值。

 我们把例1里的例子重新用createContext来写一下,如下:

<div id="root"></div>    
<script type="text/babel">
    const { Provider, Consumer } = React.createContext()           //调用React.createContext返回一个Provider和Consumer组件
    class Parent extends React.Component{
        state = {height:180}
        render(){                        
            return (
                <div>
                    <button  onClick={e=>this.setState({height:this.state.height+1})}>测试</button>
                    <Provider value={{height:this.state.height}}>         //Provider组件内通过value设置contexxt
                        <Child></Child>
                    </Provider>
                    
                </div>
            )
        }
    }

    class Child extends React.Component{
        render(){
            return     <p>
                                <Consumer>{val=>val.height}</Consumer>          /子组件内通过Consumer来直接获取值,子节点是一个函数,参数是传递过来的值
                            </p>
        }
    }

    ReactDOM.render(<Parent></Parent>,root)
</script>

实现的效果和例1是一样的,就不截图演示了。

用childContextType实现时,如果getChildContext内返回的一个值改变了,所有的子节点都将重新渲染,而用createContext实现时,如果改变了某个数据,只有引用数据的那个DOM节点对象才会重新渲染,其它DOM并不会更新,因此性能更好一点。

官方说childContextType在React17中将被淘汰,如果淘汰了那么function组件和class组件的参数2不就没什么含义了么(因为这个参数2是可以获取到的所有的context集合),如果通过createContext来获取的话性能又和getChildContext一样了,以后回来再看看将来会怎么实现。

 writer by:大沙漠 QQ:22969969

 

posted @ 2020-04-15 08:04  大沙漠  阅读(919)  评论(0编辑  收藏