网络建设 之 React数据管理

编程入门 行业动态 更新时间:2024-10-27 02:28:19

网络建设 之 React<a href=https://www.elefans.com/category/jswz/34/1768413.html style=数据管理"/>

网络建设 之 React数据管理

React作为一个用于构建用户界面的JavaScript库,很多人认为React仅仅只是一个UI 库,而不是一个前端框架,因为它在数据管理上是缺失的。在做一个小项目的时候,维护的数据量不多,管理/维护数据用useState/useRef就足够了;可是当项目变大,需要的数据量成百上千,然后就会发现:

  1. 全局变量到处都是。

  2. 在某些组件里定义的数据无法传递到其他组件里。

  3. 数据传来传去找不到定义位置,很难维护。

因此这时候就需要数据管理了。

最简单的数据管理

就是把这些useState/useRef定义的数据放到根组件上,然后哪个子组件用,就用props传下去,这样没有其他概念浅显易懂,也起到了一定的数据管理的作用。但这样做的缺点就是这些数据需要在子组件一层层的传下去,代码要写很多,比较麻烦,如果不嫌麻烦的话,在大型项目里,这么做其实也没什么问题了。

更进一步的数据管理,用useContext

React的api,useContext,正是为了解决数据层层传递的问题而出现的,它可以看作是一个数据中心,所有需要管理的数据都在这里。

它怎么用呢,首先新开一个文件context.js,在里用React.createContext()定义一个Context然后导出:

//context.js
import React from "react";
export const Context = React.createContext();

然后在根节点这里,用这个Context的Provider属性将整个根节点包裹住:

// rootView.jsx
import React from "react";
import { Context } from "./context";export default function RootView() {const defaultValue = {a: 1, b: 'hello'};return <Context.Provider value={defaultValue}><View class='root-view'>...各种子组件...</View></Context.Provider>;
}

这里的defaultValue就是我们数据中心的所有数据的初始化的默认值。

然后在子组件里,不管是子组件还是孙组件还是孙孙组件,都不用再把 props 当传家宝传下去了,只需要在组件里像useState一样调用useContext,就能获取到数据中心的所有数据:

//child.jsx
import React, { useContext } from "react";
import { Context } from "./context";export default function() {const state = useContext(Context);return <Text>{state.b}</Text>
}

state就是数据中心的所有数据,可以理解为useState中的State,这样这个子组件显示的就是上面默认的初始化数据“hello”,但这还不够好用,因为目前还没有办法改变数据,那么我们接下来就需要对defaultValue做一些变动,把这些数据都用useState变成响应式的,然后再一股脑地传进Provider的value里:

// rootView.jsx
import React from "react";
import { Context } from "./context";export default function RootView() {const [value, setValue] = useState({a: 1, b: 'hello'});return <Context.Provider value={{value, setValue}}><View class='root-view'>...各种子组件...</View></Context.Provider>;
}

然后在子组件里这样调用:

//child.jsx
import React, { useContext } from "react";
import { Context } from "./context";export default function() {const state = useContext(Context);useEffect(()=>{state.setValue({...state.value, b: 'world'});}, []);return <Text>{state.value.b}</Text>
}

然后,这个子组件显示的就是已经改动的数据“world”,关于Context还有一个比较重要的点是:当Context Provider的value发生变化时,他的所有调用useContext的子组件,都会重新渲染,这往往会造成比较严重的性能问题,在大型项目里百分百会出现。

第一个问题是state改变,造成Provider标签下的整体渲染。Context.Provider说到底还是组件,也是用React.createElement()实现的,也按照组件基本法来办事,React.createElement()在每次props发生变动时,都会创建一个新对象,那么只要让props不发生变动就行了。我给Provider再包裹一层ProviderWrapper,然后在这个ProviderWrapper组件里去定义数据,这样,由于ProviderWrapper是不变的,那么在RootView组件里没有任何状态改变,子组件也用不着重复渲染了。

const ProviderWrapper = ({ children }) => {const [value, setValue] =useState(defaultValue); return (<Context.Provider value={{ value, setValue }}>{children}</Context.Provider>);
};export default function RootView() {return <ProviderWrapper><View class='root-view'>...各种子组件...</View></ProviderWrapper>;
}

这样,babel在编译的时候,标签转译成React.createElement()的时候,只是在RootView组件里完成转译,React.createElement()执行完的节点数据将通过props.children传入ProviderWrapper,在ProviderWrapper内部就没有重复的React.createElement(),这样就避免了整体的重复渲染。

