react-redux作为胶水一样的东西，似乎没有深入了解的必要，但实际上，作为数据层（redux）与UI层（react）的连接处，其实现细节对整体性能有着决定性的影响。组件树胡乱update的成本，要比多跑几遍reducer树的成本高得多，所以有必要了解其实现细节
React 和 Vue 这两个极其优秀的前端类库，基本上占据了前端开发的半壁江山。
MVC中，数据（Model）、表现层（View）、逻辑（Controller）之间有明确的界限，但数据流是双向的，在大型应用中尤其明显。一个变化（用户输入或者内部接口调用）可能会影响应用的多处状态，例如双向数据绑定，很难维护调试
规则1：不要在循环，条件或嵌套函数中调用 Hook， 确保总是在你的 React 函数的最顶层调用他们。规则2：只能在函数组件或者自定义hook中使用hook函数。
Redux 是一个用于应用程序状态管理的开源JavaScript库，其核心是通过可管理和控制的状态来描述一个系统。这意味着其思想其实是可以应用于任何类型应用的开发的，包括移动应用。
以下面试题来源于github项目前端面试指南,那里有超过200道高频前端面试题及答案,目前拥有1400star.
以 store 为核心，可以把它看成数据存储中心，但是他要更改数据的时候不能直接修改，数据修改更新的角色由Reducers来担任，store只做存储，中间人，当Reducers的更新完成以后会通过store的订阅来通知react component，组件把新的状态重新获取渲染，组件中也能主动发送action，创建action后这个动作是不会执行的，所以要dispatch这个action，让store通过reducers去做更新React Component 就是react的每个组件。
虚拟 DOM (VDOM)是真实 DOM 在内存中的表示。UI 的表示形式保存在内存中，并与实际的 DOM 同步。这是一个发生在渲染函数被调用和元素在屏幕上显示之间的步骤，整个过程被称为调和。
react的功能其实很单一，主要负责渲染的功能，现有的框架，比如angular是一个大而全的框架，用了angular几乎就不需要用其他工具辅助配合，但是react不一样，他只负责ui渲染，想要做好一个项目，往往需要其他库和工具的配合，比如用redux来管理数据，react-router管理路由，react已经全面拥抱es6，所以es6也得掌握，webpack就算是不会配置也要会用，要想提高性能，需要按需加载，immutable.js也得用上，还有单元测试。。。。
状态是表示组件当前状况的 JS 对象。在 React 中，可以使用 useState 或者 this.state 维护组件内部状态，通过 props 传递给子组件使用。
React并不是将click事件绑定到了div的真实DOM上，而是在document处监听了所有的事件，当事件发生并且冒泡到document处的时候，React将事件内容封装并交由真正的处理函数运行。这样的方式不仅仅减少了内存的消耗，还能在组件挂在销毁时统一订阅和移除事件。
Mobx与Redux都是用来管理JavaScript应用的状态的解决方案，用以提供在某个地方保存状态、修改状态和更新状态，使我们的应用在状态与组件上解耦，我们可以从一个地方获得状态，在另一个地方修改，在其他地方得到他们更新后的状态。他们都遵循单一数据源的原则，这让我们更容易推断状态的值和状态的修改。当然他们并不一定要跟React绑定在一起，它们也可以在AngularJs和VueJs这些框架库里使用。
前言 在react+redux项目里，关于reducer处理state的方式，在redux官方文档中有这样一段描述： 不要修改 state。 使用 Object.assign() 创建了一个副本。不能这样使用Object.assign(state, {visibilityFilter: action.filter })，因为它会改变第一个参数的值。你必须把第一个参数设置为空对象。你也可以开启对ES7提案对象展开运算符的支持，从而使用 { ...state, ...newState }达到相同的目的。 对此
作者简介 黄子毅，目前在阿里数据中台前端团队，负责数据产品相关业务。前端精读创办者、数据流框架 Dob 作者、可视化编辑器 gaea-editor 作者、react-native-image-view
合成事件是 react 模拟原生 DOM 事件所有能力的一个事件对象，其优点如下：
前一段时间，React团队发布了 React 17 RC [1]，对于这个版本，官方说的是没有新特性，可以称作是一个 “垫脚石” 版本，为以后的版本更新做准备。主要是因为之前的 “all-or-nothing” 升级策略遇到了问题：一方面React团队要一直维护老旧的并且使用较少的API；一方面开发者在面对React版本升级时，往往需要升级整个项目，这意味较高的风险，特别对于很老旧的项目(哈哈，估计到时候很多人都会吐槽～)。所以提供了一个 渐进升级 的方案，那 React 17 就是使得 渐进升级 变得更加容易！为此还更改了 React 的事件代理模式。这篇文章是对官方提供的 渐进升级 的例子 Demo of Gradual React Upgrades [2]，表述一下自己认为它是如何工作的。
（2）区别 Redux更多的是遵循Flux模式的一种实现，是一个 JavaScript库，它关注点主要是以下几方面∶
（2）如果已经创建了 Create React App 项目，需要将 typescript 引入到已有项目中
一个应用的state树，存放了包括整个应用的ui状态、未同步到服务器的数据、缓存数据等。这个state的树就是一个普通的js对象，每一个属性对应一个子树，子树的属性又对应子子树，一层层向下延伸，所以如何组织state就很重要了。
在使用 react 的过程中，通常我们会通过 props 将父组件的一些数据传递到子组件，兄弟组件传递数据通过一个共同的父级，子传父可以通过回调函数来进行传递，当然这都是比较理想的情况，业务中往往不可能仅仅这样简单，最常见的一点就是跨很多层级的传递，你不可能一层层的通过 props 传递，这会让你的 props 变的异常臃肿不便
Redux的API非常少。Redux定义了一系列的约定（contract），同时提供少量辅助函数来把这些约定整合到一起。
Redux 源码本身并不复杂，是著名的“小而美”源码，很多人推荐去读一读，之前用过Redux，出于好奇我也去拜读了一下代码，希望能了解它是怎么工作的。
（1）无状态函数式组件 它是为了创建纯展示组件，这种组件只负责根据传入的props来展示，不涉及到state状态的操作
3.Redux是一个JavaScript状态容器，提供可预测的状态管理，三条基本原则：
像 react-redux、mobx-react、react-router 都使用了旧 Context api，可谓 context 无处不在。
在类定义中，我们可以使用到许多 React 特性，例如 state、 各种组件生命周期钩子等，但是在函数定义中，我们却无能为力，因此 React 16.8 版本推出了一个新功能 (React Hooks)，通过它，可以更好的在函数定义组件中使用 React 特性。
mobx相对来说⽐较简单，在其中有很多的抽象，mobx更多的使⽤⾯向对象的编程思维；redux会⽐较复杂，因为其中的函数式编程思想掌握起来不是那么容易，同时需要借助⼀系列的中间件来处理异步和副作⽤
简言之，HOC是一种组件的设计模式，HOC接受一个组件和额外的参数（如果需要），返回一个新的组件。HOC 是纯函数，没有副作用。
Thunk 是一个逻辑编程概念。你可以用来处理推迟任何事件的计算或者评估的函数，并且 React-Thunk 可以有效地充当应用程序的单独线程。
文档： https://reacttraining.com/react-router/web/guides/philosophy
前端应用的状态管理日益复杂。随着大前端时代的到来，前端愈来愈注重处理逻辑，而不只是专注 UI 层面的改进，而以 React 为代表的前端框架的出现，大大简化了我们编写 UI 界面的复杂度。虽然 React 提供了 State 机制实现状态管理，也有诸如“状态提升”等开发约定，但是这些方案只适用于小型应用，当你的前端应用有多达 10 个以上页面时，如何让应用状态可控、让协作开发高效成为了亟待解决的问题，而 Redux 的出现正是为了解决这些问题而生的！Redux 提出的“数据的唯一真相来源”、单向数据流、“纯函数 Reducers” 大大简化了前端逻辑，使得我们能够以高效、便于协作的方式编写任意复杂的前端应用。本篇教程致力于用简短的文字讲透 Redux，在实战中掌握 Redux 的概念和精髓。
总结： 类组件可以维护自身的状态变量，即组件的 state ，类组件还有不同的生命周期方法，可以让开发者能够在组件的不同阶段（挂载、更新、卸载），对组件做更多的控制。类组件则既可以充当无状态组件，也可以充当有状态组件。当一个类组件不需要管理自身状态时，也可称为无状态组件。
Immutable的中文翻译就是不可变，所以。对Immutable对象每一个操作都是返回的一个新的对象。寒假的时候再看看这个库的源码吧， 文档地址
组件之间复用状态逻辑很难，在hooks之前，实现组件复用，一般采用高阶组件和 Render Props，它们本质是将复用逻辑提升到父组件中，很容易产生很多包装组件，带来嵌套地域。
（1）不要在循环，条件或嵌套函数中调用Hook，必须始终在 React函数的顶层使用Hook
Context 通过组件树提供了一个传递数据的方法，从而避免了在每一个层级手动的传递 props 属性。
近期准备开发一个数据分析 SDK，定位是作为数据中台向外输出数据分析能力的载体，前端的功能表现类似低代码平台的各种拖拉拽。作为中台能力的载体，SDK 未来很大概率会需要支持多种视图层框架，比如Vue2/Vue3/React等。所以在技术架构上对视图层框架的依赖性越轻，迭代的成本越低。基于这样的目标，本文对前端状态管理工具进行调研，在技术选型上应当尽量减轻与视图框架的绑定程度，理想的目标是构建与视图框架无关的数据/状态管理层。
好了，接下来我们要做改变状态这件事了，我们要通过react中的内置API（setState方法），不能直接更改state，就像下面这样。
上一篇文章，我介绍了 Redux 的基本做法：用户发出 Action，Reducer 函数算出新的 State，View 重新渲染。 但是，一个关键问题没有解决：异步操作怎么办？Action 发出以后
当应用程序在开发模式下运行时，React 将自动检查咱们在组件上设置的所有 props，以确保它们具有正确的数据类型。对于不正确的类型，开发模式下会在控制台中生成警告消息，而在生产模式中由于性能影响而禁用它。强制的 props 用 isRequired定义的。
上一节，学习了 Redux 的基本用法：用户发出 Action，Reducer 函数算出新的 State，View 重新渲染。
两者都是用来初始化state的。前者是ES6中的语法，后者是ES5中的语法，新版本的React中已经废弃了该方法。
本文主要讲述这三方面内容： Redux 背后的设计思想 源码分析以及自定义中间件 开发中的最佳实践 Redux背后的设计思想 在讲设计思想前，先简单讲下Redux是什么？我们为什么要用Redux？
在所有 响应式编程 中，状态管理一直老生常谈的话题，而在 Flutter 中，目前主流的有 scope_model 、BloC 设计模式 、flutter_redux 、fish_redux 等四种设计，它们的 复杂度 和 上手难度 是逐步递增的，但同时 可拓展性 、解耦度 和 复用能力 也逐步提升。
在React中,数据流是单向的,并且是不可逆的,这其实,也很好理解,之所以这么设计,是因为组件复用的特点
自从React hooks发布以来已经有一段时间了，我很喜欢这个特性。这个hooks把我勾上了！
webpack 是一个现代 JavaScript 应用程序的静态模块打包器(module bundler)。当 webpack 处理应用程序时，它会递归地构建一个依赖关系图(dependency graph)，其中包含应用程序需要的每个模块，然后将所有这些模块打包成一个或多个 bundle
本文书接 从flux到redux ， 是《深入浅出react和redux》为主的比较阅读笔记。
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
ICP备案
实时音视频
对象存储
云直播
