ReactHooks(二)

最新推荐文章于 2024-09-08 21:50:47 发布
最新推荐文章于 2024-09-08 21:50:47 发布
阅读量782 收藏 12
点赞数 27
分类专栏： React 文章标签： react.js javascript typescript
pian
本文链接：https://blog.csdn.net/qq_45063232/article/details/140780655
版权

上期在这~

ReactHooks【二】

一.useReducer

1.1 useReducer 的语法格式

useReducer 的基础语法如下：

const [state, dispatch] = useReducer(reducer, initState, initAction?)

其中：

  • reducer 是一个函数，类似于 (prevState, action) => newState。形参 prevState 表示旧状态，形参 action 表示本次的行为，返回值 newState 表示处理完毕后的新状态。
  • initState 表示初始状态，也就是默认值。
  • initAction 是进行状态初始化时候的处理函数，它是可选的，如果提供了 initAction 函数，则会把 initState 传递给 initAction 函数进行处理，initAction 的返回值会被当做初始状态。
  • 返回值 state 是状态值。dispatch 是更新 state 的方法，让他接收 action 作为参数，useReducer 只需要调用 dispatch(action) 方法传入的 action 即可更新 state。

1.2 定义组件的基础结构

定义名为 Father 的父组件如下：

import React from 'react'

// 父组件
export const Father: React.FC = () => {
  return (
    <div>
      <button>修改 name 的值</button>
      <div className="father">
        <Son1 />
        <Son2 />
      </div>
    </div>
  )
}

定义名为 Son1 和 Son2 的两个子组件如下：

// 子组件1
const Son1: React.FC = () => {
  return <div className="son1"></div>
}

// 子组件2
const Son2: React.FC = () => {
  return <div className="son2"></div>
}

在 index.css 中添加对应的样式：

.father {
  display: flex;
  justify-content: space-between;
  width: 100vw;
}

.son1 {
  background-color: orange;
  min-height: 300px;
  flex: 1;
  padding: 10px;
}

.son2 {
  background-color: lightblue;
  min-height: 300px;
  flex: 1;
  padding: 10px;
}

1.3 定义 useReducer 的基础结构

1.3.1按需导入 useReducer 函数

import React, { useReducer } from ‘react’

1.3.2定义初始数据

const defaultState = { name: ‘test’, age: 16 }

1.3.3 定义 reducer 函数根据旧状态，进行一系列处理，最终返回新状态：

const reducer = (prevState) => {
  console.log('触发了 reducer 函数')
  return prevState
}

1.3.4 在 Father 组件中，调用 useReducer(reducerFn, 初始状态) 函数，并得到 reducer 返回的状态

// 父组件
export const Father: React.FC = () => {
  // useReducer(fn, 初始数据, 对初始数据进行处理的fn)
  const [state] = useReducer(reducer, defaultState)
  console.log(state)

  return (
    <div>
      <button>修改 name 的值</button>
      <div className="father">
        <Son1 />
        <Son2 />
      </div>
    </div>
  )
}

1.3.5为 reducer 中的 initState 指定数据类型

在 Father 组件中使用 state 时，就可以出现类型的智能提示啦

// 定义状态的数据类型
type UserType = typeof defaultState

const defaultState = { name: 'test', age: 16 }

// 给 initState 指定类型为 UserType
const reducer = (prevState: UserType) => {
  console.log('触发了 reducer 函数')
  return prevState
}

1.4 使用 initAction 处理初始数据

1.4.1 定义名为 initAction 的处理函数

如果初始数据中的 age 为小数、负数、或 0 时，对 age 进行非法值的处理：

//形参：初始状态
//返回值：处理好的初始状态
const initAction = (initState: UserType) => {
  // 把 return 的对象，作为 useReducer 的初始值
  return { ...initState, age: Math.round(Math.abs(initState.age)) || 18 }
}

1.4.2 在 Father 组件中，使用步骤1声明的 initAction 函数如下：

