位置: IT常识 - 正文

React - Redux Hooks的使用细节详解

编辑:rootadmin
React - Redux Hooks的使用细节详解 文章目录Redux HooksRedux中Hooks介绍Redux中Hooks使用Redux HooksRedux中Hooks介绍

推荐整理分享React - Redux Hooks的使用细节详解,希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:,内容如对您有帮助,希望把文章链接给更多的朋友!

在之前的redux开发中,为了让组件和redux结合起来,我们使用了react-redux库中的connect:

但是这种方式必须使用高阶函数结合返回的高阶组件;

并且必须编写:mapStateToProps和 mapDispatchToProps映射的函数, 具体使用方式在前面文章有讲解;

在Redux7.1开始,提供了Hook的方式,在函数组件中再也不需要编写connect以及对应的映射函数了

useSelector的作用是将state映射到组件中:

参数一: 要求传入一个回调函数, 会将state传递到该回调函数中; 回调函数的返回值要求是一个对象, 在对象编写要使用的数据, 我们可以直接对这个返回的对象进行解构, 拿到我们要使用state中的数据

const { counter } = useSelector((state) => { return { counter: state.counter.counter }})

参数二: 可以进行比较来决定是否组件重新渲染;

React - Redux Hooks的使用细节详解

useSelector默认会比较我们返回的两个对象是否相等;

如何可以比较呢?

在useSelector的第二个参数中, 传入react-redux库中的shallowEqual函数就可以进行比较import { shallowEqual } from 'react-redux'const { counter } = useSelector((state) => ({ counter: state.counter.counter}), shallowEqual)

也就是我们必须返回两个完全相等的对象才可以不引起重新渲染;

useDispatch非常简单,就是调用useDispatch这个Hook, 就可以直接获取到dispatch函数,之后在组件中直接使用即可;

const dispatch = useDispatch()

我们还可以通过useStore来获取当前的store对象(了解即可, 不建议直接操作store对象);

Redux中Hooks使用

我们来使用Redux的Hooks在App组件实现一个计数器, 在App的子组件中实现一个修改message的案例:

首先我们先创建一个简单的store

// store/modules/counter.jsimport { createSlice } from "@reduxjs/toolkit";const counterSlice = createSlice({ name: "counter", initialState: { counter: 10, message: "Hello World" }, reducers: { changeNumberAction(state, { payload }) { state.counter = state.counter + payload }, changeMessageAction(state, {payload }) { state.message = payload } }})export const { changeNumberAction, changeMessageAction } = counterSlice.actionsexport default counterSlice.reducer// store/index.jsimport { configureStore } from "@reduxjs/toolkit";import counterSlice from "./modules/counter"const store = configureStore({ reducer: { counter: counterSlice }})export default store

要使用react-redux库需要导入Provider对App组件进行包裹

import React from "react"import ReactDOM from "react-dom/client"import { Provider } from "react-redux"import App from "./12_Redux中的Hooks/App"import store from "./12_Redux中的Hooks/store"const root = ReactDOM.createRoot(document.querySelector("#root"))root.render( <Provider store={store}> <App/> </Provider>)

在组件时使用useSelector和useDispatch实现获取store中的数据和修改store中数据的操作

import React, { memo } from 'react'import { useDispatch, useSelector } from 'react-redux'import { changeMessageAction, changeNumberAction } from './store/modules/counter'// 子组件Homeconst Home = memo(() => { console.log("Home组件重新渲染") // 通过useSelector获取到store中的数据 const { message } = useSelector((state) => ({ message: state.counter.message })) // useDispatch获取到dispatch函数 const dispatch = useDispatch() function changeMessage() { dispatch(changeMessageAction("Hello ChenYq")) } return ( <div> <h2>{message}</h2> <button onClick={changeMessage}>修改message</button> </div> )})// 根组件Appconst App = memo(() => { console.log("App组件重新渲染") // 通过useSelector获取到store中的数据 const { counter } = useSelector((state) => ({ counter: state.counter.counter })) // useDispatch获取到dispatch函数 const dispatch = useDispatch() function changeNumber(num) { dispatch(changeNumberAction(num)) } return ( <div> <h2>当前计数: {counter}</h2> <button onClick={() => changeNumber(1)}>+1</button> <button onClick={() => changeNumber(-1)}>-1</button> <Home/> </div> )})export default App

现在我们已经在组件中使用并且修改了了store中的数据, 但是现在还有一个小问题(性能优化)

当App组件中修改了counter时, App组件会重新渲染这个是没问题的; 但是Home组件中使用的是message, 并没有使用counter, 却也会重新渲染; 同样的在Home子组件中修改了message, 根组件App也会重新渲染; 这是因为在默认情况下useSelector是监听的整个state, 当state发生改变就会导致组件重新渲染

