React Hook使用之UseReduce

最新推荐文章于 2024-07-14 22:19:48 发布
最新推荐文章于 2024-07-14 22:19:48 发布
阅读量1.4k 收藏
点赞数
分类专栏： React Hook学习以及常见用法详解 文章标签： react.js javascript 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/u013093547/article/details/123282582
版权

什么是useReduce?

useReduce是useState的替代方案。它接收一个形如 (state, action) => newState 的 reducer，并返回当前的 state 以及与其配套的 dispatch 方法。（如果你熟悉 Redux 的话，就已经知道它如何工作了。）

在某些场景下，useReducer 会比 useState 更适用，例如 state 逻辑较复杂且包含多个子值，或者下一个 state 依赖于之前的 state 等。并且，使用 useReducer 还能给那些会触发深更新的组件做性能优化，因为你可以向子组件传递 dispatch 而不是回调函数。

useReduce定义文件

 function useReducer<R extends ReducerWithoutAction<any>, I
了解本专栏 订阅专栏 解锁全文 超级会员免费看
iloveozz
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
订阅专栏
React Hooks常规使用
weixin_45679977的博客
07-25 329
<div ref={myRef} />
React Hooks 之 useFetch
weixin_33973609的博客
05-20 3454
前言 自 React Hooks 16.8.0 后带来了 React hooks 这一特性。这一特性在没有破坏性的更新下为我们带来了更加舒爽的开发方式。过去我们常常因providers，consumers，高阶组件，render props 等形成“嵌套地狱”。尽管 Class Component 在某种程度上为我们提供了更方便的写法以及生命周期，但同时也带来了一些不好的地方。例如难以理解的 c...
React Hook 入门到精通（ useState | useReduce、useEffect、useContext、useRef、useCallback | useMemo ）
weixin_38300263的博客
09-12 1507
Hook是 React 16.8 的新增特性。它可以让你在不编写 class 的情况下使用 state 以及其他的 React 特性。 useState | useReduce 的使用 import React, { useState, useReducer } from 'react' // 创建reduce const ageReduce = (state, action) => { switch (action.type) { case 'add': retur.
React useReduce useCallback使用
weixin_44530344的博客
09-18 775
Reducer横空出世，reduce单词中文意味减少，而reducer我觉得可以翻译为“当你的state的过于复杂时，你就可以使用的可以对state进行整合的工具”。当然这是个玩笑话，个人认为Reducer可以翻译为“整合器”，它的作用就是将那些和同一个state相关的所有函数都整合到一起，方便在组件中进行调用。当然工具都有其使用场景，Reducer也不例外，它只适用于那些比较复杂的state，对于简单的state使用Reducer只能是徒增烦恼。
usereduce reducer使用
m0_59539177的博客
04-20 907
实现一个状态可以加减 👇函数就是retucer 特点：参数1是状态的值，参数2是如何控制这个值 function contRducer（state ，action）｛ switch（action.type）｛ case “add”： return state+1 case “sub”： return state-1 default ...
React 组件中的数据状态管理
qq_45669178的博客
08-03 188
theme: smartblue highlight: monokai 前言： React 组件封装时数据管理，很多情况下，都是基于 props 进行一步步的传值，进行维护时有以下几个缺点： ① 传入层数过多时，在最内层无法很好理解当前参数的含义； ② 当 props 传入到中间组件时，如果改变了当前父组件传入的值，在后面的子组件更加难以理解，他为什么改变； ③ 取值的方式地方各种...
React中使用useReducer模拟实现redux管理React组件状态
white-hang的博客
03-25 507
React中使用useReducer模拟实现redux管理React组件状态
react hook使用分享
10-13
React Hook 使用分享 React Hook 是 React 框架中的一种新式状态管理方案，旨在解决逻辑复用问题。下面是对 React Hook 的使用分享，包括为什么要用 Hook、Hook 与其他方案的对比、Hook 的使用技巧等。 一、为什么...
用于WebSocket通信的React Hook-React开发
05-27
在StackBlitz中进行测试React Hook旨在为您的React组件提供强大的WebSocket集成。 对SocketIO的实验性支持（有关更多信息，请参见下面的文档）欢迎请求请求！ v2中的新增功能useWebSocket现在返回一个对象，而不是
React Hook 强制您的功能组件更新。
06-08
useForceUpdate useForceUpdate 是一个 React Hook，它强制您的函数组件重新渲染。 useForceUpdate 本身没有任何用途。 它是一个小包，旨在集成到更大的钩子中，使仍然依赖 this.forceUpdate() 的任何类功能过时。 ...
使用 profunctor 镜头进行状态管理的 React Hook
06-08
Profunctor State Hook React Hook 使用 Profunctor Optics 进行状态管理 一种简单而小巧（2KB！）的 React 状态管理方法，使用功能透镜（一种 profunctor 光学）。 镜头由两个函数组成：get（就像 Redux 中的选择器...
react-跟踪网络状态的Reacthook
08-15
本文将深入探讨这个React Hook的工作原理、使用方法以及它如何帮助我们构建更健壮的Web应用。 首先，了解网络状态的变化是至关重要的。在浏览器中，网络状态可以分为离线（offline）和在线（online）两种。传统的...
react 之 UseReducer
Jasmin博客
02-01 695
做法：分派action时如果想要传递参数，需要在action对象中添加一个payload参数，放置状态参数。分派action传参。
useReducer 介绍和基本使用
热门推荐
Jas3000的博客
04-14 2万+
一、前言 useReducer 是 useState 的替代方案。它接收一个形如 (state, action) => newState 的 reducer，并返回当前的 state 以及与其配套的 dispatch 方法。（如果你熟悉 Redux 的话，就已经知道它如何工作了。） const [state, dispatch] = useReducer(reducer, initialArg, init); useReducer接收两个参数： 第一个参数：reducer函数。 第二个参数：初始化
这一次彻底搞定useReducer-使用篇
weixin_34112030的博客
06-17 1741
useReducer-基础概念篇 useReducer-使用篇 useReducer-配合useContext使用 我们在第一篇文章中介绍了JavaScript中的reducer以及他的一些特点，对reducer不熟悉的小伙伴可以先看看第一篇。 React Hook功能正式发布之后，允许在function component中拥有state和副作用（useEffect）。官方提供了两种state管...
react hook学习8-useReduce的使用
qq_41632427的博客
10-09 276
前端
react 里面的Reducer
Tcscsdn的博客
11-16 1910
然后 Reducer Hook这个组件导入React.createContext创建的这个ts文件然后通过组合（props.children）这个方法成为生产者。Reducer这个Hook里面有三个参数第一个是一个回调函数，第二个是一个对象，第三个也是一个回调函数修改第二个参数对象里面的内容然后直接返回给第一个回调函数。后面的组件如果想使用Reducer仓库的话就可以引入React.createContext文件直接使用useContext这个Hook就可以啦。需要结合useContext和组合才能实现。
React useState和useReducer不同的应用场景思考
热水钟博客
05-11 2764
一、useState和useReducer都是用来管理state的，useReducer更多的时候与useContext搭配起来用。 useState： 原来的类组件只支持一个setState方法，useState把各个状态独立分开管理，提供了更细的粒颗度模块化管理。 useReducer： 是阉割版的 redux，只缺省一个状态的共享能力，与useContext 搭配刚刚好。useReducer适合局部数据流。 其实useState是useReducer的一个子集，useState 返回...
React学习笔记02-----React基本使用
最新发布
m0_67357141的博客
07-14 386
想实现页面的，而不是整个网页的刷新。AJAX+DOM可以实现局部刷新。
react hook使用context
08-23
在React中，使用上下文（context）可以方便地在组件之间共享数据。通过使用React的Hooks中的useContext钩子，我们可以更简单地使用上下文。 首先，我们需要创建一个上下文对象，可以使用React的createContext函数来创建。这个上下文对象可以包含我们想要共享的任何类型的数据。 然后，在函数组件中使用useContext钩子来读取上下文的值。使用useContext时，我们需要将上下文对象作为参数传递给它，它将返回上下文的当前值。 需要注意的是，尽管可以使用useContext读取上下文的值，但我们仍然需要在上层组件树中使用<MyContext.Provider>来为下层组件提供上下文。这个<MyContext.Provider>组件接收一个value属性，用于传递上下文的值给子组件。 下面是一个使用原始写法和使用context hook写法的例子： 原始写法： ``` import React from 'react'; // 创建一个上下文，初始化值 const MyContext = React.createContext({name: 'twinkle', age: 18}); // 文本组件 function TextComp() { return ( <> <MyContext.Consumer> {value => ( <> <p>名字：{value.name}</p> <p>年龄：{value.age}</p> </> )} </MyContext.Consumer> </> ); } // 测试组件 export default function TestContextComp() { return ( <div> <MyContext.Provider value={{name: 'cll', age: 18}}> <TextComp/> </MyContext.Provider> </div> ); } ``` 使用context hook写法： ``` import React, { useContext } from 'react'; // 上下文数据的结构 interface ICtxP { name: string; age: number; } // 创建一个上下文 const MyContext = React.createContext<ICtxP>({ name: 'twinkle', age: 18 }); // 文本组件 function TextComp() { const value = useContext(MyContext); // 使用上下文hook return ( <> <p>名字： {value.name}</p> <p>年龄： {value.age}</p> </> ); } export default function TextContextHook() { return ( <div> <MyContext.Provider value={{ name: 'cll', age: 18 }}> <TextComp/> </MyContext.Provider> </div> ); } ``` 无论是原始写法还是使用context hook写法，它们都可以实现在React中使用上下文来共享数据。使用context hook写法可以减少代码量并简化组件的结构，使其更加简洁和易于理解。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* *2* *3* [react 进阶hook 之 context Hook](https://blog.csdn.net/qq_41499782/article/details/115493691)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 100%"] [ .reference_list ]

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值