// 父组件
export const Father: React.FC = () => {
  // useReducer(fn, 初始数据, 对初始数据进行处理的fn)
  const [state] = useReducer(reducer, defaultState, initAction)

  // 省略其它代码...
}

可以在定义 defaultState 时，为 age 提供非法值，可以看到非法值在 initAction 中被处理掉了。

1.5 在 Father 组件中点击按钮修改 name 的值

注意：禁止直接修改state数据源。

注意：这种用法是错误的，因为不能直接修改 state 的值
因为存储在 useReducer 中的数据都是“不可变”的！
要想修改 useReducer 中的数据，必须触发 reducer 函数的重新计算，
根据 reducer 形参中的旧状态对象（initState），经过一系列处理，返回一个“全新的”状态对象
state.name = ‘escook’

1.5.1为了能够触发 reducer 函数的重新执行，我们需要在调用 useReducer() 后接收返回的 dispatch 函数

// Father 父组件
const [state, dispatch] = useReducer(reducer, defaultState, initAction)
在 button 按钮的点击事件处理函数中，调用 dispatch() 函数，从而触发 reducer 函数的重新计算：

// Father 父组件
const onChangeName = () => {
  dispatch()
}
点击 Father 组件中如下的 button 按钮：

<button onClick={onChangeName}>修改 name 的值</button>
会触发 reducer 函数的重新执行，并打印 reducer 中的 console.log()，代码如下：

const reducer = (prevState: UserType) => {
  console.log('触发了 reducer 函数')
  return prevState
}

1.5.2 接收并处理dispatch参数

// 1. 定义 action 的类型
type ActionType = { type: 'UPDATE_NAME'; payload: string }

// 2. 为 action 指定类型为 ActionType
const reducer = (prevState: UserType, action: ActionType) => {
  console.log('触发了 reducer 函数', action)

  // 3. 删掉之前的代码，再重复编写这段逻辑的时候，会出现 TS 的类型提示，非常 Nice
  switch (action.type) {
    case 'UPDATE_NAME':
      return { ...prevState, name: action.payload }
    default:
      return prevState
  }
}
//同时，在 Father 组件的 onChangeName 处理函数内，调用 dispatch() 时也有了类型提示：

const onChangeName = () => {
  dispatch({ type: 'UPDATE_NAME', payload: '测试' })
}

注意：在今后的开发中，正确的顺序是先定义 ActionType 的类型，再修改 reducer 中的 switch…case… 逻辑，最后在组件中调用 dispatch() 函数哦！这样能够充分利用 TS 的类型提示。

1.6 使用 Immer 编写更简洁的 reducer 更新逻辑

1.6.1 安装Immer

npm install immer use-immer -S

1.6.2 从 use-immer 中导入 useImmerReducer

// 1. 导入 useImmerReducer
import { useImmerReducer } from 'use-immer'
// 父组件
export const Father: React.FC = () => {
  // 2. 把 useReducer() 的调用替换成 useImmerReducer()
  const [state, dispatch] = useImmerReducer(reducer, defaultState, initAction)
}

1.6.3 case代码块汇总不再需要return

Immer 内部会复制并返回新对象

const reducer = (prevState: UserType, action: ActionType) => {
  console.log('触发了 reducer 函数', action)
  switch (action.type) {
    case 'UPDATE_NAME':
      // return { ...prevState, name: action.payload }
      prevState.name = action.payload
      break
    case 'INCREMENT':
      // return { ...prevState, age: prevState.age + action.payload }
      prevState.age += action.payload
      break
    default:
      return prevState
  }
}

二.useContext

2.1 语法格式(使用步骤)

  • 在全局创建 Context 对象
  • 在父组件中使用 Context.Provider 提供数据
  • 在子组件中使用 useContext 使用数据
import React, { useContext } from 'react'

// 全局
const MyContext = React.createContext(初始数据)

