记一次 React context 使用

学习 React 之 Context 使用

记录一次React context 使用

React.createContext Api

• 新建文件 contexts.js 文件用来存放 context 对象

import React from "react";

const ThemetContext = React.createContext(defalutValue);

• 创建一个 Context 对象。当 React 渲染一个订阅了这个 Context 对象的组件，这个组件会从组件树中离自身最近的那个匹配的 Provider 中读取到当前的 context 值。只有当组件所处的树中没有匹配到 Provider 时，其 defaultValue 参数才会生效

• 新建文件context/indexjs 在组建中获取 context 值

import React from "react";
// 注意这里引入 ThemeContext
import {ThemeContext} from "../contexts";

class Button extends React.Component{
    constructor(props) {
        super(props);
    }

    componentDidMount() {
        console.log('-------------------------------- Button this --------------------------------', this.props.theme);
    }

    render() {
        return <div>{this.context} {this.props.theme}</div>
    }
}
//  挂载在 class 上的 contextType
Button.contextType = ThemeContext;


class Context extends React.Component {
    constructor(props) {
        super(props);
    }
    render() {
        return (
            <div>
                <Button theme={this.context}></Button>
            </div>
        )
    }
}
// 挂载在 class 上的 contextType
Context.contextType = ThemeContext;

export default Context;

• 挂载在 class 上的 contextType 属性会被重赋值为一个由 React.createContext() 创建的 Context 对象。这能让你使用 this.context 来消费最近 Context 上的那个值。你可以在任何生命周期中访问到它，包括 render 函数中

• 新建文件 theme/index.js

import React from "react";
import ContextComponent from "../context";

class Theme extends React.Component{
    render() {
        return (
            <div>
                <ContextComponent></ContextComponent>
            </div>
        )
    }
}

export default Theme;

• 在 App.js 中使用

import React from "react";
import Theme from "./views/theme";
// 引入 ThemeContext
import {ThemeContext} from "./views/contexts";

function App() {
  return (
    <div className="App">
        <ThemeContext.Provider value="dark">
            <Theme></Theme>
        </ThemeContext.Provider>
    </div>
  );
}

export default App;

• 每个 Context 对象都会返回一个 Provider React 组件，它允许消费组件订阅 context 的变化。

• Provider 接收一个 value 属性，传递给消费组件。一个 Provider 可以和多个消费组件有对应关系。多个 Provider 也可以嵌套使用，里层的会覆盖外层的数据。

• 当 Provider 的 value 值发生变化时，它内部的所有消费组件都会重新渲染。Provider 及其内部 consumer 组件都不受制于 shouldComponentUpdate 函数，因此当 consumer 组件在其祖先组件退出更新的情况下也能更新。

• 注：再使用过程中碰到了是 render 中 不能直接 this.props 会提示错误，意思 this.props 是一个 Object 对象不能直接在 div 标签中使用

• 详细内容查看 官方文档