一. 创作目的
关于这个内容，平时也都会用，但是每次用的时候都要去查询之前的代码，故写出来，方便以后使用的时候，不用去翻阅代码。
二. createContext
createContext的作用是是创建一个上下文对象，在祖先组件中提供数据，那么所有的后代组件都可以通过useContext获取到上下文对象中的数据。
三. useReducer
useReducer其实就是用来改变状态值的，但是在单个组件中，我们完全可以使用 useState 来完成这项工作。那么 useReducer的意义究竟在何处呢? 就是祖先与后代组件和兄弟组件间去改变状态的时候，可以使用 useReducer。并搭配 createContext来使用。
四. 代码实现
import { useReducer, createContext, useContext, Dispatch } from 'react'
import './App.css'
const CountContext = createContext<{ count: number; dispatch: Dispatch<{ type: string }> }>({
count: 0,
dispatch: () => {},
})
const reducer = (state: { count: number }, action: { type: string }) => {
switch (action.type) {
case 'incr':
return { count: state.count + 1 }
case 'decr':
return { count: state.count - 1 }
default:
return state
}
}
function App() {
const [state, dispatch] = useReducer(reducer, { count: 100 })
return (
<CountContext.Provider value={{ ...state, dispatch }}>
<ChildOne />
<ChildTwo />
</CountContext.Provider>
)
}
const ChildOne = () => {
const { count, dispatch } = useContext(CountContext)
return (
<>
<h2>Child One Component</h2>
<h3>{count}</h3>
<button onClick={() => dispatch({ type: 'incr' })}>count增加</button>
</>
)
}
const ChildTwo = () => {
const { count, dispatch } = useContext(CountContext)
return (
<>
<h2>Child Two Component</h2>
<h3>{count}</h3>
<button onClick={() => dispatch({ type: 'decr' })}>count减少</button>
</>
)
}
export default App