// 父组件
const Father = () => {
  return <MyContext.Provider value={{name: 'escook', age: 22}}>
    <!-- 省略其它代码 -->
  </MyContext.Provider>
}

// 子组件
const Son = () => {
  const myCtx = useContext(MyContext)
  return <div>
    <p>姓名：{myCtx.name}</p>
    <p>年龄：{MyCtx.age}</p>
  </div>
}

2.2 createContext 配合 useContext 使用

import React, { useState, useContext } from 'react'

// 声明 TS 类型
type ContextType = { count: number; setCount: React.Dispatch<React.SetStateAction<number>> }

// 1. 创建 Context 对象
const AppContext = React.createContext<ContextType>({} as ContextType)

export const LevelA: React.FC = () => {
  const [count, setCount] = useState(0)

  return (
    <div style={{ padding: 30, backgroundColor: 'lightblue', width: '50vw' }}>
      <p>count值是：{count}</p>
      <button onClick={() => setCount((prev) => prev + 1)}>+1</button>
      {/* 2. 使用 Context.Provider 向下传递数据 */}
      <AppContext.Provider value={{ count, setCount }}>
        <LevelB />
      </AppContext.Provider>
    </div>
  )
}

export const LevelB: React.FC = () => {
  return (
    <div style={{ padding: 30, backgroundColor: 'lightgreen' }}>
      <LevelC />
    </div>
  )
}

export const LevelC: React.FC = () => {
  // 3. 使用 useContext 接收数据
  const ctx = useContext(AppContext)

  return (
    <div style={{ padding: 30, backgroundColor: 'lightsalmon' }}>
      {/* 4. 使用 ctx 中的数据和方法 */}
      <p>count值是：{ctx.count}</p>
      <button onClick={() => ctx.setCount((prev) => prev + 1)}>+1</button>
      <button onClick={() => ctx.setCount(0)}>重置</button>
    </div>
  )
}

2.3 以非侵入的方式使用 Context【封装Context】

浸入的方式就是父组件中存在MyContext.Provider代码。

核心思路：每个 Context 都创建一个对应的 Wrapper 组件，在 Wrapper 组件中使用 Provider 向
children 注入数据。
注意：Wrapper组件的命名：是由Context的名称+Wrapper构成。

// 声明 TS 类型
type ContextType = { count: number; setCount: React.Dispatch<React.SetStateAction<number>> }
// 创建 Context 对象
const AppContext = React.createContext<ContextType>({} as ContextType)

// 定义独立的 Wrapper 组件，被 Wrapper 嵌套的子组件会被 Provider 注入数据
export const AppContextWrapper: React.FC<React.PropsWithChildren> = (props) => {
  // 1. 定义要共享的数据
  const [count, setCount] = useState(0)
  // 2. 使用 AppContext.Provider 向下共享数据
  return <AppContext.Provider value={{ count, setCount }}>{props.children}</AppContext.Provider>
}

App.tsx

import React from 'react'
import { AppContextWrapper, LevelA } from '@/components/use_context/01.base.tsx'

const App: React.FC = () => {
  return (
    <AppContextWrapper>
      <!-- AppContextWrapper 中嵌套使用了 LevelA 组件，形成了父子关系 -->
      <!-- LevelA 组件会被当做 children 渲染到 Wrapper 预留的插槽中 -->
      <LevelA />
    </AppContextWrapper>
  )
}

