React Hooks - useContetx和useReducer的使用实例详解

目录
  • 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。

到此这篇关于React Hooks - useContetx和useReducer的基本使用的文章就介绍到这了,更多相关React Hooks基本使用内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们!

(0)

相关推荐

  • React Hooks - useContetx和useReducer的使用实例详解

    目录 useContetx的使用 useReducer的使用 useContetx的使用 在之前的开发中,我们要在组件中使用共享的Context有两种方式: 类组件可以通过 类名.contextType = MyContext 的方式,在类中获取context; 多个Context或者在函数式组件中通过 MyContext.Consumer 方式共享context; 但是多个Context共享时的方式会存在大量的嵌套(会导致代码阅读性非常差): Context Hook允许我们通过Hook来直接

  • React 悬浮框内容懒加载实例详解

    目录 界面隐藏 懒加载 React实现 原始代码 放入新的DIV 状态设置 样式设置 事件设置 事件优化 延迟显示悬浮框 悬浮框内容懒加载 完整代码 界面隐藏 一个容器放置视频,默认情况下 display: none; z-index: 0; transform: transform3d(10000px, true_y, true_z); y轴和z轴左边都是真实的(腾讯视频使用绝对定位,因此是计算得到的),只是将其移到右边很远的距离. 懒加载 React监听鼠标移入(获取坐标) 添加事件监听 o

  • React Native Modal 的封装与使用实例详解

    目录 背景 Android FullScreenModal 的封装使用 Android 原生实现全屏 Dialog 封装给 RN 进行相关的调用 Android 原生部分实现 JS 部分实现 使用 RootSiblings 封装 Modal 实现界面 Render 相关 实现 Modal 展示动画相关 使用 View 封装 Modal 整体 Modal 控件的封装 其他 Android Back 键的注意 View 封装 Modal 时候的注意 最后 背景 在使用 React Native(以下

  • react中的ajax封装实例详解

    react中的ajax封装实例详解 代码块 **opts: {'可选参数'} **method: 请求方式:GET/POST,默认值:'GET'; **url: 发送请求的地址, 默认值: 当前页地址; **data: string,json; **async: 是否异步:true/false,默认值:true; **cache: 是否缓存:true/false,默认值:true; **contentType: HTTP头信息,默认值:'application/x-www-form-urlenc

  • js中自定义react数据验证组件实例详解

    我们在做前端表单提交时,经常会遇到要对表单中的数据进行校验的问题.如果用户提交的数据不合法,例如格式不正确.非数字类型.超过最大长度.是否必填项.最大值和最小值等等,我们需要在相应的地方给出提示信息.如果用户修正了数据,我们还要将提示信息隐藏起来. 有一些现成的插件可以让你非常方便地实现这一功能,如果你使用的是knockout框架,那么你可以借助于Knockout-Validation这一插件.使用起来很简单,例如我下面的这一段代码: ko.validation.locale('zh-CN');

  • 业务层hooks封装useSessionStorage实例详解

    目录 封装原因: 建议: 工具库封装模式: 工具库目录: API设计: 代码实践: Hooks设计方式 useSessionStorage.js 简介: 注意点 Api Params Options Result 总结: 封装原因: 名称:useSessionStorage 功能开发过程中,需要进行数据的临时存储,正常情况下,使用localStorage或者 sessionStorage,存在于 window 对象中,使用场景不一样. sessionStorage的生命周期是在浏览器关闭前,浏览

  • React中编写CSS实例详解

    目录 正文 内联样式 普通的CSS css modules css in js 样式组件 引入外部变量 默认值 引入全局样式 provider 样式继承 动态添加class 正文 目前,前端最流行的开发方式是组件化,而CSS的设计本身就不是为组件化而生的,所以在目前组件化的框架中都在需要一种合适的CSS解决方案 在组件化开发环境下的CSS,应该满足如下需求: 可以编写局部css: css具备自己的具备作用域,不会随意污染其他组件内的元素 可以编写动态的css: 可以获取当前组件的一些状态,根据状

  • 公共Hooks封装文件下载useDownloadFile实例详解

    目录 引言 项目环境 封装前提:各方法对比 封装分解:下载核心代码 封装分解:用户体验设计 useDownloadFile.js完整代码 引言 对于经常需要开发企业管理后台的前端开发来说,必不可少的需要使用表格对于数据进行操作,在对于现有项目进行代码优化时,封装一些公共的Hooks. 本篇文章为useDownloadFile.js 基于个人项目环境进行封装的Hooks,仅以本文介绍封装Hooks思想心得,故相关代码可能不适用他人 项目环境 Vue3.x + Ant Design Vue3.x +

  • react-native中AsyncStorage实例详解

    react-native中AsyncStorage实例详解 AsyncStorage是一个简单的,具有异步特性的储存API,它的储存方式为键值对的方式,且对整个App而言,是全局的. AsyncStorage提供了较全的方法供我们使用,每个方法都有一个回调函数,而回调函数的第一个参数都是错误对象error,所有的方法执行之后都会返回一个Promise对象. 方法: static getItem(key: string, callback?: ?(error: ?Error, result: ?s

  • vue-cli中的babel配置文件.babelrc实例详解

    本文介绍vue-cli脚手架工具根目录的babelrc配置文件 介绍 es6特性浏览器还没有全部支持,但是使用es6是大势所趋,所以babel应运而生,用来将es6代码转换成浏览器能够识别的代码 babel有提供专门的命令行工具方便转码,可以自行去了解 vue-cli脚手架的.babelrc文件 { // 此项指明,转码的规则 "presets": [ // env项是借助插件babel-preset-env,下面这个配置说的是babel对es6,es7,es8进行转码,并且设置amd

随机推荐