React Context

2021-03-03 13:35:09 阅读：81 来源： 互联网

标签：Context ThemeContext React context 组件 import

Context API：

React.createContext(defaultValue)：创建一个context对象。当React渲染订阅了这个Context对象的组件，这个组件会从组件树中离自身组件最近的那个匹配的Provider中读取到当前的context值。 Context.Provider：接收一个value属性，传递给消费组件，允许消费组件订阅context变化。
class.contextType ：挂载在class上的contextType属性会被重赋值给一个由React。createContext()创建的Context对象。则使用this.context来消费最近Context上的那个值。
useContext：接收一个context对象并返回该context的当前值。当前的context值由上层组件中距离当前组件最近的Provider的value prop觉得，只用在function

Context.Consumer：这种方法需要一个函数作为子元素。这个函数接收当前的 context 值，并返回一个 React 节点。传递给函数的 value 值等价于组件树上方离这个 context 最近的 Provider 提供的 value 值。

createContext：

import React from "react";
export const ThemeContext = React.createContext();
export const ThemeProvider = ThemeContext.Provider;
export const ThemeConsumer = ThemeContext.Consumer;

Provider:

import React, { Component } from "react";
import { ThemeProvider } from "../Context";
import HomePage from "./HomePage";
import UserPage from "./Userpage";
class ContextPage extends Component {
  constructor(props) {
    super(props);
    this.state = {
      theme: {
        themeColor: "red",
      },
    };
  }
  render() {
    const { theme } = this.state;
    return (
      <div>
        <h1>ContextPage</h1>
        <ThemeProvider value={theme}>
          <HomePage />
          <UserPage />
        </ThemeProvider>
      </div>
    );
  }
}

export default ContextPage;

class.contextType：

import React, { Component } from "react";
import { ThemeContext } from "../Context";

class APage extends Component {
  // 方法1
  //   static contextType = ThemeContext;
  render() {
    const { themeColor } = this.context;
    console.log(this, "this");
    return (
      <div>
        <h3 className={themeColor}>APage</h3>
      </div>
    );
  }
}
// 方法2
HomePage.contextType = ThemeContext;
export default APage;

useContext：

import React, { useContext } from "react";
import { ThemeContext } from "../Context";

export default function BPage(props) {
  const ctx = useContext(ThemeContext);
  return (
    <div>
      <h3 className={ctx.themeColor}>BPage</h3>
    </div>
  );
}

Consumer：

import React, { Component } from "react";
import { ThemeConsumer } from "../Context";

export default class ConsumerPage extends Component {
  render() {
    return (
      <div>
        <h3>ConsumerPage</h3>
        <ThemeConsumer>
          {(themeContext) => <div className={themeContext.themeColor}>omg</div>}
        </ThemeConsumer>
      </div>
    );
  }
}

参考 && 感谢各路大神：

https://zh-hans.reactjs.org/docs/context.html　

标签：Context,ThemeContext,React,context,组件,import
来源： https://www.cnblogs.com/haimengqingyuan/p/14473862.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

React Context