在React中怎么处理数据流
这篇"在React中怎么处理数据流"文章的知识点大部分人都不太理解，所以小编给大家总结了以下内容，内容详细，步骤清晰，具有一定的借鉴价值，希望大家阅读完这篇文章能有所收获，下面我们一起来看看这篇"在React中怎么处理数据流"文章吧。
背景
相信大家在项目开发中，在页面较复杂的情况下，往往会遇到一个问题，就是在页面组件之间通信会非常困难。
比如说一个商品列表和一个已添加商品列表：
假如这两个列表是独立的两个组件，它们会共享一个数据 "被选中的商品"，在商品列表选中一个商品，会影响已添加商品列表，在已添加列表中删除一个商品，同样会影响商品列表的选中状态。
它们两个是兄弟组件，在没有数据流框架的帮助下，在组件内数据有变化的时候，只能通过父组件传输数据，往往会有 onSelectedDataChange 这种函数出现，在这种情况下，还尚且能忍受，如果组件嵌套较深的话，那痛苦可以想象一下，所以才有解决数据流的各种框架的出现。
本质分析
我们知道 React 是 MVC 里的 V，并且是数据驱动视图的，简单来说，就是数据 => 视图，视图是基于数据的渲染结果：
V = f(M)
数据有更新的时候，在进入渲染之前，会先生成 Virtual DOM，前后进行对比，有变化才进行真正的渲染。
V + ΔV = f(M + ΔM)
数据驱动视图变化有两种方式，一种是 setState，改变页面的 state，一种是触发 props 的变化。
我们知道数据是不会自己改变，那么肯定是有"外力"去推动，往往是远程请求数据回来或者是 UI 上的交互行为，我们统称这些行为叫 action：
ΔM = perform(action)
每一个 action 都会去改变数据，那么视图得到的数据（state）就是所有 action 叠加起来的变更，
state = actions.reduce(reducer, initState)
所以真实的场景会出现如下或更复杂的情况：
问题就出在，更新数据比较麻烦，混乱，每次要更新数据，都要一层层传递，在页面交互复杂的情况下，无法对数据进行管控。
有没有一种方式，有个集中的地方去管理数据，集中处理数据的接收，修改和分发？答案显然是有的，数据流框架就是做这个事情，熟悉 Redux 的话，就知道其实上面讲的就是 Redux 的核心理念，它和 React 的数据驱动原理是相匹配的。
数据流框架
Redux
数据流框架目前占主要地位的还是 Redux，它提供一个全局 Store 处理应用数据的接收，修改和分发。
它的原理比较简单，View 里面有任何交互行为需要改变数据，首先要发一个 action，这个 action 被 Store 接收并交给对应的 reducer 处理，处理完后把更新后的数据传递给 View。Redux 不依赖于任何框架，它只是定义一种方式控制数据的流转，可以应用于任何场景。
虽然定义了一套数据流转的方式，但真正使用上会有不少问题，我个人总结主要是两个问题：
定义过于繁琐，文件多，容易造成思维跳跃。
异步流的处理没有优雅的方案。
我们来看看写一个数据请求的例子，这是非常典型的案例：
actions.js
export const FETCH_DATA_START = 'FETCH_DATA_START';
export const FETCH_DATA_SUCCESS = 'FETCH_DATA_SUCCESS';
export const FETCH_DATA_ERROR = 'FETCH_DATA_ERROR';
export function fetchData() {
return dispatch => {
dispatch(fetchDataStart());
axios.get('xxx').then((data) => {
dispatch(fetchDataSuccess(data));
}).catch((error) => {
dispatch(fetchDataError(error));
});
};
}
export function fetchDataStart() {
return {
type: FETCH_DATA_START,
}
}
...FETCH_DATA_SUCCESS
...FETCH_DATA_ERROR
reducer.js
import { FETCH_DATA_START, FETCH_DATA_SUCCESS, FETCH_DATA_ERROR } from 'actions.js';
export default (state = { data: null }, action) => {
switch (action.type) {
case FETCH_DATA_START:
...
case FETCH_DATA_SUCCESS:
...
case FETCH_DATA_ERROR:
...
default:
return state
}
}
view.js
import { createStore, applyMiddleware } from 'redux';
import thunk from 'redux-thunk';
import reducer from 'reducer.js';
import { fetchData } from 'actions.js';
const store = createStore(reducer, applyMiddleware(thunk));
store.dispatch(fetchData());
第一个问题，发一个请求，因为需要托管请求的所有状态，所以需要定义很多的 action，这时很容易会绕晕，就算有人尝试把这些状态再封装抽象，也会充斥着一堆模板代码。有人会挑战说，虽然一开始是比较麻烦，繁琐，但对项目可维护性，扩展性都比较友好，我不太认同这样的说法，目前还算简单，真正业务逻辑复杂的情况下，会显得更恶心，效率低且阅读体验差，相信大家也写过或看过这样的代码，后面自己看回来，需要在 actions 文件搜索一下 action 的名称，reducer 文件查询一下，绕一圈才慢慢看懂。
第二个问题，按照官方推荐使用 redux-thunk 实现异步 action 的方法，只要在 action 里返回一个函数即可，这对有强迫症的人来说，简直受不了，actions 文件显得它很不纯，本来它只是来定义 action，却竟然要夹杂着数据请求，甚至 UI 上的交互。
以上就是关于"在React中怎么处理数据流"这篇文章的内容，相信大家都有了一定的了解，希望小编分享的内容对大家有帮助，若想了解更多相关的知识内容，请关注行业资讯频道。
