React Hooks - useContetx和useReducer的基本使用

墨蓝 2023-09-24 13:31 17阅读 0赞

#### 文章目录 ####

*   *   *  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>
      )
    })
    
    export default App

**注意事项**:

> 当组件上层最近的 `<MyContext.Provider>` 更新时，该 Hook 会触发重新渲染，并使用最新的值传递给 MyContext provider 的 context value 值。

--------------------

#### useReducer的使用 ####

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

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

> 在某些场景下，如果state的处理逻辑比较复杂，我们可以通过useReducer来对其进行拆分;
> 
> 或者这次修改的state需要依赖之前的state时，也可以使用;

**useReducer函数使用过程如下**:

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

// 定义一个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
      }
    }

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

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

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

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