useContext -useReducer

useContext #

const CountContext = React.createContext()
// CountProvider和useCount写在外部导入
function CountProvider(props) {
  const [count, setCount] = React.useState(0)
  const value = [count, setCount]
  return <CountContext.Provider value={value} {...props} />
}

function useCount() { // 封装useCount
  const context = React.useContext(CountContext)
  if (!context)
    throw new Error('useCount must be used within a CountProvider')

  return context
}

function CountDisplay() {
  const [count] = useCount()
  return <div>{`The current count is ${count}`}</div>
}

function Counter() {
  const [, setCount] = useCount()
  const increment = () => setCount(c => c + 1)
  return <button onClick={increment}>Increment count</button>
}

function App() {
  return (
    <div>
      <CountProvider>
        <CountDisplay />
        <Counter />
      </CountProvider>
    </div>
  )
}
const CountContext = React.createContext()
// CountProvider和useCount写在外部导入
function CountProvider(props) {
  const [count, setCount] = React.useState(0)
  const value = [count, setCount]
  return <CountContext.Provider value={value} {...props} />
}

function useCount() { // 封装useCount
  const context = React.useContext(CountContext)
  if (!context)
    throw new Error('useCount must be used within a CountProvider')

  return context
}

function CountDisplay() {
  const [count] = useCount()
  return <div>{`The current count is ${count}`}</div>
}

function Counter() {
  const [, setCount] = useCount()
  const increment = () => setCount(c => c + 1)
  return <button onClick={increment}>Increment count</button>
}

function App() {
  return (
    <div>
      <CountProvider>
        <CountDisplay />
        <Counter />
      </CountProvider>
    </div>
  )
}

const CountContext = React.createContext()

function CountProvider(props) {
  const [count, setCount] = React.useState(0)
  const value = [count, setCount]
  // const value = React.useState(0)
  return <CountContext.Provider value={value} {...props} />
}

function CountDisplay() {
  const [count] = React.useContext(CountContext)
  return <div>{`The current count is ${count}`}</div>
}

function Counter() {
  const [, setCount] = React.useContext(CountContext)
  const increment = () => setCount(c => c + 1)
  return <button onClick={increment}>Increment count</button>
}

function App() {
  return (
    <div>
      <CountProvider>
        <CountDisplay />
        <Counter />
      </CountProvider>
    </div>
  )
}
const CountContext = React.createContext()

function CountProvider(props) {
  const [count, setCount] = React.useState(0)
  const value = [count, setCount]
  // const value = React.useState(0)
  return <CountContext.Provider value={value} {...props} />
}

function CountDisplay() {
  const [count] = React.useContext(CountContext)
  return <div>{`The current count is ${count}`}</div>
}

function Counter() {
  const [, setCount] = React.useContext(CountContext)
  const increment = () => setCount(c => c + 1)
  return <button onClick={increment}>Increment count</button>
}

function App() {
  return (
    <div>
      <CountProvider>
        <CountDisplay />
        <Counter />
      </CountProvider>
    </div>
  )
}

配合useReducer使用 #

CounterCotext.jsx

const CounterContext = React.createContext(null)
export default CounterContext
const CounterContext = React.createContext(null)
export default CounterContext

CounterReducer.jsx

const CounterReducer = (state,action)=>{
    switch (action.type){
        case 'counter/increment':
         return state + 1;
        case 'counter/decrement':
         return state - 1;
        default:
         return state;
    }
}
export default CounterReducer
const CounterReducer = (state,action)=>{
    switch (action.type){
        case 'counter/increment':
         return state + 1;
        case 'counter/decrement':
         return state - 1;
        default:
         return state;
    }
}
export default CounterReducer

App.jsx

import  CounterContext
import  CounterReducer

function App() {
  const [state,dispacth] = React.useReducer(CounterReducer,0)
    
  return (
    <div>
      <CounterContext.Provider value={{state,dispath}}>
        <Counter />
      </CounterContext.Provider>
    </div>
  )
}
import  CounterContext
import  CounterReducer

function App() {
  const [state,dispacth] = React.useReducer(CounterReducer,0)
    
  return (
    <div>
      <CounterContext.Provider value={{state,dispath}}>
        <Counter />
      </CounterContext.Provider>
    </div>
  )
}

Counter.jsx

import  useContext

const Counter = () =>{
 const count = React.useContext(CounterContext)
 const dispatch = count.dispatch
    
 return (
    <div>
      <button onClick={()=>{dispatch({type:'counter/increment'})}}></button>
      <span>{count.state}</span>
      <button onClick={()=>{dispatch({type:'counter/decrement'})}}></button>
    </div>
  )
}
import  useContext

const Counter = () =>{
 const count = React.useContext(CounterContext)
 const dispatch = count.dispatch
    
 return (
    <div>
      <button onClick={()=>{dispatch({type:'counter/increment'})}}></button>
      <span>{count.state}</span>
      <button onClick={()=>{dispatch({type:'counter/decrement'})}}></button>
    </div>
  )
}