二是上述的所有调用useContext的子组件的局部重复渲染。即便在某一个子组件中只是使用了setState,并没有使用state,但是当state变动时,这个子组件仍然会重复渲染,因为仅仅是调用了useContext,但理论上来说是不需要重复渲染的。那解决办法是什么呢?解决办法就是将state和setState分别用不同的Provider传入,这样一个组件仅仅只是调用setState的话,就不会被state的变动影响而重复渲染:

const ProviderWrapper = ({ children }) => {const [value, setValue] =useState(defaultValue); return (<SetValueContext.Provider value={{ setValue }}><ValueContext.Provider value={{ value }}>{children}</Context.Provider></Context.Provider>);
};

其中SetValueContext和ValueContext是两个毫不相干的有React.createContext()产生的对象,仅仅只是用来区分开state和setState,这样在子组件里,如果只想调用setState,那么就通过React.useContext()引入SetValueContext即可,子组件就不会因state变动而重复渲染。

这样基本上就差不多了,难懂的代码多了一些,但冗余的代码少了不少。概念越多就能解决的更多的问题,现在又出现了一个问题,state里有很多数据,一些子组件引用了React.useContext(),但是对state里的一些数据是不关心用不到的,但这些数据在发生变动的时候,这些子组件也会重复渲染,说白了,就是state细粒度不够的问题,但是本着尽可能消除重复渲染的思想,我们把state根据数据种类进行拆分成多个state,这样每个子组件调用对自己有用的state,这样就减少了重复渲染:

const ProviderWrappers = ({ children }) => (<LoginProviderWrapper><SignupProviderWrapper><MainPageProviderWrapper><MenuProviderWrapper>{children}</MenuProviderWrapper></MainPageProviderWrapper></SignupProviderWrapper></LoginProviderWrapper>
);export default function RootView() {return <ProviderWrappers><View class='root-view'>...各种子组件...</View></ProviderWrappers>;
}

等一下,代码怎么变冗余了?我们最初的目的是什么?消除冗余,我们为了消除一种冗余,带来了另一种冗余,这是不可接受的,所以还得接着改,当前情况是,由于state被拆分,造成出现了很多ProviderWrapper支持不同的state和setState,那么我们需要对这些ProviderWrapper进行某种程度上的组合,至少我们可以用一个for循环去组合这些ProviderWrapper:

// RootView.tsx
function composeProviderWrappers(ProviderWrappers) {const element;for(ProviderWrapper of ProviderWrappers) {element = <ProviderWrapper>{element}</ProviderWrapper>}return element;
}export default function RootView() {const ComposeProviderWrappers = composeProviderWrappers([LoginProviderWrapper, SignupProviderWrapper, MainPageProviderWrapper, MenuProviderWrapper]);return <ComposeProviderWrappers><View class='root-view'>...各种子组件...</View></ComposeProviderWrappers>;
}

这个优化意义不大,并没有减少多少冗余代码,但是说实话,我们现在已经走歪了,而导致我们走歪的罪魁祸首,就是React.useContext()的性能问题:只要调用React.useContext()的组件,当state变动的时候,全部都会重新渲染。回到最开始说的,React相对于Framwork,其实它更类似于一个UI库,用React本身的功能勉强实现数据管理,代价就是有很多坑,毕竟使用一些第三方数据管理库例如Redux,zustand之类的,既能实现React.useContext()的功能,又能避免React.useContext()的问题,何乐而不为呢?下面就来介绍一些第三方数据管理库:

Redux

Redux可以说是最正统的React数据管理工具,Redux的用法与React.useContext()类似,但没有React.useContext()的缺点,只有组件在使用到变动的数据的时候,这个组件才会重新渲染,如果你在因使用React.useContext()导致的无限渲染大卡关时,不妨试试Redux。

Redux只有2KB,Redux Toolkit是官方推荐的编写 Redux 逻辑的方法,使编写 Redux 更加容易。安装方式如下:

# NPM
npm install @reduxjs/toolkit redux# Yarn
yarn add @reduxjs/toolkit redux

使用时,首先像React.createContext()一样,使用configureStore导出一个实例:

import { configureStore } from '@reduxjs/toolkit'export default configureStore({reducer: {}
})

然后用react-redux提供的Provider标签,将整个根节点包裹起来,唯一的区别就是,我们再也不用考虑担心性能问题了,这里不会有的:

import React from 'react'
import ReactDOM from 'react-dom'
import './index.css'
import App from './App'
import store from './app/store'
import { Provider } from 'react-redux'export default function RootView() {return <Provider store={store}><View class='root-view'>...各种子组件...</View></Provider>;
}

