网络建设 之 React数据管理-CSDN博客

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

1. 全局变量到处都是。

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

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

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

最简单的数据管理

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

更进一步的数据管理用useContext

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

它怎么用呢首先新开一个文件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本身的功能勉强实现数据管理代价就是有很多坑毕竟使用一些第三方数据管理库例如Reduxzustand之类的既能实现React.useContext()的功能又能避免React.useContext()的问题何乐而不为呢下面就来介绍一些第三方数据管理库

Redux

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

Redux只有2KBRedux 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.actions

export default counterSlice.reducer

这里的createSlice实际上可以考虑为创建state和setStatereducers就是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>
        <button
          aria-label="Increment value"
          onClick={() => dispatch(increment())}
        >
          Increment
        </button>
        <span>{count}</span>
        <button
          aria-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倒是没有怎么变

jotairecoilreduxrematchzustandReducerreact数据管理的哲学