一文详解Redux Hooks的使用细节

Hooks Redux React 2022-11-22 23:11:56 520人浏览薄情痞子

摘要

在Redux7.1开始，提供了Hook的方式，在函数组件中再也不需要编写connect以及对应的映射函数了useSelector的作用是将state映射到组件中:参数一: 要求传入一个回调函数, 会将state传递到该回调函数中;

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

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

参数一: 要求传入一个回调函数, 会将state传递到该回调函数中; 回调函数的返回值要求是一个对象, 在对象编写要使用的数据, 我们可以直接对这个返回的对象进行解构, 拿到我们要使用state中的数据
const { counter } = useSelector((state) => { return { counter: state.counter.counter } })
参数二: 可以进行比较来决定是否组件重新渲染;

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.js

import { 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.actions

export default counterSlice.reducer

// store/index.js

import { 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'

// 子组件Home
const 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>
  )
})


// 根组件App
const 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'

// 子组件Home
const 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>
  )
})


// 根组件App
const 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

以上就是一文详解Redux Hooks的使用细节的详细内容，更多请关注编程网其它相关文章！

点击免费下载>>软考高级考试备考技巧/历年真题/备考精华资料

--结束END--

本文标题: 一文详解Redux Hooks的使用细节

本文链接: https://www.lsjlt.com/news/173491.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑，方便收藏和打印～

下载Word文档

去做题

猜你喜欢

小程序速报[No.90] | 小程序最新资讯，错过还要等2周

⭐本期内容速览：1、平台支付手续费调整通知2、关于canvas v2 保存图片的实现3、小程序变现锦囊：交易解决方案上线，新能力助力好生意4、交易类目限制订单金额及账期调整通知5、助力留资转化率，留资组件内测开启6、官方小程序上线，提升经营...

99+

2024-05-14

头条抖音小程序更新
代码级质量技术之基本框架介绍

一、背景代码级质量技术：顾名思义为了服务质量更好，涉及到代码层面的相关技术，特别要指出的是，代码级质量技术不单纯指代码召回技术，如静态代码扫描、单元测试等。研究代码级质量技术主要有以下几个方面的原因：1、随着精准测试等概念的兴起，对代码覆盖...

99+

2024-05-14

代码级质量框架
jquery清除同级div

随着Web应用不断复杂，JavaScript框架变得越来越重要。其中最受欢迎的框架之一是jQuery，jQuery是一个流行的JavaScript库，它可以使处理文档元素、处理事件和创建特效更加容易。在这篇文章中，我们将学习如何使用jQue...

99+

2024-05-14
jquery 查询筛选

JQuery是一款非常优秀的JavaScript库，提供了许多便捷的方法使得前端开发变得更加快捷高效。在JQuery中，查询筛选是其最常用的功能之一，本文将详细介绍JQuery查询筛选的相关部分。一、概述JQuery的查询筛选机制是其最重要...

99+

2024-05-14
jquery 图片无法显示

在网页开发过程中，经常会用到图片来丰富页面内容，但有时会出现图片无法显示的情况，这个问题通常与文件路径或文件名有关。本文将介绍使用 jQuery 快速解决图片无法显示的问题。一、确认图片文件路径最常见的原因是图片文件路径错误或者图片文件不存...

99+

2024-05-14
jquery移除只读

在使用HTML表单时，经常需要将一些输入框设置为只读状态，以防止用户对这些信息进行修改。但有时候需要在特定情况下，将这些输入框的只读属性移除，以便用户可以进行修改或编辑。这时候就需要使用jQuery来移除只读属性。jQuery是一种Java...

99+

2024-05-14
vue选择地址怎么做

Vue是一种流行的JavaScript框架，用于构建交互式Web应用程序。在许多Web应用程序中，选择地址是常见的功能需求。本文将介绍如何使用Vue实现选择地址，包括如何使用第三方库和如何自定义Vue组件。一、使用第三方库一个常见的选择地址...

99+

2024-05-14
VUe双中括号属性如何使用

Vue是一种流行的JavaScript框架，它使用双花括号（“{{”和“}}”）语法来实现属性与视图之间的数据绑定。VUe框架中的模板显示了被框架监控的变量的特定属性，当这些变量的值改变时，这些属性也跟随改变，从而在视图中自动更新相应的值。...

99+

2024-05-14
vue refs 方法参数

随着前端技术的不断发展，Vue框架毫无疑问成为了前端框架中最受欢迎的一种。Vue组件的复杂性也越来越高，因此，Vue框架提供了许多API来使得开发更加灵活和高效。其中之一就是refs方法。refs 方法用于在Vue中访问组件的实例或元素。这...

99+

2024-05-14
vue.js函数求和

Vue.js是一个流行的JavaScript框架，它使得前端开发变得更容易和更快速。在Vue.js中，我们可以通过函数来实现对数据的操作，并实现一些加减乘除等简单的数学计算。本文将介绍如何使用Vue.js实现一个函数求和功能。首先，我们需要...

99+

2024-05-14