然后不一样的来了,创建slice:

import { createSlice } from '@reduxjs/toolkit'export const counterSlice = createSlice({name: 'counter',initialState: {value: 0},reducers: {increment: state => {// Redux Toolkit 允许我们在 reducers 写 "可变" 逻辑。它// 并不是真正的改变状态值,因为它使用了 Immer 库// 可以检测到“草稿状态“ 的变化并且基于这些变化生产全新的// 不可变的状态state.value += 1},decrement: state => {state.value -= 1},incrementByAmount: (state, action) => {state.value += action.payload}}
})
// 每个 case reducer 函数会生成对应的 Action creators
export const { increment, decrement, incrementByAmount } = counterSlice.actionsexport default counterSlice.reducer

这里的createSlice实际上可以考虑为创建state和setState,reducers就是setState。然后将 Slice Reducers 添加到 Store 中:

import { configureStore } from '@reduxjs/toolkit'
import counterReducer from '../features/counter/counterSlice'export default configureStore({reducer: {counter: counterReducer}
})

最后就是使用了,在 React 组件中使用 Redux 状态和操作:

import React from 'react'
import { useSelector, useDispatch } from 'react-redux'
import { decrement, increment } from './counterSlice'
import styles from './Counter.module.css'export function Counter() {const count = useSelector(state => state.counter.value)const dispatch = useDispatch()return (<div><div><buttonaria-label="Increment value"onClick={() => dispatch(increment())}>Increment</button><span>{count}</span><buttonaria-label="Decrement value"onClick={() => dispatch(decrement())}>Decrement</button></div></div>)
}

虽然起的名字不同,但是通过上述的React.useContext()的学习,基本上也是能一一对应的,最重要的是,这里不会再有性能问题了。

zustand

"Zustand" 只是德语的"state",一个轻量,现代的状态管理库,它的好处就是更简单。

安装:

npm install zustand

然后老生常谈的定义一个实例:

const useStore = create(set => ({votes: 0,addVotes: () => set(state => ({ votes: state.votes + 1 })),subtractVotes: () => set(state => ({ votes: state.votes - 1 })),
}));

然后,就可以使用了,这个真的比较方便:

function App() {const addVotes = useStore(state => state.addVotes);const subtractVotes = useStore(state => state.subtractVotes);return <div className="App"><h1>{getVotes} people have cast their votes</h1><button onClick={addVotes}>Cast a vote</button><button onClick={subtractVotes}>Delete a vote</button></div>
}

Rematch

Rematch在Redux的基础上构建并减少了样板代码和执行了一些最佳实践。Redux对于初学者来说简直就是噩梦,他仿佛不是一个状态管理工具,而是一个涉及了众多概念的状态管理模型。要想搞明白Redux如何使用,就要先了解10个以上名词的含义;这还只是Redux的主流程使用中涉及到的名词。Redux的主流程里充斥了各种各样的概念,比如,Dispatch、Reducer、CreateStore、ApplyMiddleware、Compose、CombineReducers、Action、ActionCreator、Action Type、Action Payload、BindActionCreators...Rematch将这些概念进行了整合,提出了一个更简洁的状态管理模型;

安装:

npm install @rematch/core react-redux

首先,定义一个实例:

import { init } from "@rematch/core";// 定义一个model,包含了之前redux中的一些内容
// 拥有对应的state和reducers//model
const count = {state: 0,reducers: {upBy: (state, payload) => state + payload,},
};
// 使用init初始化
// 相当于Redux中的store
init({models: { count },
});

然后,就可以使用了:

import { connect } from "react-redux";// Component
// 将count内容赋值给count
const mapStateToProps = (state) => ({count: state.count,
});
// 将指定动作传输给组件
const mapDispatchToProps = (dispatch) => ({countUpBy: dispatch.count.upBy,
});connect(mapStateToProps, mapDispatchToProps)(Component);
// connect倒是没有怎么变

jotai,recoil,redux,rematch,zustand,Reducer,react数据管理的哲学

更多推荐

网络建设 之 React数据管理

本文发布于:2023-12-03 06:56:08,感谢您对本站的认可!
本文链接:https://www.elefans.com/category/jswz/34/1652385.html
版权声明:本站内容均来自互联网,仅供演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系,我们将在24小时内删除。
本文标签:数据管理   网络建设   React

发布评论

评论列表 (有 0 条评论)
草根站长

>www.elefans.com

编程频道|电子爱好者 - 技术资讯及电子产品介绍!