react-context-访问、修改操作

上篇文章介绍了context（上下文对象），这边文章接着上篇文章总结利用context实现数据修改

引言：

1、我们使用context上下文对象来管理公共状态，那么我们只能读状态，如何更新？
2、要实现-----在一个祖先元素上挂载context对象，在子组件上试图去读取修改，其他组件也可以变化
3、创建一个组件，在全局里定义一个状态，并修改这个状态

写法：

1、首先创建一个组件，供其他组件使用

Count组件如下，将组件可以放到子组件里面

// 我们使用context上下文对象来管理公共状态，那么我们只能读状态，如何更新？
// 要实现-----在一个祖先元素上挂载context对象，在子组件上试图去读取修改，其他组件也可以变化
// 创建一个组件，在全局里定义一个状态，并修改这个状态
// Count组件如下，将组件可以放到子组件里面
import React, {
   Component, createContext} from 'react'
// App.js中包裹写法
// 只要使用包裹的方式，方法二中的默认值就不生效了
const {
   
    Provider,
    Consumer:CountConsumer
} = createContext()
// App.js中不包裹写法（不使用）
// 如果不定义根的Provider，那么就可以在创建Context的时候可以给个初始值，这样虽然报错了，但是脱离了class，跟class一点关系都没有了
// const {
   
//     Provider,
//     Consumer:CountConsumer
// } = createContext({
   
//     count: 100,
//     increment: () => {
   console.log(0)},
//     decrement: () => {
   console.log(1)}
// })

// import 起别名
// import {
   x as abc} from
class CountProvider extends Component {
   
    constructor(props) {
   
        s