react context

小编开始学习前端了，因为在原来的项目使用react context，而且相关博客一言难尽，小编自个按官网学习一下
1、创建一个demo工程

npm install -g create-react-app
create-react-app demo
npm start

创建完成我们观察一下项目结构

2、理论加实践代码
在App.js里面写入下面代码

//导入基础库
import React, { Component } from 'react';

//创建Context,初始值是null，并且赋值给ThemeContext
const ThemeContext = React.createContext(null)

function ConsumerDemo(){
  //调用useContext接受ThemeContext参数,返回值是最近的provider提供contextValue值。
  //从返回值中剥离需要的值
  const { color,background } = React.useContext(ThemeContext)
 return <div style={{ color,background } } >颜色显示,即消费者</div> 
}

//ConsumerDemo使用memo处理(下面扩展详细介绍memo),避免useState让ProviderDemo 重新 render，ConsumerDemo跟随父组件 render。
const Son = React.memo(()=> <ConsumerDemo />) // 子组件

//创建Provider
const ThemeProvider = ThemeContext.Provider //提供者
export default function ProviderDemo(){
 const [ contextValue , setContextValue ] = React.useState({  color:'#ccc', background:'pink' })
 return <div>
     <ThemeProvider value={ contextValue } >
         <Son />
     </ThemeProvider>
     <button onClick={ ()=> setContextValue({ color:'#fff' , background:'blue' })  } >点击改颜色</button>
 </div>
}