react中的context，provider使用步骤

Context 提供了一个无需为每层组件手动添加 props，就能在组件树间进行数据传递的方法。

具体详见：context官方API

本篇文章只是详细的把我个人的学习日志给记录下来相当于又会了一个react相关的知识点，具体这些API可以参看官方API，已经写得很详细了；与context相关的API共有以下几个：

• React.createContext

• Context.Provider

• Class.contextType

• Context.Consumer

• Context.displayName

如果想要在组件使用context，步骤具体如下：

1.首先设置context的初始值

// theme-context.ts中创建一个context，并设置初始值
import React from 'react'

export const themes = {
  light: {
    foreground: '#000000',
    background: '#eeeeee',
  },
  dark: {
    foreground: '#ffffff',
    background: '#222222',
  },
}

export const ThemeContext = React.createContext(
  themes.dark // 默认值
)

2.当点击button，切换theme，去动态改变context的value

//themed-button.tsx
import React from 'react'
import { ThemeContext } from './theme-context'

class ThemedButton extends React.Component {
  render() {
    const { props } = this
    const theme = this.context //调用context中设置的theme
    console.log(theme)
    return (
      <button
        {...props}
        style={{ backgroundColor: theme.background, width: '200px', height: '100px', cursor: 'pointer' }}
      />
    )
  }
}

//把上文创建的context与此组件关联，这样就可以在ThemeButton这个组件中通过this.context去调用设置的值了，
//这只是其中一种方式，也可以在ThemedButton这个组件内部，通过 static contextType = ThemeContext;来与此组件关联
ThemedButton.contextType = ThemeContext

export default ThemedButton

3.在app.js中去动态切换context

// app.tsx 去动态切换context
import { ThemeContext, themes } from './theme-context'
import ThemedButton from './themed-button'

function Page(props: any) {
  return props.children
}
function Section(props: any) {
  return props.children
}

// 一个使用 ThemedButton 的中间组件
function Toolbar(props) {
  return (
    <ThemedButton onClick={props.changeTheme}>
      Change Theme
    </ThemedButton>
  )
}

class App extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
      theme: themes.light,
    }
  }

  toggleTheme = () => {
    this.setState(state => ({
      theme:
        state.theme === themes.dark
          ? themes.light
          : themes.dark,
    }))
  }

  render() {
    // 在 ThemeProvider 内部的 ThemedButton 按钮组件使用 state 中的 theme 值，
    // 而外部的组件使用默认的 theme 值, 外部组件并不会发生变化，由此可见provider的作用了；
    return (
      <Page>
        <ThemeContext.Provider value={this.state.theme}>
          <Toolbar changeTheme={this.toggleTheme} />
        </ThemeContext.Provider>
        <Section>
          <ThemedButton />
        </Section>
      </Page>
    )
  }
}


//将此APP组件渲染到页面上
export default App

以上代码所实现的效果：

因为左边的按钮是被Provider所包裹的，右边的没有被包裹，看到这里是不是觉得很简单呢，以上就是应用context与Provider的实例了，小伙伴们若是有需要的话，可以照着做呀！
本次分享完毕！主要是参考了官方API，感谢官方所提供的例子！