React 之 Redux =》理解+应用

🕗 发布于 2024-12-29 05:47 react.js 前端 javascript Redux Redux 中间件

Redux基础介绍

一、概述

Redux是一个可预测的JavaScript应用程序状态管理容器。它主要用于JavaScript应用，特别是在React、Angular、Vue等框架中，但也可以与其他视图库一起使用。Redux遵循单向数据流的原则，使得应用的状态变化可预测，方便调试和维护。

二、元素组成

1. Action（动作）

定义：是一个包含type属性的普通JavaScript对象，用于描述发生了什么事情。type通常是一个字符串常量，用于唯一标识这个动作。例如：

const ADD_TODO = 'ADD_TODO';
const addTodo = (text) => {
    return {
        type: ADD_TODO,
        payload: text
    };
}

作用：它是改变状态的唯一途径，就像一个“指令”，告诉Redux需要进行什么样的操作。

2. Reducer（纯函数）

定义：是一个纯函数，它接收两个参数，当前的state（应用的状态）和一个action。根据action的type来决定如何更新state，并返回新的state。例如：

const initialState = {
    todos: []
};
const todoReducer = (state = initialState, action) => {
    switch (action.type) {
        case ADD_TODO:
            return {
               ...state,
                todos: [...state.todos, {text: action.payload, completed: false}]
            };
        default:
            return state;
    }
}

特点：
- 纯函数特性：给定相同的输入（相同的state和action），总是返回相同的输出。没有副作用，如不会修改传入的参数，不会进行异步操作，也不会直接操作DOM。
- 不可变性：在更新state时，应该返回一个新的对象，而不是直接修改原有的state。这有助于追踪状态的变化，并且在React等视图层中可以更高效地检测组件是否需要重新渲染。

3. Store（仓库）

定义：是一个对象，它将action和reducer联系在一起。通过createStore函数创建（在Redux核心库中）。例如：

import { createStore } from 'redux';
const store = createStore(todoReducer);

功能：
- 保存状态：它存储着整个应用的状态树。可以通过store.getState()方法获取当前的状态。
- 分发动作：提供store.dispatch(action)方法，用于将action发送给reducer，从而触发状态的更新。
- 订阅更新：通过store.subscribe(listener)方法，可以订阅状态的变化。当状态更新时，会调用listener函数，通常用于更新UI等操作。

三、原理结构

Redux的工作流程是单向数据流：

动作触发：视图层（如React组件）通过用户交互或者其他事件（例如点击按钮）触发一个action。
动作分发：这个action被store.dispatch()方法分发到reducer。
状态更新：reducer根据传入的action和当前state，计算并返回一个新的state。这个新的state会替换掉旧的state存储在store中。
通知订阅者：store会通知所有订阅了状态变化的监听器（通过store.subscribe()注册的函数）。这些监听器通常会更新视图层，使得UI能够反映最新的状态。

四、场景应用

1. 大型复杂的单页应用（SPA）

在大型SPA中，应用状态可能会非常复杂，涉及多个模块和组件之间的交互。例如，一个电商单页应用，有商品列表展示、购物车管理、用户登录状态等多个功能模块。
商品列表：当用户进行搜索操作时，会触发一个SEARCH_PRODUCTS类型的action，reducer会根据这个action更新商品列表的状态。
购物车管理：添加商品到购物车会触发ADD_TO_CART类型的action，从购物车移除商品会触发REMOVE_FROM_CART等动作，这些动作通过reducer来更新购物车状态。Redux可以很好地管理这些复杂的状态变化，确保每个模块的状态更新是可预测的。

2. 多用户协作的应用

考虑一个实时文档编辑应用，多个用户可以同时编辑一个文档。
当一个用户输入内容时，会触发UPDATE_DOCUMENT类型的action。Redux可以协调各个用户的操作，通过服务器同步数据，使得每个用户看到的文档状态都是最新的。reducer会根据这些操作更新文档的内容状态，并且通过store的订阅机制，及时更新每个用户的视图。

3. 数据持久化和缓存管理

对于一些需要离线支持或者频繁请求相同数据的应用。例如，一个新闻阅读应用，它可以使用Redux来管理已缓存的新闻文章。
当应用首次加载新闻文章时，会触发FETCH_ARTICLES类型的action，reducer更新状态来存储获取到的文章列表。如果应用离线，它可以从Redux存储的状态中读取已缓存的文章，提供给用户阅读。同时，当用户手动刷新文章列表或者设置了定时更新时，又会触发新的FETCH_ARTICLES动作来更新缓存。

