摘要：主要用于构建，被认为是中的视图。高效通过对的模拟，最大限度地减少与的交互。也就是说，用户负责视觉层，状态管理则是全部交给它。该回调函数必须返回一个纯对象，这个对象会与组件的合并。
React 定义：
React 是一个用于构建用户界面的 JAVASCRIPT 库。
React主要用于构建UI，React 被认为是 MVC 中的 V（视图）。
声明式设计 −React采用声明范式，可以轻松描述应用。
高效 −React通过对DOM的模拟，最大限度地减少与DOM的交互。
灵活 −React可以与已知的库或框架很好地配合。
JSX − JSX 是 JavaScript 语法的扩展
组件 − 通过 React 构建组件，使得代码更加容易得到复用，能够很好的应用在大项目的开发中。
单向响应的数据流 − React 实现了单向响应的数据流，从而减少了重复代码，这也是它为什么比传统数据绑定更简单。
为什么需要Redux？React 只是 DOM 的一个抽象层，并不是 Web 应用的完整解决方案。有两个方面，react没有涉及：
代码结构
组件之间的通信
React 能够根据 state 的变化来更新 view，setState 方法用于改变组件当前的 state，所以可以把更改 state 的逻辑写在各自的组件里，但这样做的问题在于，当项目逻辑变得越来越复杂的时候，将很难理清 state 跟 view 之间的对应关系（一个 state 的变化可能引起多个 view 的变化，一个 view 上面触发的事件可能引起多个 state 的改变）。我们需要对所有引起 state 变化的情况进行统一管理，这种情况下，就可能需要用到redux了。
简单说，React的核心是使用组件定义界面的表现，那么在使用React的时候我们通常还需要一套机制去管理组件与组件之间，组件与数据模型之间的通信。
Redux 核心概念：
Store
作用：保存数据的地方，用于管理整个应用的数据。它实际上是一个 Object tree ，整个应用只能有一个 Store。
产生：传入 reducer 和可选的初始 state 值，通过 createStore 方法生成
const store = createStore(reducer,initialState)
Action
作用：描述用户的行为，也就是 View 发出的通知，被 store 接收
产生：通过 action creator 产生
const ADD_TODO = "添加 TODO";
function addTodo(text) {
return {
type: ADD_TODO,
text
}
}
const action = addTodo("Learn Redux")
Reducer
作用：根据 action，计算出新的 state，是一个纯函数
产生：传入 state 和 action 参数，返回一个新的 state
const reducer = function (state, action) {
// ...
return new_state;
}
reducer 可以进行拆分，每个子 reducer 分别负责计算 view 上面的特定组件，返回局部的 state，再通过 combineReducers 将 reducer 进行合并，就可以合并得到完整的state，刷新视图。
const chatReducer = combineReducers({
chatLog,
statusMessage,
userName
})
redux的工作流程：
Redux应用数据的生命周期遵循下面4个步骤：
1）调用store.dispatch(action), 可以在任何地方进行;
2）Redux store调用传入的reducer函数，并且将当前的state树与action传入。
3）根reducer将多个子reducer输出合并成一个单一的state树;
4）Redux store保存了根reducer返回的完整的state树。
5）新的state树就是应用的下一个状态，现在就可以根据新的state tree来渲染UI。
Flux 是一种架构思想，专门解决软件的结构问题。它跟 MVC 架构是同一类东西，但是更加简单和清晰，它跟 React 本身没什么关系，它可以用在 React 上，也可以用在别的框架上。
Flux 存在多种实现（至少15种），Facebook 官方实现版本：
View： 视图层
Action（动作）：视图层发出的消息（比如mouseClick）
Dispatcher（派发器）：用来接收Actions、执行回调函数
Store（数据层）：用来存放应用的状态，一旦发生变动，就提醒Views要更新页面
Flux的数据管理流程：Redux 的作用跟 Flux 是一样的，它可以看作是 Flux 的一种实现，但是又有点不同，具体的不同总结起来就是：
Redux 只有一个 store 而 Flux 里面会有多个 store 存储应用数据，并在 store 里面执行更新逻辑，当 store 变化的时候再通知 controller-view 更新自己的数据，Redux 将各个 store 整合成一个完整的 store，并且可以根据这个 store 推导出应用完整的 state。
没有 Dispatcher。 Redux 中没有 Dispatcher 的概念，它使用 reducer 来进行事件的处理，它根据应用的状态和当前的 action 推导出新的 state。Redux 中有多个 reducer，每个 reducer 负责维护应用整体 state 树中的某一部分，多个 reducer 可以通过 combineReducers 方法合成一个根reducer，这个根reducer负责维护完整的 state，当一个 action 被发出，store 会调用 dispatch 方法向某个特定的 reducer 传递该 action，reducer 收到 action 之后执行对应的更新逻辑然后返回一个新的 state，state 的更新最终会传递到根reducer处，返回一个全新的完整的 state，然后传递给 view。
简单说，Redux 和 Flux 之间最大的区别就是对 store/reducer 的抽象，Flux 中 store 是各自为战的，每个 store 只对对应的 controller-view 负责，每次更新都只通知对应的 controller-view；而 Redux 中各子 reducer 都是由根reducer统一管理的，每个子reducer的变化都要经过根reducer的整合。
flux与redux对比图： flux redux React-Redux为了方便使用，Redux 的作者封装了一个 React 专用的库 React-Redux。
这个库是可以选用的。实际项目可以选择直接使用 Redux，或者使用 React-Redux。React-Redux 虽然提供了便利，但需要掌握额外的 API，并且要遵守它的组件拆分规范。
React-Redux 将所有组件分成两大类：UI 组件和容器组件。
UI组件特点：
只负责 UI 的呈现，不带有任何业务逻辑
没有状态（即不使用this.state这个变量）
所有数据都由参数（this.props）提供
不使用任何 Redux 的 API
容器组件特点：
负责管理数据和业务逻辑，不负责 UI 的呈现
带有内部状态
使用 Redux 的 API
简单说：UI 组件负责 UI 的呈现，容器组件负责管理数据和逻辑。
React-Redux 规定，所有的 UI 组件都由用户提供，容器组件则是由 React-Redux 自动生成。也就是说，用户负责视觉层，状态管理则是全部交给它。
connect([mapStateToProps], [mapDispatchToProps], [mergeProps],[options])
connect()用于从 UI 组件生成容器组件。
connect的意思，就是将这两种组件连起来。
mapStateToProps是一个函数。
它的作用就是像它的名字那样，建立一个从（外部的）state对象到（UI 组件的）props对象的映射关系。
[mapStateToProps(state, [ownProps]): stateProps] (Function)
任何时候，只要 Redux store 发生改变，mapStateToProps 函数就会被调用。该回调函数必须返回一个纯对象，这个对象会与组件的 props 合并。如果你省略了这个参数，你的组件将不会监听 Redux store。第二个参数 ownProps，为传递到组件的 props。
mapDispatchToProps是connect函数的第二个参数，用来建立 UI 组件的参数到store.dispatch方法的映射。也就是说，它定义了哪些用户的操作应该当作 Action，传给 Store。它可以是一个函数，也可以是一个对象。
connect 方法生成容器组件以后，需要让容器组件拿到state对象，才能生成 UI 组件的参数。
React-Redux 提供Provider组件，可以让容器组件拿到state。
React-router采用react组件的方式来实现router，通过管理 URL，实现组件的切换和状态的变化。
相关路由组件：:用于取代a元素，生成一个链接，允许用户点击后跳转到另一个路由。它基本上就是a元素的React 版本，可以接收Router的状态。
相关路由属性：path 属性:Route组件的path属性指定路由的匹配规则
histroy 属性: Router组件的history属性，用来监听浏览器地址栏的变化，并将URL解析成一个地址对象，供 React Router 匹配。
render((
//开始创建路由表
//声明每一个路由
//每个路由
), document.getElementById("example"))
Demo的思路：
设计好整个应用的state
根据用户在view上的行为，定义好所有action
根据定义好的action，创建相应的reducer处理state，合并reducer
根据定义好的reducer，生成store
通过
编写UI组件，并通过connect自动生成容器组件
根据url，react-router调用相应的组件，显示view
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/82893.html
摘要：介绍快速开始是的官方绑定库。通常你可以以下面这种方式调用方法基础教程为了进一步了解如何实际使用，我们将一步一步创建一个一个实例跳转到 介绍 快速开始 React-Redux是Redux的官方React绑定库。它能够使你的React组件从Redux store中读取数据，并且向store分发actions以更新数据 安装 在你的React app中使用React-Redux： npm i...
摘要：的实现原理作为一个通用的模块，主要还是用来应用项目中的变更通过做连接，可以在的项目中将两者结合的更好。上述便是两个核心的用法啦。如有不对，还请指正。 react-redux的实现原理： Redux作为一个通用的模块，主要还是用来应用项目中state的变更,通过react-redux做连接，可以在React+Redux的项目中将两者结合的更好。 React-redux是一个轻量级的封装库...
摘要：上篇文章写到了实现组件数据共享的方法，但是在中，作者提供了一个更优雅简便的模块实现组件之间数据共享。那就是利用利用实现组件数据之间数据共享安装从导入组件将赋予的属性将根组件用包裹起来。 上篇文章写到了redux实现组件数据共享的方法，但是在react中，redux作者提供了一个更优雅简便的模块实现react组件之间数据共享。那就是利用react-redux 利用react-redux...
摘要：描述这个插件可以让我们的代码更加的简洁和美观。安装使用提供了两个重要的接口使用了这个插件，的和就可以忘记来，它们就用不着了。现在有美女个。 可先查看我的redux简单入门 react-redux简介 react-redux是使用redux开发react时使用的一个插件，另外插一句，redux不是react的产品，vue和angular中也可以使用redux；下面简单讲解，如何使用rea...
摘要：属性是必须的。需要一个与的一致。必须在的返回原。调试插件日志安装组件。然后加入到中即可例如扩展程序需要在应用市场安装然后在中使用增强功能将加入即可在线实例推荐阅读手稿 React-Redux Redux Action function addTodo(text) { return { type: ADD_TODO, text } } type 属性是必须的。...
摘要：和的结合简述相信很多前端开发者都听说或使用过，我曾写过一篇关于快速理解的文章，虽说是快速理解，但实际上更应该叫做复习吧。它通过高阶函数，纯函数使我们在编写组件时完全不用接触相关内容，只通过将组件和数据连接起来即可。 react-redux react和redux的结合 简述 相信很多前端开发者都听说或使用过react-redux，我曾写过一篇关于快速理解redux的文章，虽说是快...
阅读 3412·2021-11-24 10:22
阅读 3120·2021-11-23 09:51
阅读 3464·2021-11-22 09:34
阅读 3229·2021-11-19 09:40
阅读 2276·2021-11-15 11:39
阅读 1331·2021-10-14 09:42
阅读 3500·2021-10-08 10:04
阅读 1392·2019-08-30 15:52
