尽管如此，我想我仍然有必要正式地介绍一下这本小册，因为我觉得这是作为小册作者的责任所在。 缘起 小册本身的性质算是一个项目教程，那为什么我要去做这样一个项目？...其实说来也挺好笑的，我仅仅只是想做一个精致的项目罢了。记得慕课网的名师七月曾经说过一句话: 技术这东西其实很纯粹，最后无非两点：一是打工赚钱，二是做自己想做的事情。而我后来所做的事情，恰好印证了后者。...这也是为什么类似题材的项目网上一大堆，我仍然坚持要做这个项目的原因。我想要靠自己独立做完成一个项目，它必须足够的精致，同时不是为了应付任何人。...用了函数组件后，是不是就没有了浅比较的方案了呢？并不是。...掌握CSS中的诸多技巧，提升自己的CSS能力，无论布局还是动画，都有相当多的实践和探索，未使用任何UI框架，样式代码独立实现。 彻底理解redux原理，并能够独立开发redux的中间件。
React Fiber 是一种基于浏览器的单线程调度算法。 React Fiber 用类似 requestIdleCallback 的机制来做异步 diff。...6、聊一聊 diff 算法 传统 diff 算法的时间复杂度是 O(n^3)，这在前端 render 中是不可接受的。...这就意味着，如果 dom 节点发生了跨层级移动，react 会删除旧的节点，生成新的节点，而不会复用。 2、component diff：如果不是同一类型的组件，会删除旧的组件，创建新的组件 ?...8、为什么虚拟dom 会提高性能? 虚拟dom 相当于在 JS 和真实 dom 中间加了一个缓存，利用 diff 算法避免了没有必要的 dom 操作，从而提高性能。 9、错误边界是什么？它有什么用？...因为 React 要知道当前渲染的是组件还是 HTML 元素。 19、redux 是什么？ Redux 是一个为 JavaScript 应用设计的，可预测的状态容器。
新的状态对于store的理解Store 就是把它们联系到一起的对象。...)注册监听器;通过 subscribe(listener)返回的函数注销监听器React中的props为什么是只读的？...Virtual DOM厉害的地方并不是说它比直接操作 DOM 快，而是说不管数据怎么变，都会尽量以最小的代价去更新 DOM。...尽管 React 使用高度优化的 Diff 算法，但是这个过程仍然会损耗性能.为什么React并不推荐优先考虑使用Context？...尽管非受控组件通常更易于实现，因为只需使用refs即可从 DOM 中获取值，但通常建议优先选择受控制的组件，而不是非受控制的组件。
redux 是一个应用数据流框架，主要解决了组件之间状态共享问题，原理是集中式管理，主要有三个核心方法：action store reduce工作流程view 调用store的dispatch 接受action...思想的实现，但其并不足以替代 Redux，可以理解成一个组件内部的 redux:并不是持久化存储，会随着组件被销毁而销毁；属于组件内部，各个组件是相互隔离的，单纯用它并无法共享数据；配合useContext...尽管不建议在app中使用context，但是独有组件而言，由于影响范围小于app，如果可以做到高内聚，不破坏组件树之间的依赖关系，可以考虑使用context对于组件之间的数据通信或者状态管理，有效使用props...展示专门通过 props 接受数据和回调，并且几乎不会有自身的状态，但当展示组件拥有自身的状态时，通常也只关心 UI 状态而不是数据的状态。容器组件则更关心组件是如何运作的。...容器组件会为展示组件或者其它容器组件提供数据和行为(behavior)，它们会调用 Flux actions，并将其作为回调提供给展示组件。容器组件经常是有状态的，因为它们是(其它组件的)数据源。
但是这种写法很少使用，并不是常用的写法。React允许对 setState方法传递一个函数，它接收到先前的状态和属性数据并返回一个需要修改的状态对象，正如我们在上面所做的那样。...Virtual DOM厉害的地方并不是说它比直接操作 DOM 快，而是说不管数据怎么变，都会尽量以最小的代价去更新 DOM。...尽管 React 使用高度优化的 Diff 算法，但是这个过程仍然会损耗性能.React Hooks 和生命周期的关系？...componentDidMount, componentDidUpdate： useLayoutEffect 与它们两的调用阶段是一样的。...的异步并不是说内部由异步代码实现，其实本身执行的过程和代码都是同步的，只是合成事件和钩子函数中没法立马拿到更新后的值，形成了所谓的异步。
props 是不可修改的，所有 React 组件都必须像纯函数一样保护它们的 props 不被更改。state 是在组件中创建的，一般在 constructor中初始化 state。...而不是为每个状态更新编写一个事件处理程序。React官方的解释：要编写一个非受控组件，而不是为每个状态更新都编写数据处理函数，你可以使用 ref来从 DOM 节点中获取表单数据。...Virtual DOM厉害的地方并不是说它比直接操作 DOM 快，而是说不管数据怎么变，都会尽量以最小的代价去更新 DOM。...尽管 React 使用高度优化的 Diff 算法，但是这个过程仍然会损耗性能.为什么React并不推荐优先考虑使用Context？...思想的实现，但其并不足以替代 Redux，可以理解成一个组件内部的 redux:并不是持久化存储，会随着组件被销毁而销毁；属于组件内部，各个组件是相互隔离的，单纯用它并无法共享数据；配合useContext
什么是 React的refs？为什么它们很重要refs允许你直接访问DOM元素或组件实例。为了使用它们，可以向组件添加个ref属性。...DOM,但在首次渲染上，虚拟DOM会多了一层计算，消耗一些性能，所以有可能会比html渲染的要慢注意，虚拟DOM实际上是给我们找了一条最短，最近的路径，并不是说比DOM操作的更快，而是路径最简单react...但是这种写法很少使用，并不是常用的写法。React允许对 setState方法传递一个函数，它接收到先前的状态和属性数据并返回一个需要修改的状态对象，正如我们在上面所做的那样。...它不但没有问题，而且如果根据以前的状态（ state）以及属性来修改当前状态，推荐使用这种写法。React中的状态是什么？它是如何使用的状态是 React 组件的核心，是数据的来源，必须尽可能简单。...基本上状态是确定组件呈现和行为的对象。与props 不同，它们是可变的，并创建动态和交互式组件。可以通过 this.state() 访问它们。跨级组件的通信方式？
5、diff 算法 传统 diff 算法的时间复杂度是 O(n^3)，为了降低时间复杂度，react 的 diff 算法做了一些妥协，放弃了最优解，最终将时间复杂度降低到了 O(n)。...，参考如下： 1、tree diff：只对比同一层的 dom 节点，忽略 dom 节点的跨层级移动 2、component diff：如果不是同一类型的组件，会删除旧的组件，创建新的组件 3、element...redux是将整个应用状态存储到一个地方成为store, 里面保存着一个状态树store three, 组件可以派发（dispatch）行为（action）给store, 组件内部通过订阅store中的状态...数据可变性的不同 Redux强调的是对象的不可变性，不能直接操作状态对象。而是在原来状态对象的基础上返回一个新的状态对象，最后返回应用的上一个状态 Mobx可以直接使用新值更新状态对象 4....状态更新方式不同 得益于 Mobx 的 observable，使用 mobx 可以做到精准更新 对应的 Redux 是用 dispath 进行广播，通过Provider 和 connect 来比对前后差别控制更新粒度
而单向数据流是指组件之间数据的传递。 局部刷新策略 局部刷新， 通俗点说就是，当数据发生变化时，直接重新渲染组件，以得到最新的视图。...组件化和数据流 Vue 中组件不像 React 组件，它不是完全以组件功能和 UI 为维度划分的，而 Vue 组件本质是一个 Vue 实例。...数据状态管理 对于较为复杂的数据状态，Redux 是 React 应用最常用的解决方案。 这里需要说明的是：Redux 和视图无关，它只是提供了数据管理的流程。...造成这些不同的 **本质原因**是 ： Redux 提倡不可变性，而 Vuex 的数据是可变的，Redux 中 reducer 每次都会生成新的 state 以替代旧的 state，而 Vuex 是直接修改...除此之外，Vue 新版本还重构了虚拟 DOM, Vue 新版本将虚拟 DOM 的节点分为动态节点和 静态节点。 静态节点是指不会发生改变的节点，这些节点在进行 diff 时是应该进行规避的。
为什么列表循环渲染的key最好不要用index举例说明变化前数组的值是[1,2,3,4]，key就是对应的下标：0，1，2，3变化后数组的值是[4,3,2,1]，key对应的下标也是：0，1，2，3那么...当然不是。这里的复杂性很大程度上来自于：我们总是将两个难以理清的概念混淆在一起：变化和异步。 可以称它们为曼妥思和可乐。如果把二者分开，能做的很好，但混到一起，就变得一团糟。...它们是只读组件，必须保持纯，即不可变。它们总是在整个应用中从父组件传递到子组件。子组件永远不能将 prop 送回父组件。这有助于维护单向数据流，通常用于呈现动态生成的数据。...Virtual DOM厉害的地方并不是说它比直接操作 DOM 快，而是说不管数据怎么变，都会尽量以最小的代价去更新 DOM。...尽管 React 使用高度优化的 Diff 算法，但是这个过程仍然会损耗性能.Hooks可以取代 render props 和高阶组件吗？通常，render props和高阶组件仅渲染一个子组件。
;mobx中的状态是可变的，可以直接对其进行修改 mobx相对来说比较简单，在其中有很多的抽象，mobx更多的使用面向对象的编程思维;redux会比较复杂，因为其中的函数式编程思想掌握起来不是那么容易，...在生命周期方法 should ComponentUpdate中，允许选择退出某些组件（和它们的子组件）的和解过程。 和解的最终目标是根据新的状态，以最有效的方式更新用户界面。...component diff：如果不是同一类型的组件，会删除旧的组件，创建新的组件 图片 element diff：对于同一层级的一组子节点，需要通过唯一 id 进行来区分 如果没有 id 来进行区分，...的异步并不是说内部由异步代码实现，其实本身执行的过程和代码都是同步的，只是合成事件和钩子函数中没法立马拿到更新后的值，形成了所谓的异步。...Redux是一个用来管理数据状态和UI状态的JavaScript应用工具。
diff 算法是指生成更新补丁的方式，主要应用于虚拟 DOM 树变化后，更新真实 DOM。所以 diff 算法一定存在这样一个过程：触发更新 → 生成补丁 → 应用补丁。...但不论是 componentWilReceiveProps 还 是 componentWilUpdate，都有可能在一次更新中被调用多次，也就是说写在这里的回调函数也有可能会被调用多次，这显然是不可取的...我们将它们称为纯组件，因为它们可以接受任何动态提供的子组件，但它们不会修改或复制其输入组件中的任何行为。...，需要手动处理变化后的操作;mobx适用observable保存数据，数据变化后自动处理响应的操作 redux使用不可变状态，这意味着状态是只读的，不能直接去修改它，而是应该返回一个新的状态，同时使用纯函数...;mobx中的状态是可变的，可以直接对其进行修改 mobx相对来说比较简单，在其中有很多的抽象，mobx更多的使用面向对象的编程思维;redux会比较复杂，因为其中的函数式编程思想掌握起来不是那么容易，
展示专门通过 props 接受数据和回调，并且几乎不会有自身的状态，但当展示组件拥有自身的状态时，通常也只关心 UI 状态而不是数据的状态。 容器组件则更关心组件是如何运作的。...不过，pureComponent中的 shouldComponentUpdate() 进行的是浅比较，也就是说如果是引用数据类型的数据，只会比较不是同一个地址，而不会比较这个地址里面的数据是否一致。...;mobx中的状态是可变的，可以直接对其进行修改 mobx相对来说比较简单，在其中有很多的抽象，mobx更多的使用面向对象的编程思维;redux会比较复杂，因为其中的函数式编程思想掌握起来不是那么容易，...Virtual DOM厉害的地方并不是说它比直接操作 DOM 快，而是说不管数据怎么变，都会尽量以最小的代价去更新 DOM。...尽管 React 使用高度优化的 Diff 算法，但是这个过程仍然会损耗性能. 在哪个生命周期中你会发出Ajax请求？为什么？
state 是多变的、可以修改，每次setState都异步更新的。diff算法如何比较?...尽管可以在 DevTools 过滤掉它们，但这说明了一个更深层次的问题：React 需要为共享状态逻辑提供更好的原生途径。可以使用 Hook 从组件中提取状态逻辑，使得这些逻辑可以单独测试并复用。...适用observable保存数据，数据变化后自动处理响应的操作redux使用不可变状态，这意味着状态是只读的，不能直接去修改它，而是应该返回一个新的状态，同时使用纯函数;mobx中的状态是可变的，可以直接对其进行修改...它们是只读组件，必须保持纯，即不可变。它们总是在整个应用中从父组件传递到子组件。子组件永远不能将 prop 送回父组件。这有助于维护单向数据流，通常用于呈现动态生成的数据。...所谓 Pre-commit，就是说我在这个阶段其实还并没有去更新真实的 DOM，不过 DOM 信息已经是可以读取的了；Commit 阶段：在这一步，React 会完成真实 DOM 的更新工作。
react中key的作用 简单的说：key 是虚拟DOM中的一种标识，在更新显示是key起到了极其重要的作用 复杂的说：当状态中的数据发生改变的时候，react会根据【新数据】生成【新的虚拟DOM】，随后...保存数据，数据变化后⾃动处理响应的操作 redux使⽤不可变状态，这意味着状态是只读的，不能直接去修改它，⽽是应该返回⼀个新的状态，同时使⽤纯函数；mobx中的状态是可变的，可以直接对其进⾏修改 mobx...你对【单一数据源】有什么理解 redux使用 store将程序的整个状态存储在同一个地方，因此所有组件的状态都存储在 Store 中，并且它们从 Store 本身接收更新。...Virtual DOM厉害的地方并不是说它比直接操作 DOM 快，而是说不管数据怎么变，都会尽量以最小的代价去更新 DOM。...尽管 React 使用高度优化的 Diff 算法，但是这个过程仍然会损耗性能. redux 有什么缺点 一个组件所需要的数据，必须由父组件传过来，而不能像 flux 中直接从 store 取 当一个组件相关数据更新时
为什么要用 Virtual DOM：（1）保证性能下限，在不进行手动优化的情况下，提供过得去的性能下面对比一下修改DOM时真实DOM操作和Virtual DOM的过程，来看一下它们重排重绘的性能消耗∶真实...Redux是一个用来管理数据状态和UI状态的JavaScript应用工具。...主要解决的问题： 单纯的Redux只是一个状态机，是没有UI呈现的，react- redux作用是将Redux的状态机和React的UI呈现绑定在一起，当你dispatch action改变state的时候...当一个组件中的状态改变时，React 首先会通过 "diffing" 算法来标记虚拟 DOM 中的改变，第二步是调节(reconciliation)，会用 diff 的结果来更新 DOM。...> ) }}React key 是干嘛用的 为什么要加？
你对【单一数据源】有什么理解redux使用 store将程序的整个状态存储在同一个地方，因此所有组件的状态都存储在 Store 中，并且它们从 Store 本身接收更新。...首先，Hooks 通常支持提取和重用跨多个组件通用的有状态逻辑，而无需承担高阶组件或渲染 props 的负担。Hooks 可以轻松地操作函数组件的状态，而不需要将它们转换为类组件。...render props是指一种在 React 组件之间使用一个值为函数的 prop 共享代码的简单技术，更具体的说，render prop 是一个用于告知组件需要渲染什么内容的函数 prop。...Virtual DOM厉害的地方并不是说它比直接操作 DOM 快，而是说不管数据怎么变，都会尽量以最小的代价去更新 DOM。...尽管 React 使用高度优化的 Diff 算法，但是这个过程仍然会损耗性能.对 React context 的理解在React中，数据传递一般使用props传递数据，维持单向数据流，这样可以让组件之间的关系变得简单且可预测
状态管理是前端整天遇到的概念，但是大家是否思考过什么是状态，管理的又是什么呢？ 我们知道，程序是处理数据的，数据是信息的载体，比如颜色是红色或蓝色这就是数据。 那为什么不叫数据管理呢？...为什么之前 jQuery 时代没咋听说状态管理的概念，而 Vue、React 时代经常听到呢？...所以 React 的 setState 是异步的，会做批量的 state 合并（注意，React 的 setState 传入的不是最终的 state，而是 state 的 diff，React 内部去把这些...这种前端框架自带的任意层组件的状态联动方案只能处理简单的场景，复杂的场景还是得用全局状态管理库，比如 Redux、Vuex、Mobx 这些。 为什么这么说呢？ 还记得状态管理的两层含义么？...虽然我们会用不同的前端框架，不同的全局状态管理库，结合不同的异步过程处理方案，但是思想都是一样的。 毫不夸张地说，理解了状态管理，就理解了前端开发的核心。
为什么要用 Virtual DOM：（1）保证性能下限，在不进行手动优化的情况下，提供过得去的性能下面对比一下修改DOM时真实DOM操作和Virtual DOM的过程，来看一下它们重排重绘的性能消耗∶真实...不过，pureComponent中的 shouldComponentUpdate() 进行的是浅比较，也就是说如果是引用数据类型的数据，只会比较不是同一个地址，而不会比较这个地址里面的数据是否一致。...尽管可以在 DevTools 过滤掉它们，但这说明了一个更深层次的问题：React 需要为共享状态逻辑提供更好的原生途径。可以使用 Hook 从组件中提取状态逻辑，使得这些逻辑可以单独测试并复用。...不仅要维护更复杂的DOM状态，而且中断后再继续，会对用户体验造成影响。在普遍的应用场景下，此阶段的耗时比diff计算等耗时相对短。...时间分片React 在渲染（render）的时候，不会阻塞现在的线程如果你的设备足够快，你会感觉渲染是同步的如果你设备非常慢，你会感觉还算是灵敏的虽然是异步渲染，但是你将会看到完整的渲染，而不是一个组件一行行的渲染出来同样书写组件的方式也就是说
Diff算法 刚才提到了，React会抓取每个状态下的内容，生成一个全新的Virtual DOM，然后通过和前一个的比较，找出不同和差异。...相关面试题：为什么React中列表模板中要加入key Diff运算实例 Diff在进行比较的时候，首先会比较两个根元素，当差异是类型的改变的时候，可能就要花更多的“功夫”了 不同类型的dom元素 比如现在状态有这样的一个改变...---- 为什么Redux 需要 reducers是纯函数？...好了，也就是说，从源码的角度来讲，redux要求开发者必须让新的state是全新的对象。那么为什么非要这么麻烦开发者呢？...这就是redux的reducer如此设计的原因了 参考资料 1.为什么Redux需要reducers是纯函数 2.深度剖析：如何实现一个 Virtual DOM 算法 3.Learn how to code
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
ICP备案
腾讯会议
云直播
对象存储
