当前位置:   article > 正文

React-Redux结合@Reduxjs/Toolkit实现函数组件化(数据持久化,刷新页面数据不丢)

React-Redux结合@Reduxjs/Toolkit实现函数组件化(数据持久化,刷新页面数据不丢)

函数式组件和类式组件的优缺点儿

函数组件(Function Component)和类组件(Class Component)是React中的两种定义组件的方式。函数组件是以一个函数的方式定义组件,而类组件则是以ES6的类继承React.Component来定义组件。

函数组件的优点:

1.更简单的代码,无需使用this关键字。
2.更容易理解和调试,因为它们是纯函数。
3.更好的性能,因为它们不支持shouldComponentUpdate生命周期钩子。
默认的性能优化,如React Fiber的diff算法会更好地处理函数组件。

函数组件的缺点:

1.缺乏状态(state),需要使用hooks API(如useState)。
2.缺乏生命周期方法,需要使用hooks API(如useEffect)或者将函数组件转换为类组件。
3.不支持refs。

类组件的优点:

1.支持更多的React特性,如状态(state),生命周期方法,refs等。
2.可以在任何生命周期中使用this.setState来更新状态,而不需要考虑是否在合成事件中。
3.类组件可以复用状态逻辑和生命周期逻辑,通过高阶组件等方式。

类组件的缺点:

1.需要使用this关键字,可能会导致this指向问题。

2.类组件在每次渲染时都会创建一个新的实例,可能会影响性能。
3.代码可能会更复杂,因为需要处理this和生命周期方法。
在新的React项目中,推荐使用函数组件,特别是对于简单的组件,因为它们更易于理解和维护。但是,当需要使用state、refs或生命周期方法时,就应该使用类组件或hooks

代码示例

主入口文件index.js 代码配置项如下:
import ReactDOM from "react-dom/client";
import React from "react";
import App from "./App";
import { Provider } from "react-redux";
//数据持久化,刷新页面数据不丢
import { PersistGate } from "redux-persist/integration/react";
//store 存储及数据持久化
import { store, persistor } from "./store/index";
const root = ReactDOM.createRoot(document.getElementById("root"));

root.render(
  <React.StrictMode>
    {/* 全局提供核心 store */}
    <Provider store={store}>
      {/* 提供持久化入口 */}
      <PersistGate loading={null} persistor={persistor}>
        <App></App>
      </PersistGate>
    </Provider>
  </React.StrictMode>
);
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
Store 核心文件代码配置如下:
import { configureStore, combineReducers } from "@reduxjs/toolkit";
import personReducer from "./reducers/personReducer";
import { persistStore, persistReducer } from "redux-persist";
// import storage from 'redux-persist/lib/storage'; // 使用local storage来持久化存储
import storageSession from "redux-persist/lib/storage/session"; // 使用session  storage 临时会话模式

// 定义root reducer
const rootReducer = {
  person: personReducer,
};

// 配置持久化选项,localStorage模式
const persistConfig = {
  key: "root",
  // storage:storage,//local storage 存储模式
  storage: storageSession, //session storage 会话模式存储模式存储
};
//让所有的reducer,持久化
const persistedReducer = persistReducer(
  persistConfig,
  combineReducers({ person: personReducer })
);
export const store = configureStore({
  reducer: persistedReducer,
  middleware: (getDefaultMiddleware) =>
    getDefaultMiddleware({
      serializableCheck: false,
    }),
});
//导出持久化配置
export const persistor = persistStore(store);

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
store 目录下 reducer 目录下personReducer.js配置如下:
import { createSlice } from "@reduxjs/toolkit";

const personSlice = createSlice({
  name: "person",
  initialState: {
    personList: [],
  },
  reducers: {
    addPerson: (state, action) => {
      state.personList = [action.payload, ...state.personList];
    },
  },
});

//分别导出所有的工作
export const { addPerson } = personSlice.actions;
//默认导出reducer动作
export default personSlice.reducer;

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19

####### Person.js 页面组件代码如下:

import { useRef, useState } from "react";
import { useSelector, useDispatch } from "react-redux";
import { nanoid } from "nanoid";
import { addPerson } from "../../store/reducers/personReducer";
export default function Person() {
  //通过ref 方式获取用户名称
  const userNameRef = useRef();
  //通过受控组件模式获取年龄
  const [age, setAge] = useState(0);
  //通过useSelect获取state
  const personList = useSelector((state) => state.person.personList);
  //通过调用useDispatch 分发action
  const dispatch = useDispatch();

  //添加用户
  function addUser() {
    const obj = { userName: userNameRef.current.value, age: age, id: nanoid() };
    //分派,分发
    dispatch(addPerson(obj));
  }
  //通过受控组件的模式获取年龄的值
  function getAgeValue(e) {
    setAge(e.target.value);
  }
  return (
    <div>
      <div>
        <label htmlFor="userName">用户名:</label>
        <input type="text" id="userName" name="userName" ref={userNameRef} />
      </div>
      <div>
        <label htmlFor="age">年龄:</label>
        <input type="text" id="age" name="age" onChange={getAgeValue} />
      </div>
      <div>
        <button onClick={addUser}>添加用户</button>
        <button>异步获取用户信息</button>
      </div>
      <hr />
      <div>用户信息显示:</div>
      <ul>
        {personList.map((item) => {
          return (
            <li key={item.id}>
              {item.userName}-{item.age}-{item.id}
            </li>
          );
        })}
      </ul>
    </div>
  );
}

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44
  • 45
  • 46
  • 47
  • 48
  • 49
  • 50
  • 51
  • 52
  • 53
页面效果如下:

在这里插入图片描述

声明:本文内容由网友自发贡献,不代表【wpsshop博客】立场,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:https://www.wpsshop.cn/w/菜鸟追梦旅行/article/detail/612090
推荐阅读
相关标签
  

闽ICP备14008679号