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 代码配置项如下:
javascript 复制代码
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>
);
Store 核心文件代码配置如下:
javascript 复制代码
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);
store 目录下 reducer 目录下personReducer.js配置如下:
javascript 复制代码
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;

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

javascript 复制代码
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>
  );
}
页面效果如下:
相关推荐
前端小小王30 分钟前
React Hooks
前端·javascript·react.js
迷途小码农零零发39 分钟前
react中使用ResizeObserver来观察元素的size变化
前端·javascript·react.js
娃哈哈哈哈呀1 小时前
vue中的css深度选择器v-deep 配合!important
前端·css·vue.js
旭东怪2 小时前
EasyPoi 使用$fe:模板语法生成Word动态行
java·前端·word
ekskef_sef3 小时前
32岁前端干了8年,是继续做前端开发,还是转其它工作
前端
sunshine6413 小时前
【CSS】实现tag选中对钩样式
前端·css·css3
真滴book理喻4 小时前
Vue(四)
前端·javascript·vue.js
蜜獾云4 小时前
npm淘宝镜像
前端·npm·node.js
dz88i84 小时前
修改npm镜像源
前端·npm·node.js
Jiaberrr4 小时前
解锁 GitBook 的奥秘:从入门到精通之旅
前端·gitbook