React16.8定义上下文的3种方式

一、Context(上下文)的认识

• 1、在某些场景下，你想在整个组件树中传递数据，但却不想手动地在每一层传递属性。你可以直接在 React 中使用强大的contextAPI解决上述问题
• 2、在一个典型的 React 应用中，数据是通过 props 属性自上而下（由父及子）进行传递的，但这种做法对于某些类型的属性而言是极其繁琐的（例如：地区偏好，UI 主题），这些属性是应用程序中许多组件都需要的。Context 提供了一种在组件之间共享此类值的方式，而不必显式地通过组件树的逐层传递 props
• 3、使用过express或者koa框架的就会经常使用到上下文来在整个项目中传递数据的。
• 本文中介绍react中几种常见的定义与使用上下文的方式,在react的生态圈中redux,react-router-dom等库中都使用到上下文来传递数据,理解好react上下文对今后看源码都有好处的。

二、在类组件中使用上下文的步骤

• 1、创建一个上下文(多文件的情况下单独使用一个文件)

    import React, { Component } from 'react'

    // 创建一个上下文
    const ColorContext = React.createContext();

• 2、在根组件中使用上下文的.Provider注入,需要传递的一个vaule的属性(需要传递到下面子组件的数据,子组件只获得到传递的数据)

    export default class ContextComponents1 extends Component {
      constructor(props) {
        super(props);
        this.state = {
          color: '#333',
        }
      }
      changeColor = (color) => {
        this.setState({ color });
      }
      render() {
        const { color } = this.state;
        return (
          <ColorContext.Provider value={{ color, changeColor: this.changeColor }}>
            {/* 只传递一个color和一个changeColor方法,子组件只能从上下文中获得到这两个属性/方法 */}
            <Header />
            <button onClick={() => this.changeColor('yellow')}>黄色</button>
            <button onClick={() => this.changeColor('green')}>绿色</button>
          </ColorContext.Provider>
        )
      }
    }

• 3、在子组件中使用上下文

    class Header extends Component {
      // 如果子组件中需要使用上下文就定义该行
      static contextType = ColorContext;
      render() {
        console.log(this.context); // 可以获取到根组件中value中传递过来的color和changeColor方法
        return (
          <>
            <h1 style={{ color: this.context.color }}>我是header组件</h1>
            <Title />
          </>
        )
      }
    }

三、函数组件中使用上下文的方式

• 1、定义上下文

    import React, { Component } from 'react';

    const ColorContext = React.createContext();

• 2、定义根组件

    export default class ContextComponent2 extends Component {
      state = {
        color: '#333',
      }
      changeColor = (color) => {
        this.setState({ color })
      }
      render() {
        const { color } = this.state;
        return (
          <ColorContext.Provider value={{ color }}>
            <Header name={'header'} type={1} />
            <button onClick={() => this.changeColor('yellow')}>黄色</button>
            <button onClick={() => this.changeColor('green')}>绿色</button>
          </ColorContext.Provider>
        )
      }
    }

• 3、在函数组件中使用

    function Header(props) {
      console.log(props, 'props属性')
      return (
        <ColorContext.Consumer>
          {
            value => {
              console.log(value, '上下文数据')
              return (<h1 style={{ color: value.color }}>我是header组件</h1>)
            }
          }
        </ColorContext.Consumer>
      )
    }

四、使用hooks新属性创建上下文

• 1、创建一个上下文

    import React, { Component, useContext, useState } from 'react';
    const ColorContext = React.createContext();

• 2、根组件

    export default () => {
      let [color, setColoer] = useState('#333');

      return (
        <ColorContext.Provider value={{ color }}>
          <Header />
          <button onClick={() => setColoer('yellow')}>黄色</button>
          <button onClick={() => setColoer('green')}>绿色</button>
        </ColorContext.Provider>
      )
    }

• 3、在子组件中使用

    function Header(props) {
      let { color } = useContext(ColorContext);
      console.log(color, '上下文');
      return (
        <>
          <h1 style={{ color: color }}>我是header组件</h1>
        </>
      )
    }