React Hooks - useContetx和useReducer的使用实例详解

import { createContext } from "react";

const InfoContext = createContext()
const ThemeContext = createContext()

export {
  InfoContext,
  ThemeContext
}

const root = ReactDOM.createRoot(document.querySelector("#root"))
root.render(
  <InfoContext.Provider value={{name: "chenyq", age: 18}}>
    <ThemeContext.Provider value={{color: "red"}}>
      <App/>
    </ThemeContext.Provider>
  </InfoContext.Provider>
)

import React, { memo } from 'react'
import { useContext } from 'react'
import { InfoContext, ThemeContext } from './index'

const App = memo(() => {
  // 通过hook拿到共享的数据
  const info = useContext(InfoContext)
  const theme = useContext(ThemeContext)
  return (
    <div>
      {/* 展示共享的数据 */}
      <h2>{info.name}-{info.age}</h2>
      <h2>{theme.color}</h2>
    </div>
  )
})

export default App

// 定义一个reducer函数
function reducer(state, action) {
  switch(action.type) {
    case "incremment":
      return {...state, counter: state.counter + action.num}
    case "decremment":
      return {...state, counter: state.counter - action.num}
    default: 
      return state
  }
}

import React, { memo } from 'react'
import { useReducer } from 'react'

// 定义一个reducer函数
function reducer(state, action) {
  switch(action.type) {
    case "incremment":
      return {...state, counter: state.counter + action.num}
    case "decremment":
      return {...state, counter: state.counter - action.num}
    default: 
      return state
  }
}

// 函数组件
const App = memo(() => {
  // 第一个参数传reducer, 第二个参数初始化值
  const [state, dispatch] = useReducer(reducer, { counter: 0 })

  return (
    <div>
      {/* 使用reducer函数中的state */}
      <h2>当前计数: {state.counter}</h2>
      {/* 派发action通过reducer函数修改counter */}
      <button onClick={() => dispatch({type: "incremment", num: 5})}>+5</button>
      <button onClick={() => dispatch({type: "decremment", num: 5})}>-5</button>
    </div>
  )
})

export default App