五、实例

1. 简单的计数器应用

创建Action

// 定义action类型
const INCREMENT = 'INCREMENT';
const DECREMENT = 'DECREMENT';
// 创建action创建函数
const increment = () => {
    return {
        type: INCREMENT
    };
}
const decrement = () => {
    return {
        type: DECREMENT
    };
}

创建Reducer

const initialState = {
    count: 0
};
const counterReducer = (state = initialState, action) => {
    switch (action.type) {
        case INCREMENT:
            return {
               ...state,
                count: state.count + 1
            };
        case DECREMENT:
            return {
               ...state,
                count: state.count - 1
            };
        default:
            return state;
    }
}

创建Store并使用

import { createStore } from 'redux';
const store = createStore(counterReducer);
// 订阅状态变化并更新UI（这里简单打印）
const unsubscribe = store.subscribe(() => {
    console.log(store.getState().count);
});
// 分发动作
store.dispatch(increment()); 
store.dispatch(increment()); 
store.dispatch(decrement()); 
// 取消订阅
unsubscribe();

2. 待办事项列表应用

创建Action

const ADD_TODO = 'ADD_TODO';
const TOGGLE_TODO = 'TOGGLE_TODO';
const addTodo = (text) => {
    return {
        type: ADD_TODO,
        payload: text
    };
}
const toggleTodo = (index) => {
    return {
        type: TOGGLE_TODO,
        payload: index
    };
}

创建Reducer

const initialState = {
    todos: []
};
const todoReducer = (state = initialState, action) => {
    switch (action.type) {
     case ADD_TODO:
          return {
             ...state,
              todos: [...state.todos, {text: action.payload, completed: false}]
          };
      case TOGGLE_TODO:
          const newTodos = [...state.todos];
          newTodos[action.payload].completed =!newTodos[action.payload].completed;
          return {
             ...state,
              todos: newTodos
          };
      default:
          return state;
    }
}

创建Store并使用

const store = createStore(todoReducer);
// 订阅状态变化并更新UI（这里简单打印）
const unsubscribe = store.subscribe(() => {
    console.log(store.getState().todos);
});
// 分发动作
store.dispatch(addTodo("Buy milk"));
store.dispatch(addTodo("Read a book"));
store.dispatch(toggleTodo(0));
unsubscribe();

Redux 之 React

在React中使用Redux

一、安装Redux相关库

首先需要安装redux和react-redux库。
- 如果使用npm，可以在项目目录下的终端中运行以下命令：
```
npm install redux react-redux
```
- 如果使用yarn，则运行：
```
yarn add redux react-redux
```

二、创建Redux Store和相关逻辑

定义Actions（动作）

在React项目中，通常在一个单独的文件（如actions.js）中定义动作。例如，对于一个简单的计数器应用，定义增加和减少计数的动作：

// actions.js
export const INCREMENT = 'INCREMENT';
export const DECREMENT = 'DECREMENT';
export const increment = () => {
    return {
        type: INCREMENT
    };
};
export const decrement = () => {
    return {
        type: DECREMENT
    };
};

创建Reducers（纯函数）

同样在一个单独的文件（如reducers.js）中创建。以计数器应用为例，创建一个简单的reducer来处理计数状态的更新：

// reducers.js
import { INCREMENT, DECREMENT } from './actions';
const initialState = {
    count: 0
};
const counterReducer = (state = initialState, action) => {
    switch (action.type) {
        case INCREMENT:
            return {
               ...state,
                count: state.count + 1
            };
        case DECREMENT:
            return {
               ...state,
                count: state.count - 1
            };
        default:
            return state;
    }
};
export default counterReducer;

创建Store（仓库）

在项目的入口文件（如index.js）或者专门的store.js文件中创建store。例如：

// store.js
import { createStore } from 'redux';
import counterReducer from './reducers';
const store = createStore(counterReducer);
export default store;

三、在React组件中使用Redux

使用Provider组件包裹根组件

在index.js文件中，将整个React应用包裹在Provider组件内，使得应用中的所有组件都可以访问Redux store。Provider是react - redux库提供的组件。

import React from 'react';
import ReactDOM from 'react - dom';
import App from './App';
import { Provider } from 'react - redux';
import store from './store';
ReactDOM.render(
    <Provider store={store}>
        <App />
    </Provider>,
    document.getElementById('root')
);

在组件中连接Redux（使用connect函数）

功能性组件（使用useSelector和useDispatch）

