useContext 和 useReducer语法讲解

useContext 和 useReducer

useContext 和 useReducer 传递state + dispatch, 模拟redux

useContext 用法

// App.tsx
const UserContext = React.createContext({ name: '' })
function App() {
  return (
    
      

        
欢迎学习React后台课程
        
      
    
  )
}

function Child1() {
  return (
    

      

        Child1
      
      

        
      
    
  )
}

function Child2() {
  const { name } = useContext(UserContext)
  return Child2{name}
}

用 createContext 创建上下文对象，传递全局变量，在底层任意一个子组件可使用 useContext 获取该上下文对象，同时获取里面定义的全局变量值，进行渲染。

解决问题

当组件嵌套层级过多时，传递属性不方便。

useReducer 用法

const [state, dispatch] = useReducer(reducer, initialArg);

useReducer 案例

const initialState = {count: 0};

function reducer(state, action) {
  switch (action.type) {
    case 'increment':
      return {count: state.count + 1};
    case 'decrement':
      return {count: state.count - 1};
    default:
      throw new Error();
  }
}

function Counter() {
  const [state, dispatch] = useReducer(reducer, initialState);
  return (
    <>
      Count: {state.count}
      <button onClick={() => dispatch({type: 'decrement'})}>-</button>
      <button onClick={() => dispatch({type: 'increment'})}>+</button>
    </>
  );
}