useContext
useContext是React的一个Hook，用于在函数组件中访问上下文（context）的值。它可以帮助我们在组件树中共享状态，而不需要通过props一层层传递
特点
- 用于跨组件共享状态
- 需要配合React.createContext和Context.Provider使用
- 简化了组件间的状态传递
基本用法
- 创建 Context
import React, { createContext, useContext } from 'react';
const MyContext = createContext('默认值');
- 提供 Context值
const App = () => {return (// 这个value可以传递任何类型的数据，包括字符串、数组、对象、函数等<MyContext.Provider value="共享值"><Child /></MyContext.Provider>)
}
- 消费 Context值
const Child = () => {const value = useContext(MyContext)return <div>{value}</div>
}
注意事项
- useContext只能在函数组件或自定义Hook中使用，不能在类组件中使用
- 如果Context.Provider的value发生变化，所有使用该Context的组件都会重新渲染
- 如果没有Provider包裹，useContext会返回createContext时定义的默认值
- 性能优化：如果value传递的是一个对象或数组，避免在每次渲染时创建新的引用（例如直接传递字面量对象或数组时），可以使用useMemo缓存value
const value = useMemo(() => ({name: 'John',age:30}), []) - 嵌套Context：如果需要传递多个值，可以将他们组合成一个对象，或者使用多个Context.
使用场景
- 主题切换：在应用中实现亮色和暗色主题的切换
- 用户认证：共享当前用户的认证状态，例如是否已登录
- 多语言支持：根据用户的语言偏好动态切换界面语言
- 全局状态管理：在小型应用中替代Redux等状态管理工具，简化状态共享
useReducer
useReducer是React的一个的Hook。用于在函数组件中进行更复杂的状态管理。它适合于状态逻辑较复杂、涉及多个子值或下一个状态依赖于之前状态的场景。用法类似于Redux的reducer
基本用法
import { useReducer } from 'react'
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, {count: 0})return (<>Count: {state.count}// 通过dispatch 触发action 的函数<button onClick={() => dispatch({ type: 'increment' })}>+</button><button onClick={() => dispatch({ type: 'decrement' })}>-</button></>)
}
1、render函数根据action.type来决定如何更新状态
2、dispatch函数用于触发状态更新，每次点击按钮时，都会调用dispatch并传递相应的action对象
使用场景
- 复杂的状态逻辑：当状态更新逻辑较为复杂，或者需要根据前一个状态来计算新状态时，useReducer可以更好地组织代码
- 多个子值：当状态是一个包含多个子值的对象时，useReducer可以更方便管理这些子值
- 性能优化：在某些情况下，useReducer可以比useState更高效，因为它允许将状态更新逻辑集中在一个地方，减少不必要的重复渲染
useContext和useReducer结合使用实现全局状态管理（类似于Redux）
- useReducer管理全局状态
- useContext提供和消费这个状态
import React, { createContext, useReducer, useContext } from 'react'
const CountContext = createContext(null)
function reducer(state, action){switch(action.type){case 'add':return { count: state.count + 1 }default:return state}
}function ConterProvider({ children }){const [state, dispatch] = useReducer(reducer, {count: 0})return (<CountContext.Provider value={{state, dispatch}}>{ children }</CountContext.Provider>)
}function Counter(){const { state, dispatch } = useContext(CountContext)return (<button onClick={() => dispatch({ type: 'add' })}>Count: {state.count}</button>)
}// 使用
function App() {return (<CounterProvider><Counter /></CounterProvider>)
}