export default App
luckyPian
关注
  • 27
    点赞
  • 踩
  • 12
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
浅析React Hooks原理
weixin_50964668的博客
08-22 2612
React Hooks 简介 React Hooks 是 React 16.8 以及之后版本的产物，React Hooks 就是一堆钩子函数，不同的钩子函数提供了不同的功能，React 通过这些钩子函数对函数型组件进行增强。Hooks 允许你在不编写 class 的情况下使用状态(state)和其他 React 特性。 你还可以构建自己的 Hooks, 跨组件共享可重用的有状态逻辑。 践行代数效应 React 核心成员 Sebastian Markbåge (Hooks 的发明者)曾说：我们在 React
React Hooks
Promise_debug的博客
12-31 730
个人近期class组件用的比较多，看了一些文章结合着复习一下hooks React的组件创建方式，一种是类组件，一种是纯函数组件 纯函数组件有着类组件不具备的多种特点： 例如： 纯函数组件没有状态 纯函数组件没有生命周期 纯函数组件没有this 只能是纯函数 这就注定，我们所推崇的函数组件，只能做UI展示的功能，涉及到状态的管理与切换，我们不得不用类组件或者redux，但我们知道类组件的也是有缺点的，比如，遇到简单的页面，你的代码会显得很重，并且每创建一个类组件，都要去继承一个React实例，
React Hooks 实战案例
程序边界
10-29 5873
在 React 之前的版本中，组件要么是函数组件，要么是类组件。函数组件可以使用纯函数的方式编写，但是没有状态（state）和其他 React 特性；类组件则可以拥有状态和其他 React 特性，但是需要使用 class 语法来定义。React Hooks 就是在函数组件中引入了状态和其他 React 特性的工具。useState：在函数组件中添加状态，相当于在类组件中使用 this.state。
React Hooks详解
热门推荐
YuLong的博客
11-02 2万+
文章目录React HooksHooks简介Hook函数（9种）自定义Hooks React Hooks Hooks简介 介绍Hooks之前，首先要说一下React的组件创建方式，一种是类组件，一种是纯函数组件，并且React团队希望，组件不要变成复杂的容器，最好只是数据流的管道。开发者根据需要，组合管道即可。也就是说组件的最佳写法应该是函数，而不是类。 但是，在以往开发中类组件和纯函数组件的区别是很大的，纯函数组件有着类组件不具备的多种特点： 纯函数组件没有状态 纯函数组件没有生命周期 纯函数组件没
react hooks
weixin_41269811的博客
10-10 570
一、react hooks的作用 react hooks 是react 16.8的功能，对函数型组件进行增强，让函数组件可以存储状态，可以拥有处理副作用的能力。让开发者在不使用类组件的情况下，实现相同的功能。 二、react hook要解决的问题 react hooks的产生是为了解决react 类组件的不足，react 类组件的不足主要表现在以下方面： 缺少逻辑复用机制：react 类组件中，为了实现逻辑复用机制，通常使用的是高阶组件和渲染属性，为了实现逻辑复用，增加了无实际渲染效果的组件，增加了
React Hooks 入门指南
qq_39715380的博客
04-27 226
ReactHooks 总结
React Hooks使用实例
halations的博客
07-22 1601
使用hooks注意事项： 不能将 hooks 放在循环、条件语句或者嵌套方法内。react 是根据 hooks 出现顺序来记录对应状态的。 只在 function 组件和自定义 hooks 中使用 hooks。 命名规范： useState 返回数组的第二项以 set 开头（仅作为约定）。 自定义 hooks 以 use 开头（可被 lint 校验）。 React 中提供的 hooks： useState：setState useReducer
React Hooks的使用
Han_Zhou_Z的博客
03-28 1133
一、React Hooks的使用 1、React的组件 React的组件创建方式，一种是类组件，一种是纯函数组件 （1）类组件：class 类名 extends React.Component{} （2）函数组件：function 函数名([参数]){} 2、函数组件和类组件的区别 （1）函数组件没有状态(state)，类组件有 （2）函数组件没有生命周期,类组件有(挂载、更新、销毁) （3）函数组件没有this，类组件有 注意：函数组件更适合做UI展示，类组件更适合做复杂的业务逻辑组件
React Hooks基础用法
随风浅入画
04-15 316
React Hooks 一.React Hooks的作用 对函数组件进行增强 让函数型组件可以存储状态 可以拥有处理副作用的能力 实现类组件相同的功能 二.类组件的不足之处 缺少逻辑复用的机制 为了复用逻辑增加无实际渲染效果的组件，增加了组件层级，显示十分臃肿，增加了调试的难度以及运行效率的降低 类组件经常会变得很复杂难以维护 将一组相干的业务逻辑拆分到了多个生命周期函数中，在一个生命周期函数内，存在多个不相干的业务逻辑 类成员方法不能保证 this 指向的正确性 三.Hooks
react hooks入门
挥别了青春的博客
07-02 1096
函数组件和类组件 类组件:以class声明，拥有正常的生命周期函数，state,props 函数组件： 本质是一个函数，接受一个props为参数，只相当于一个render方法,不存在生命周期函数，也不能维护自己到state 为什么要使用hooks 可以让传统的函数组件有内部状态state，并且可以通过一些hooks来模拟/替换class组件中的生命周期函数。 在传统的react开发流程中，我们的自定义组件通常需要定义几个生命周期函数，在不同的生命周期处理各自的业务逻辑，有很多情况下他们是重复的。使用h
详解如何使用React Hooks请求数据并渲染
01-18
在以往使用React Class组件的时候，这种操作我们已经很熟悉了，即在Class组件的componentDidMount中通过ajax来获取数据并setState，触发组件更新。 随着Hook的到来，我们可以在一些场景中使用Hook的写法来替代Class...
记录一次完整的react hooks实践
10-17
React Hooks是React团队在16.8版本引入的一个新特性，它允许开发者在不编写类组件的情况下使用状态（state）和其他React特性。Hooks提供了更好的代码复用性和逻辑组织，使得函数组件更加灵活和强大。 ### React ...
使用 React Hooks 重构你的小程序.pdf
08-21
React Hooks 是 React 16.8 版本引入的一组新特性，允许在不编写类组件的情况下使用 React 的状态和其他特性。在小程序的开发中，React Hooks 可以大大简化代码结构，提高代码复用性和可维护性。 一、React Hooks ...
【2024】JAVA实现响应式编程Reactor具体API文档使用说明
weixin_52315708的博客
09-05 1609
响应式编程 (Reactive Programming) 是一种声明式编程范式，专注于数据流和变化的传播。随着软件系统日益复杂，对高并发、实时性和弹性的需求不断增长，响应式编程正逐渐成为主流。特别从Spring Boot3开始逐渐越来越重视使用，并且Spring框架为了全面拥抱响应式编程，提供了Spring WebFlux、Spring Data Reactive等模块，为Java开发者构建响应式应用提供了强大的支持。
react js 笔记 3
waterHBO的博客
09-08 447
如果 object 是 null 或 undefined，那么表达式会立即返回 undefined, 而不报错。自己写的笔记，需要反复多看几遍， 每天都翻翻， 适当的地方进行修改， 很熟悉的地方就删掉。const [状态名称，, 设置状态函数] = useState(默认的状态值)学习 react js 的时候， 就专注这一方面 ，其他都不要碰。useState(这里也可以传入一个函数！用于初始化，只会执行一次！笔记写的有点乱，没关系的。语法是: object?这个语法，js 和 ts 都有。
React+Nest实现无感登录
DogEgg_001的博客
09-05 874
access_token用于带到请求头进行权限请求 当后端检测到过期时，通知前端acess_token已过期(401) 前端携带refresh_token发起刷新请求，后端根据refresh_token发送新的access_token 如果refresh_token也过期，就返回401给前端，通知前端退出登录
【React】常用的自定义 hooks
最新发布
小秀的博客
09-08 578
自定义 hooks 或者第三方 hooks，抽离公共部分，复用代码。
react文件详情
m0_74358570的博客
09-04 475
react文件详情
react hooks二级路由
09-07
React Hooks 是 React 16.8 版本引入的新特性，它允许我们在无需编写类组件的情况下使用状态和其他 React 特性。对于二级路由的实现，我们可以使用 React Router 来管理路由。 首先，确保你已经安装了 `react-...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值