react的context使用方法

先看一下目录，很多博客上都是直接将父子组件全部写到同一个文件上，但是在项目中大部分需要将组件抽离成各个文件。

context.js

import React from 'react'

const MyContext = React.createContext()

export default MyContext

父组件：通过ContextApp.Provider设置共享数据

import React, { Component } from 'react'
import { withRouter } from 'react-router-dom'
import ContextTest from './components/contextTest'
import ContextApp from './context.js'

class PageTwo extends Component {
  constructor() {
    super()
    this.state = {
      name: 1
    }
  }
  }
  render() {
    return (
      <div className="pageTwo">
        <ContextApp.Provider value={{
          ...this.state,
          changeName: (changeValue) => {
            this.setState({
              name: changeValue
            })
          }}}>
          <ContextTest />
        </ContextApp.Provider>
      </div>
    )
  }
}

export default withRouter(PageTwo)

子组件：当子组件触发了该父组件下共享数据的变化就会触发相关视图的改变。通过ContextApp.Consumer关联共享数据

import React, { Component } from 'react'
import ContextApp from '../context.js'

export default class ContextTest extends Component {
  render() {
    console.log('更新了')
    return (
      <div>
        <ContextApp.Consumer>
          {
            ({name, changeName}) => {
              return (
                <div onClick={() => {
                  changeName(name + 1)
                }} className="">{name}</div>
              )
            }
          }
        </ContextApp.Consumer>
      </div>
    )
  }
}

类似mobx和redux的功能实现一个局部的或者全局的数据共享并更新视图。