react初探-context

• 最近公司上开始用react了，以前我的技术栈都是vue相关的，所以得赶紧学起来了，记录一下学习react中碰到的问题。
• 在项目上使用到了Context进行组件的数据传递，感觉有点意思，特此记录一下使用方法

概念及应用

context设计目的是为了共享那些对于一个组件树而言是“全局”的数据。比如你在父组件创建一个数据，则在其后代所有的组件中都可以访问的到。

用法

• 知道基本的概念后就好理解了 contex.js

import React from "react";
export const MyContext = React.createContext();

parent.js

import React from "react";
import {MyContext} from "./Context";

class Parent extend React {
    render() {
        return (
        // Context返回一个Provider react组件
        // value为需要传递的数据
        <MyContext.Provider value={id: 123}>
            {this.props.children}
        </MyContext.Provider>
        );
    }
}

child.js

import React from "react";
import {MyContext} from "./Context";

class Parent extend React {
    static contextType  = MyContext // 将Conte赋予为calss的静态属性contextType
    render() {
        return (
            <div>id:{this.context.id}</div>
        );
    }
}

总结

对于有使用过vue的人来说，context就相当于的vue里面的provide/inject。所以适用的场景基本都差不多，即在隔代传值中非常适合