不想用原来的网站模板了就用小偷工具采集了一个可是怎么替换,百度seo效果,免费制作图片,淘宝躺平设计家官网概念
简单来说#xff0c;状态指的是某一时刻应用中的数据或界面的呈现。这些数据可能包括用户填写表单的信息、应用内的用户偏好设置、应用的页面/路由状态、或者任何其他可能改变UI的信息。 状态管理是前端开发中处理用户界面(UI)状态的过程#xff0c;在复杂应用中尤其重…概念
简单来说状态指的是某一时刻应用中的数据或界面的呈现。这些数据可能包括用户填写表单的信息、应用内的用户偏好设置、应用的页面/路由状态、或者任何其他可能改变UI的信息。 状态管理是前端开发中处理用户界面(UI)状态的过程在复杂应用中尤其重要。随着应用规模的增长管理不同组件和模块之间的状态变得越来越复杂。
在没有状态管理的情况下应用组件通常需要进行大量的props传递即将数据从一个组件传递到另一个组件或者使用事件来通信这在小型或简单的应用中是可行的。但在大型或复杂的项目中这些方法难以维护和跟踪状态的变化也会使得组件间耦合度增加随之而来的问题包括难以追踪状态的变化源头和状态更新的影响。
为了解决这个问题出现了各种状态管理库/模式它们帮助开发者集中管理状态、提供更可预测的状态更新机制并通过某种形式的全局状态存储实现不同组件间的通信而无需直接相互引用。比较知名的状态管理库包括 Redux、MobX、Zustand 等各自有不同的实现原理和适用场景。例如使用Redux的React应用会有一个单一的全局状态对象store所有的状态变化都通过一套严格的流程actions - reducers - store来管理而React组件通过连接(connect)到这个全局状态来获取自己所需的状态部分同时也可以触发状态的更新。这样状态的变化就变得可追踪且可预测而组件之间的关系也变得更为清晰。
状态管理的核心概念就是提高状态的可管理性降低组件间的耦合度并增强大型应用的可维护性。
状态管理工具介绍
目前实现状态管理的方式大概有下面几种
Context APIReduxZustandMobxRecoilJotai…
Context API
Context 是 React 内置的状态管理工具使用 Context 提供的 useContext useReducer 可以实现一个基本的 Redux 功能。 示例
首先创建一个 Context import React, { createContext, useState, ReactNode } from react;// 定义 context 的类型
interface IContext {state: string;updateState: (newState: string) void;
}// 创建一个 Context 对象, 初始值为 undefined
export const MyContext createContextIContext | undefined(undefined);interface IProviderProps {children: ReactNode;
}// 创建 Provider 组件
export const MyProvider: React.FCIProviderProps ({ children }) {const [state, setState] useStatestring(初始状态);const updateState (newState: string) {setState(newState);};return (MyContext.Provider value{{ state, updateState }}{children}/MyContext.Provider);
};接下来在组件树中使用 MyProvider 来包裹顶层组件
import React from react;
import { MyProvider } from ./MyContext;
import ChildComponent from ./ChildComponent;const App: React.FC () {return (MyProviderChildComponent //MyProvider);
};export default App;最后在需要访问状态的子组件中使用 useContext Hook
import React, { useContext } from react;
import { MyContext } from ./MyContext;const ChildComponent: React.FC () {const context useContext(MyContext);if (!context) {throw new Error(useContext must be inside a Provider with a value);}const { state, updateState } context;const handleChange () {updateState(更新后的状态);};return (divp{state}/pbutton onClick{handleChange}更改状态/button/div);
};export default ChildComponent;优缺点
优点
作为 React 内置的 Hook不需要引入第三方库使用起来较为方便 缺点Context 只能存储单一的值当数据量大起来的时候需要创建大量的 Context。使用 React Context 的一个已知的性能问题是当一个 Context 的值发生变化时所有消费该 Context 的组件都将重新渲染不管它们是否真的依赖于这个变化的部分。在组件树较大且更新频繁的情况下这可能会导致不必要的渲染并对性能造成负担。
针对性能问题的优化策略
拆分 Context如果你的 Context 对象非常庞大并且有不同的部分被不同的组件使用那么拆分 Context 是一个很好的方式。通过将状态拆分为更小的、独立的 Contexts组件可以订阅它们实际所需要的那一部分状态从而减少不必要的渲染。优化子组件
使用 React.memo它是 React 提供的一个高阶组件它会对组件的 props 进行浅比较这样只有当组件的 props 发生变化时组件才会重新渲染。
使用多个状态提供者在大型应用中可以在多个层级上设置提供者而不是仅仅在应用的顶层。这样可以控制渲染发生的具体位置和范围。状态选择传递一个函数给 Context 消费者而不是直接传递整个状态对象。这个函数可以从全局状态中选择组件特定需要的部分状态。这样不仅可以避免组件不必要的更新同时还能使组件的意图更加明显。避免在 Context Value 中传递一个新的对象或者函数因为这会在每次 Provider 渲染时创建新的引用导致所有消费者组件重新渲染。你可以通过使用 useCallback 来缓存函数以及使用 useMemo 来缓存计算得出的值。拆分状态和更新函数有时你可能有一个大的状态对象并且更新函数不经常变化。你可以创建两个 Contexts —— 一个只传递状态另一个只传递更新函数 —— 这样当更新函数不变时依赖状态的组件就不会在更新函数变化时重新渲染。用状态管理库如果你发现 Context 不适合你的应用需求或者你需要更细粒度的控制可能需要使用如 Redux、MobX 或 Recoil 这样的状态管理库。
Redux
redux是GitHub star数和周下载量都最多的状态管理工具。
使用示例
安装必要的包
npm install reduxjs/toolkit react-redux或者如果你在用 yarn
yarn add reduxjs/toolkit react-redux创建 Redux 状态和动作
首先定义应用的状态和动作。在 store.ts 文件中使用 createSlice 从 reduxjs/toolkit 创建一个 slice包含了状态的初识值、reducer 和自动生成的动作。
// store.ts
import { configureStore, createSlice, PayloadAction } from reduxjs/toolkit;// 定义状态的类型
interface CounterState {value: number;
}// 初始状态
const initialState: CounterState {value: 0,
};// 创建 slice
const counterSlice createSlice({name: counter,initialState,reducers: {// 定义 reducer 和对应的动作incremented: state {state.value 1;},decremented: state {state.value - 1;},incrementedByAmount: (state, action: PayloadActionnumber) {state.value action.payload;},},
});export const { incremented, decremented, incrementedByAmount } counterSlice.actions;// 配置 store
const store configureStore({reducer: {counter: counterSlice.reducer,},
});export type RootState ReturnTypetypeof store.getState;
export type AppDispatch typeof store.dispatch;export default store;设置 Provider
接下来在应用的根组件中使用 Provider 包装应用以便可以在组件树中的任意位置访问 Redux store。
// index.tsx 或 App.tsx
import React from react;
import ReactDOM from react-dom;
import { Provider } from react-redux;
import store from ./store;
import App from ./App;ReactDOM.render(React.StrictModeProvider store{store}App //Provider/React.StrictMode,document.getElementById(root)
);访问状态和调用动作
在组件中使用 useSelector 从 Redux store 选择状态并使用 useDispatch 发送动作。
// Counter.tsx
import React from react;
import { useSelector, useDispatch } from react-redux;
import { RootState, AppDispatch } from ./store;
import { incremented, decremented, incrementedByAmount } from ./store;const Counter: React.FC () {const count useSelector((state: RootState) state.counter.value);const dispatch useDispatchAppDispatch();return (divdiv{count}/divbutton onClick{() dispatch(incremented())}Increment/buttonbutton onClick{() dispatch(decremented())}Decrement/buttonbutton onClick{() dispatch(incrementedByAmount(5))}Increment by 5/button/div);
};export default Counter;在这个示例中Counter 组件通过 useSelector 读取 Redux store 中的 counter 值并且使用按钮来调用动作 incremented、decremented 和 incrementedByAmount 来更新状态。
这只是使用 Redux 进行状态管理的一个简单示例根据实际项目的复杂性你可能需要更多的 reducers、middewares、selectors 或其他逻辑。
优缺点
优点可扩展性高 繁荣的社区 缺点大量的模版代码 状态量大起来后有可能会出现性能问题 要是都往redux里存可想而知每次action过来把所有reducer跑一遍。虽然 Redux后面开始支持拆分 store异步加载 store没到这个业务的场景的时候不加载这个业务的 store。但是如果业务耦合较为严重那还是跑不掉
Zustand
Zustand 是一个简单的、快速的状态管理解决方案它不局限于 React 组件的层次结构这就意味着你可以在任何地方访问状态而无需使用 Provider 包装你的应用。
使用示例
安装 Zustand
首先你需要安装 Zustand。你可以通过 npm 或 yarn 来安装它
npm install zustand或者
yarn add zustand创建一个 store
你可以创建一个新的文件例如 useStore.ts并在其中定义你的状态和行为
// useStore.ts
import create from zustand// 定义状态和动作的类型
interface CounterState {count: number;increment: () void;decrement: () void;reset: () void;
}// 使用 create 创建一个 zustand store
const useStore createCounterState(set ({count: 0,increment: () set(state ({ count: state.count 1 })),decrement: () set(state ({ count: state.count - 1 })),reset: () set({ count: 0 }),
}));export default useStore;在组件中使用 store
然后你可以在组件中使用这个状态如下所示
// Counter.tsx
import React from react;
import useStore from ./useStore;const Counter: React.FC () {// 使用 store 中的状态和行为const { count, increment, decrement, reset } useStore();return (divh2Count: {count}/h2button onClick{increment}/buttonbutton onClick{decrement}-/buttonbutton onClick{reset}Reset/button/div);
};export default Counter;在这个例子中Counter 组件使用了从 useStore 挂钩返回的 count 状态和三个更新这个状态的方法increment, decrement, 和 reset。
使用 Zustand你不需要担心传统 Redux 所有的模板代码或 Context API 的潜在性能问题。 Zustand 提供了一个更灵活和轻量级的状态管理方案特别适合在简单或中等复杂度的 React 应用中使用。
其他工具 TODO