对于功能性组件，可以使用react - redux提供的useSelector和useDispatch钩子函数来获取状态和分发动作。例如，在一个计数器组件中：

import React from 'react';
import { useSelector, useDispatch } from 'react - redux';
import { increment, decrement } from './actions';
const Counter = () => {
    const count = useSelector((state) => state.count);
    const dispatch = useDispatch();
    return (
        <div>
          <p>Count: {count}</p>
           <button onClick={() => dispatch(increment())}>Increment</button>
           <button onClick={() => dispatch(decrement())}>Decrement</button>
        </div>
    );
};
export default Counter;

类组件（使用connect函数）

对于类组件，使用connect函数来连接Redux。例如，将上面的计数器组件改写为类组件：

import React, { Component } from 'react';
import { connect } from 'react - redux';
import { increment, decrement } from './actions';
class Counter extends Component {
    render() {
        const { count, increment, decrement } = this.props;
        return (
            <div>
                <p>Count: {count}</p>
                <button onClick={increment}>Increment</button>
                <button onClick={decrement}>Decrement</button>
            </div>
        );
    }
}
const mapStateToProps = (state) => ({
    count: state.count
});
const mapDispatchToProps = {
    increment,
    decrement
};
export default connect(mapStateToProps, mapDispatchToProps)(Counter);

mapStateToProps函数
- 这个函数用于将Redux store中的状态映射到组件的props中。它接收整个Redux状态树作为参数，返回一个对象，对象中的属性会被合并到组件的props中。例如，在上面的类组件中，mapStateToProps将state.count映射为组件的count属性。
mapDispatchToProps函数（或对象）
- 这个函数（或对象）用于将动作创建函数映射到组件的props中，使得组件可以通过props来分发动作。在类组件的例子中，mapDispatchToProps是一个对象，它将increment和decrement动作创建函数直接作为属性，这些属性会被添加到组件的props中，从而可以在组件中通过this.props.increment和this.props.decrement来分发动作。在功能性组件中，useDispatch钩子函数返回的dispatch函数用于手动分发动作，更加灵活。

类组件connect具体应用

导出复用原理

connect函数的作用机制
- 在React - Redux中，connect函数是一个高阶函数，用于将React组件与Redux的store连接起来。它接收两个参数：mapStateToProps和mapDispatchToProps（这两个参数也可以是函数或者对象，用于不同的映射方式）。
- mapStateToProps原理：这个函数用于将Redux store中的状态映射到组件的props中。它会在store状态发生变化时被调用，每次调用都会重新计算返回的对象。返回对象中的属性会作为props传递给组件。例如，如果mapStateToProps返回{ count: state.count }，那么组件就会通过props.count来访问Redux中的count状态。
- mapDispatchToProps原理：这个函数（或对象）用于将Redux中的action创建函数映射到组件的props中。当它是一个函数时，接收dispatch作为参数，返回一个对象，对象中的属性是action创建函数，这些函数内部会调用dispatch来分发action。当它是一个对象时，对象中的属性直接就是action创建函数，connect函数会自动将它们绑定到dispatch上，这样组件就可以通过props来调用这些action创建函数。
组件复用原理
- 当一个通过connect函数连接了Redux的组件被导出后，它可以在多个地方被复用。因为mapStateToProps和mapDispatchToProps的映射关系是基于组件的使用场景和Redux的store结构来定义的，所以只要Redux store的结构和组件所需的状态及action保持一致，组件就可以在不同的地方复用。例如，一个显示用户信息的组件，它通过mapStateToProps获取用户状态，通过mapDispatchToProps获取更新用户信息的action函数，只要在其他地方也有相同的Redux store结构和对用户信息的操作需求，这个组件就可以直接复用。

实例

1. 安装依赖

确保项目中安装了 redux 和 react-redux：

npm install redux react-redux

2. 创建Redux相关文件

actions.js

定义购物车相关的 action 类型和 action 创建函数。

// actions.js
export const ADD_ITEM = 'ADD_ITEM';
export const REMOVE_ITEM = 'REMOVE_ITEM';
export const INCREMENT_QUANTITY = 'INCREMENT_QUANTITY';
export const DECREMENT_QUANTITY = 'DECREMENT_QUANTITY';

export const addItem = (product) => ({
    type: ADD_ITEM,
    payload: product
});

export const removeItem = (productId) => ({
    type: REMOVE_ITEM,
    payload: productId
});

export const incrementQuantity = (productId) => ({
    type: INCREMENT_QUANTITY,
    payload: productId
});

