React Hooks - useContetx和useReducer的基本使用

文章目录

useContetx的使用

在之前的开发中，我们要在组件中使用共享的Context有两种方式:

类组件可以通过

类名.contextType = MyContext

的方式，在类中获取context;

多个Context或者在函数式组件中通过 MyContext.Consumer 方式共享context;

但是多个Context共享时的方式会存在大量的嵌套(会导致代码阅读性非常差):

Context Hook

允许我们通过Hook来直接获取某个Context的值, 相对于class组件中的使用方式会简单非常多;

例如定义两个Context

import{ createContext }from"react";const InfoContext =createContext()const ThemeContext =createContext()export{
  InfoContext,
  ThemeContext
}

依然需要使用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>)

在要使用的地方, 通过useContetx这个hook函数可以直接获取到值

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>)})exportdefault App

注意事项:

当组件上层最近的

<MyContext.Provider>

更新时，该 Hook 会触发重新渲染，并使用最新的值传递给 MyContext provider 的 context value 值。

useReducer的使用

很多人看到useReducer的第一反应应该是redux的某个替代品，其实并不是。

useReducer仅仅是useState的一种替代方案:

在某些场景下，如果state的处理逻辑比较复杂，我们可以通过useReducer来对其进行拆分;

或者这次修改的state需要依赖之前的state时，也可以使用;

useReducer函数使用过程如下:

例如我们先定义一个reducer函数

// 定义一个reducer函数functionreducer(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
  }}

再在函数组件中通过useReducer函数将我们定义的reducer函数使用起来

import React,{ memo }from'react'import{ useReducer }from'react'// 定义一个reducer函数functionreducer(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>)})exportdefault App

数据是不会共享的，它们只是使用了相同的counterReducer的函数而已。

所以，useReducer只是useState的一种替代品，并不能替代Redux。