要解决这个问题就需要使用useSelector的第二个参数来控制是否需要重新渲染, 我们只需要在useSelector函数中传入react-redux库中的shallowEqual函数即可, 它内部会自动进行一个浅层比较, 当使用的state中的数据确实发生变化的时候才会重新渲染

import React, { memo } from 'react'import { useDispatch, useSelector, shallowEqual } from 'react-redux'import { changeMessageAction, changeNumberAction } from './store/modules/counter'// 子组件Homeconst Home = memo(() => { console.log("Home组件重新渲染") const { message } = useSelector((state) => ({ message: state.counter.message }), shallowEqual) const dispatch = useDispatch() function changeMessage() { dispatch(changeMessageAction("Hello ChenYq")) } return ( <div> <h2>{message}</h2> <button onClick={changeMessage}>修改message</button> </div> )})// 根组件Appconst App = memo(() => { console.log("App组件重新渲染") // 通过useSelector获取到store中的数据 const { counter } = useSelector((state) => ({ counter: state.counter.counter }), shallowEqual) // useDispatch获取到dispatch函数 const dispatch = useDispatch() function changeNumber(num) { dispatch(changeNumberAction(num)) } return ( <div> <h2>当前计数: {counter}</h2> <button onClick={() => changeNumber(1)}>+1</button> <button onClick={() => changeNumber(-1)}>-1</button> <Home/> </div> )})export default App
本文链接地址:https://www.jiuchutong.com/zhishi/300197.html 转载请保留说明!

上一篇:Tomcat服务器部署+Web项目搭建(tomcat服务器在哪个位置)

下一篇:翻译: 详细图解Transformer多头自注意力机制 Attention Is All You Need(图幅翻译)

  • 私车公用的税务风险
  • 预缴所得税退回
  • 减免附加税怎么填报
  • 母子公司合并报表的条件
  • 进项税额记哪方
  • 鉴证服务的税率有哪些
  • 房地产企业预缴土地增值税
  • 固定资产遭受自然灾害账务处理
  • 出口退税收入做什么科目
  • 广告费收入是不是非税收入
  • 跨年销售收入退回增值税处理
  • 航天金税交499
  • 企业出租设备取得租金收入要交增值税吗
  • 解聘职工赔偿工资包括哪些
  • 2018年个体工商户增值税起征点
  • 房贷利息在哪里能看到
  • 进项虚假怎么处理
  • 现金流量表根据什么原则编制
  • 停车费可以抵扣吗合法吗
  • 专票的六位开票代码指的是什么
  • 利息收入是否缴纳印花税
  • 预付账款为什么是资产
  • 息税前利润和税后经营净利润
  • 联想随身充评测
  • 代发工资如何合理避税
  • 税务登记后每个月交什么钱
  • 赔偿款财务如何做账
  • flex布局子元素height100
  • 固定资产的计量属性
  • 斑鹿,滕波尔国家公园,印度 (© Ondrej Prosicky/Shutterstock)
  • nginx同一个端口设置两个网站
  • 个人独资企业的特点
  • 实发工资知道如何发放吗
  • day15-Servlet04
  • python中mktime函数
  • 给员工进行拓展活动
  • 原材料结转成本有几种方法
  • 投资款不打入公司账户可以吗
  • winXP系统安装SQLServer2005开发版具体过程与注意问题
  • 长期股权投资其他资本公积
  • 教育行业税收优惠政策2022
  • 一次性扣除固定资产出售处理
  • 会计法中单位负责人均指法定代表人
  • 出口报关金额怎么算
  • 增值税退税是否算主营业务收入
  • 公司注销实收资本账务处理
  • 加油站固定资产折旧方法
  • 首次购买金税盘及服务费的账务处理
  • 存货入库无法查明原因的短缺
  • 公司购买防疫物资的申请
  • 银行手续费没拿可以退吗
  • 负债清偿损益明细表计税基础怎么填
  • 递延所得税资产和递延所得税负债
  • 股东变更需要哪些资料和手续
  • access数据库sql语言
  • SQL直接操作excel表(查询/导入/插入)
  • 一个报表的格式主要包括( )
  • linux oos
  • win2003服务器管理
  • linux多线程并发的处理方式
  • cmdexe文件损坏
  • win8.1系统更新后启动不了
  • win8开始屏幕设置
  • 安装win 7系统
  • win7系统安装谷歌浏览器
  • 进程 内核栈
  • pphelper是什么文件
  • unity项目中的资源
  • node.js axios
  • fat32和fat16
  • cmd更改文件属性
  • css实战案例
  • 获取nodejs命令行信息
  • node. js教程
  • c语言 ls
  • 投诉10080 48小时都没有回复
  • 蒲河大集是什么多少号沈阳大集各个大集多少号
  • 个人意外所得税税率
  • 湖北职称网上申请流程
  • 深圳市国家税务局
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设