export const decrementQuantity = (productId) => ({
    type: DECREMENT_QUANTITY,
    payload: productId
});

reducers.js

创建购物车的 reducer，处理各种 action 对购物车状态的更新。

// reducers.js
import { ADD_ITEM, REMOVE_ITEM, INCREMENT_QUANTITY, DECREMENT_QUANTITY } from './actions';

const initialState = {
    cart: []
};

const cartReducer = (state = initialState, action) => {
    switch (action.type) {
        case ADD_ITEM:
            return {
              ...state,
                cart: [...state.cart, {
                  ...action.payload,
                    quantity: 1
                }]
            };
        case REMOVE_ITEM:
            return {
              ...state,
                cart: state.cart.filter(item => item.id!== action.payload)
            };
        case INCREMENT_QUANTITY:
            return {
              ...state,
                cart: state.cart.map(item =>
                    item.id === action.payload? {
                      ...item,
                        quantity: item.quantity + 1
                    } : item
                )
            };
        case DECREMENT_QUANTITY:
            return {
              ...state,
                cart: state.cart.map(item =>
                    item.id === action.payload && item.quantity > 1? {
                      ...item,
                        quantity: item.quantity - 1
                    } : item
                )
            };
        default:
            return state;
    }
};

export default cartReducer;

store.js

创建Redux的 store。

// store.js
import { createStore } from'redux';
import cartReducer from './reducers';

const store = createStore(cartReducer);

export default store;

3. 创建React类组件

Product.js

定义商品展示组件，该组件可以触发添加商品到购物车的操作。

// Product.js
import React, { Component } from'react';
import { connect } from'react - redux';
import { addItem } from './actions';

class Product extends Component {
    render() {
        const { product, addItem } = this.props;
        return (
            <div>
                <h3>{product.name}</h3>
                <p>{product.price}</p>
                <button onClick={() => addItem(product)}>Add to Cart</button>
            </div>
        );
    }
}

const mapDispatchToProps = {
    addItem
};

export default connect(null, mapDispatchToProps)(Product);

CartItem.js

定义购物车中商品项的展示组件，该组件可以触发移除商品、增加和减少商品数量的操作。

// CartItem.js
import React, { Component } from'react';
import { connect } from'react - redux';
import { removeItem, incrementQuantity, decrementQuantity } from './actions';

class CartItem extends Component {
    render() {
        const { item, removeItem, incrementQuantity, decrementQuantity } = this.props;
        return (
            <div>
                <p>{item.name}</p>
                <p>Quantity: {item.quantity}</p>
                <button onClick={() => incrementQuantity(item.id)}>Increment</button>
                <button onClick={() => decrementQuantity(item.id)}>Decrement</button>
                <button onClick={() => removeItem(item.id)}>Remove</button>
            </div>
        );
    }
}

const mapDispatchToProps = {
    removeItem,
    incrementQuantity,
    decrementQuantity
};

export default connect(null, mapDispatchToProps)(CartItem);

Cart.js

定义购物车展示组件，复用 CartItem 组件展示购物车中的所有商品。

// Cart.js
import React, { Component } from'react';
import { connect } from'react - redux';
import CartItem from './CartItem';

class Cart extends Component {
    render() {
        const { cart } = this.props;
        return (
            <div>
                <h2>Shopping Cart</h2>
                {cart.map(item => (
                    <CartItem key={item.id} item={item} />
                ))}
            </div>
        );
    }
}

const mapStateToProps = (state) => ({
    cart: state.cart
});

export default connect(mapStateToProps)(Cart);

App.js

在 App 组件中复用 Product 和 Cart 组件，展示商品列表和购物车。

// App.js
import React, { Component } from'react';
import { Provider } from'react - redux';
import store from './store';
import Product from './Product';
import Cart from './Cart';

const products = [
    { id: 1, name: 'Product 1', price: 10 },
    { id: 2, name: 'Product 2', price: 15 }
];

class App extends Component {
    render() {
        return (
            <Provider store = {store}>
                <div>
                    <h1>Redux Shopping Cart Example</h1>
                    <div>
                        <h2>Products</h2>
                        {products.map(product => (
                            <Product key={product.id} product={product} />
                        ))}
                    </div>
                    <Cart />
                </div>
            </Provider>
        );
    }
}

export default App;

4. 总结

在上述代码中，Product 组件和 CartItem 组件都通过 connect 函数与Redux建立连接，能够触发Redux中的方法（action）。Cart 组件复用了 CartItem 组件来展示购物车中的商品。整个应用通过 Provider 组件将Redux的 store 提供给所有子组件，实现了状态管理和组件间的交互。

redux 中间件应用及介绍

Redux-Thunk

作用：
- 用于处理异步操作。它允许action创建函数返回一个函数，而不是一个普通的action对象。这个返回的函数可以接收dispatch和getState作为参数，从而在函数内部执行异步操作（如网络请求），并根据异步操作的结果来分发action。

实例：

假设我们要从一个API获取用户数据并更新Redux状态。

首先，定义action类型和action创建函数：

// actions.js
const FETCH_USER_SUCCESS = 'FETCH_USER_SUCCESS';
const FETCH_USER_FAILURE = 'FETCH_USER_FAILURE';
const fetchUser = () => {
    return async (dispatch) => {
        try {
          const response = await fetch('https://example.com/api/user');
           const userData = await response.json();
           dispatch({
               type: FETCH_USER_SUCCESS,
               payload: userData
           });
        } catch (error) {
            dispatch({
                type: FETCH_USER_FAILURE,
                payload: error.message
            });
        }
    };
};

然后，创建reducer来处理action：

// reducers.js
const initialState = {
    user: null,
    error: null
};
const userReducer = (state = initialState, action) => {
    switch (action.type) {
        case FETCH_USER_SUCCESS:
            return {
               ...state,
                user: action.payload
            };
        case FETCH_USER_FAILURE:
            return {
               ...state,
                error: action.payload
            };
        default:
            return state;
    }
};
export default userReducer;

最后，在创建store时应用redux - thunk中间件：

// store.js
import { createStore, applyMiddleware } from 'redux';
import thunkMiddleware from 'redux - thunk';
import userReducer from './reducers';
const store = createStore(
    userReducer,
    applyMiddleware(thunkMiddleware)
);

Redux-Saga

作用：
- 也是用于处理异步操作，它基于Generator函数。Redux - Saga将异步操作看作是可以被暂停和恢复的一系列步骤，通过Generator函数的yield关键字来暂停Saga的执行，等待异步操作完成后再恢复执行。这样可以更方便地处理复杂的异步流程，如并发请求、轮询等。

实例：

同样是获取用户数据的例子。

首先，定义Saga函数：

// sagas.js
import { call, put, takeEvery } from 'redux - saga/effects';
const FETCH_USER_SUCCESS = 'FETCH_USER_SUCCESS';
const FETCH_USER_FAILURE = 'FETCH_USER_FAILURE';
function* fetchUserSaga() {
    try {
    const response = yield call(fetch, 'https://example.com/api/user');
      const userData = yield call([response, 'json']);
      yield put({
          type: FETCH_USER_SUCCESS,
          payload: userData
      });
    } catch (error) {
        yield put({
            type: FETCH_USER_FAILURE,
            payload: error.message
        });
    }
}
function* rootSaga() {
    yield takeEvery('FETCH_USER', fetchUserSaga);
}
export default rootSaga;

然后，创建reducer（和上面Redux - Thunk例子中的reducer类似）：

// reducers.js
const initialState = {
    user: null,
    error: null
};
const userReducer = (state = initialState, action) => {
    switch (action.type) {
        case FETCH_USER_SUCCESS:
            return {
               ...state,
                user: action.payload
            };
        case FETCH_USER_FAILURE:
            return {
               ...state,
                error: action.payload
            };
        default:
            return state;
    }
};
export default userReducer;

最后，在创建store时应用Redux - Saga中间件：

// store.js
import { createStore, applyMiddleware } from 'redux';
import createSagaMiddleware from 'redux - saga';
import userReducer from './reducers';
import rootSaga from './sagas';
const sagaMiddleware = createSagaMiddleware();
const store = createStore(
    userReducer,
    applyMiddleware(sagaMiddleware)
);
sagaMiddleware.run(rootSaga);

Redux - Logger

作用：
- 用于日志记录，它可以在action被分发、reducer处理action以及状态更新的过程中记录相关信息。这对于调试Redux应用非常有帮助，可以清楚地看到action的流向和状态的变化情况。

实例：

定义logger中间件：

// loggerMiddleware.js
const loggerMiddleware = (store) => (next) => (action) => {
    console.log('dispatching', action);
    const result = next(action);
    console.log('next state', store.getState());
    return result;
};
export default loggerMiddleware;

在创建store时应用logger中间件：

// store.js
import { createStore, applyMiddleware } from 'redux';
import loggerMiddleware from './loggerMiddleware';
import rootReducer from './reducers';
const store = createStore(
    rootReducer,
    applyMiddleware(loggerMiddleware)
);

当action被分发时，例如在一个计数器应用中：

// actions.js
const INCREMENT = 'INCREMENT';
const increment = () => ({
    type: INCREMENT
});

// counterReducer.js
const initialState = {
    count: 0
};
const counterReducer = (state = initialState, action) => {
    switch (action.type) {
        case INCREMENT:
            return {
               ...state,
                count: state.count + 1
            };
        default:
            return state;
    }
};
export default counterReducer;

// index.js
import React from 'react';
import ReactDOM from 'react - dom';
import { Provider } from 'react - redux';
import store from './store';
import Counter from './Counter';
ReactDOM.render(
    <Provider store={store}>
        <Counter />
    </Provider>,
    document.getElementById('root')
);

当点击按钮触发increment动作时，logger中间件会在控制台打印出分发的action（{type: 'INCREMENT'}）以及更新后的状态（{count: 1}等）。

原文地址：https://blog.csdn.net/m0_51244077/article/details/144788573

免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！

上一篇：Flink的多流转换（分流-侧输出流、合流-union、connect、join）
下一篇：InfoNCE Loss详解(上)

迅为瑞芯微RK3562开发板/核心板应用于人脸跟踪、身体跟踪、视频监控、自动语音识别(ASR)、图像分类驾驶员辅助系统(ADAS)、车牌识别、物体识别等
iTOP-3562开发板/核心板采用瑞芯微RK3562处理器，内部集成了四核A53+Mali G52架构，主频2GHZ，内置1TOPSNPU算力，RK809动态调频。支持几乎全格式的H.264解码，支
阅读更多2024-12-31
低精度只适用于未充分训练的LLM？腾讯提出LLM量化的scaling laws
尽管有一些研究声称原生的低比特LLM可以媲美fp16/bf16精度下的表现，但这些研究普遍都是在未充分语言模型上得到的结果从而推出的结论，研究人员认为在充分训练的情况下进行比较的话，低比特LLM也将很
阅读更多2024-12-31
医疗数仓配置Flume
Flume需要将Kafka中各topic的数据传输到HDFS，因此选用KafkaSource以及HDFSSink。对于安全性要求高的数据（不允许丢失）选用FileChannel，允许部分丢失的数据如日
阅读更多2024-12-31
Go中CAS算法
CAS算法常被用作乐观锁的实现方式，用于解决并发问题。例如，在计数器、缓存等场景中，可以使用CAS算法来确保数据的一致性和正确性。CAS操作会检查内存位置V的当前值是否与预期的旧值A相等。这一操作是原
阅读更多2024-12-31
Node.js 记账本项目总结
在使用Node.js结合Express框架构建记账本的过程中，遇到了一些常见的问题，这些问题主要集中在路径处理、包管理工具的选择、开发环境优化以及HTTP响应处理等方面。
阅读更多2024-12-31
Java 处理base64文件上传
在系统内有一个类似于公告的模块，如果里面添加的文章不是选择富文本上传图片的方式，而是选择复制别的文章直接粘贴到系统内的富文本，里面的图片就不会url，而是图片的base64格式，这样会导致数据库存储压
阅读更多2024-12-31
Tailwind CSS 实战：现代登录注册页面开发
基础结构搭建表单组件开发社交登录集成响应式适配深色模式支持动画效果表单验证性能优化可访问性增强通过合理使用 Tailwind CSS 的原子类，我们不仅实现了美观的界面，还确保了良好的用户体验和可维护
阅读更多2024-12-31
node.js下载、安装、设置国内镜像源（永久）（Windows11）
系统：Windows 11。
阅读更多2024-12-31
Slate文档编辑器-Decorator装饰器渲染调度
在这里我们主要讨论了slate中的decoration装饰器的实现，以及在实际使用中可能会遇到的问题，主要是在跨节点的情况下，我们需要将range拆分为多个range，然后分别进行处理，并且还分析了源
阅读更多2024-12-31
python去水印
请注意，这种方法仅适用于简单的水印去除，对于复杂的水印或嵌入到图像纹理中的水印，可能无法达到理想的效果。在实际应用中，还可以考虑使用深度学习的方法，如生成对抗网络（GAN）来去除水印，但需要大量的数据
阅读更多2024-12-31

React 之 Redux =》 理解+应用

文章目录