Redux Hooks怎样运用 有哪些要注意的细节呢
|
这篇文章主要讲解了“Redux Hooks怎样使用，有哪些要注意的细节呢”，文中的讲解内容简单、清晰、详细，对大家学习或是工作可能会有一定的帮助，希望大家阅读完这篇文章能有所收获。下面就请大家跟着小编的思路一起来学习一下吧。 Redux Hooks 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 } }) 登录后复制 参数二: 可以进行比较来决定是否组件重新渲染; 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怎样使用，有哪些要注意的细节呢”的文章就介绍到这了,更多相关的内容，小编将为大家输出更多高质量的实用文章！ （编辑：银川站长网） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |
