看到这里我有疑问：为什么需要这个变量？js是单线程语言，这些函数都是同步的，既然是同步场景，我们在调用dispatch时，js会执行完这个函数再处理其他函数，应该不会有交集。...，会导致死循环，这也时Redux为了保护而进行限制的一种体现。...）来保存监听函数，并且在订阅和取消订阅的时候使用了ensureCanMutateListeners方法来执行浅拷贝：图片这里我产生了很大的疑问，为什么要用如此不直观的方法来保存监听者。...；如果不指向同一个数组，说明已经被浅拷贝过了，那么就不用再次拷贝了，直接修改nextListener即可。...对于一个简单的中间件如打印简单日志，它基本长这样：图片我原本对Redux中间件并不熟悉，所以先去看了一下官方概念，对我了解中间件为什么要这么写有很大帮助。
我们希望展示一个 todo 列表，当一个 todo 被点击时，它将被加上删除线表示此 todo 已经完成，我们还加上了一个输入框，使得用户可以增加新的 todo。...•completed: boolean 用来表示是否完成，如果完成，那么样式上就会给这个元素划上删除线。•onClick() 是当这个 todo 被点击时将调用的回调函数。...之间的所有组件都会触发重新渲染，这带来了巨额的渲染开销，当我们的应用越来越复杂，这种开销显然是承受不起的。...通过对象的嵌套来类比组件的嵌套组合，这棵由 JavaScript 对象建模的状态树就是 Redux 中的 Store。...这种不直接修改原对象，而是返回一个新对象的修改，我们称之为 “纯化” 的修改。
（片段）：可以返回多个元素；Portals（插槽）：可以将子元素渲染到不同的 DOM 子树种；字符串和数字：被渲染成 DOM 中的 text 节点；布尔值或 null：不渲染任何内容。...React Hooks 的限制主要有两条：不要在循环、条件或嵌套函数中调用 Hook；在 React 的函数组件中调用 Hook。那为什么会有这样的限制呢？...那为什么不要在循环、条件或嵌套函数中调用 Hook 呢？因为 Hooks 的设计是基于数组实现。在调用时按顺序加入数组中，如果使用循环、条件或嵌套函数很有可能导致数组取值错位，执行错误的 Hook。...不同点：它们在开发时的心智模型上却存在巨大的差异。类组件是基于面向对象编程的，它主打的是继承、生命周期等核心概念；而函数组件内核是函数式编程，主打的是 immutable、没有副作用、引用透明等特点。...而函数组件本身轻量简单，且在 Hooks 的基础上提供了比原先更细粒度的逻辑组织与复用，更能适应 React 的未来发展。diff算法如何比较?
为什么选择使用框架而不是原生? 框架的好处: 组件化: 其中以 React 的组件化最为彻底,甚至可以到函数级别的原子组件,高度的组件化可以是我们的工程易于维护、易于组合拓展。...: 虚拟DOM的diff和patch都是在一次更新中自动进行的,我们无需手动操作DOM,极大提高开发效率 跨平台: 虚拟DOM本质上是JavaScript对象,而DOM与平台强相关,相比之下虚拟DOM可以进行更方便地跨平台操作...React 16之后有三个生命周期被废弃(但并未删除) componentWillMount componentWillReceiveProps componentWillUpdate 官方计划在17版本完全删除这三个函数...由于JavaScript中异步事件的性质，当您启动API调用时，浏览器会在此期间返回执行其他工作。...，取最后一次的执行，如果是同时setState多个不同的值，在更新时会对其进行合并批量更新。
当不需要使用生命周期钩子时，应该首先使用无状态函数组件组件内部不维护 state ，只根据外部组件传入的 props 进行渲染的组件，当 props 改变时，组件重新渲染。...（Redux支持React、Angular、jQuery甚至纯JavaScript）。在 React 中，UI 以组件的形式来搭建，组件之间可以嵌套组合。...React Hooks 的限制主要有两条：不要在循环、条件或嵌套函数中调用 Hook；在 React 的函数组件中调用 Hook。那为什么会有这样的限制呢？...那为什么不要在循环、条件或嵌套函数中调用 Hook 呢？因为 Hooks 的设计是基于数组实现。在调用时按顺序加入数组中，如果使用循环、条件或嵌套函数很有可能导致数组取值错位，执行错误的 Hook。...被废弃的三个函数都是在render之前，因为fber的出现，很可能因为高优先级任务的出现而打断现有任务导致它们会被执行多次。
，并且不会改变原数组 可以看到从索引为 1 的地方截取到索引为 3 的地方结束，返回的是一个被截取的数组，同时原数组没有被改变 splice 方法主要用来删除数组，并且可以添加数组元素，它接收的第一个参数是起始的索引...，第二个参数是删除的个数，后面的参数都是需要添加的元素 第二个参数以后的参数是需要增加的元素，在起始位置插入，可以理解为，删除了一些元素，然后在这里补上一些新的元素，splice 会改变原数组 可以看到从索引为...在之前的 indexOf 方法中存在着一些问题，主要是在于 NaN 的判断上，indexOf 没有办法去判断数组中是否存在 NaN 值，当我们需要判断数组中是否存在 NaN 值的时候，我们需要采用 includes...，因此 hasChanged 返回 false ，state 没有被更新 那为什么 redux 要这样设计呢？...state 总结 通过这几道面试题，我们复习了 JavaScript 中的循环语句，也区分了 splice 和 slice 而又深入理解 redux 中 reducer 的工作原理，这对我自己来说提升还是很大的
然而，我们有时会编写过于冗长和难以阅读的组件，包括从逻辑到显示呈现的所有内容。这会导致调试和修复困难。 # Props 穿透 当我们需要在组件树中传递数据时，我们可以使用 props。...但是，这是一个反模式，React 无法识别哪个项目是添加/删除/重新排序的，因为索引是根据数组中项目的顺序在每次渲染时给出的。虽然它通常可以正确渲染，但仍然有一些情况会导致失败。...但是，当我们使用嵌套的三元运算符时，代码会变得非常难以阅读。...当我们编写组件时，第一个在渲染中插入 div 元素的想法就会浮现，无论是在类组件的 render 方法中还是在函数式组件的返回语句中。虽然这种做法有效，但它并没有为浏览器提供足够的信息。...# 测试代码 在开发应用程序时，大多数开发人员不喜欢编写测试代码（我也不例外），但随着时间的推移，我开始尝试于编写单元测试和集成测试。
这个方法会在组件第一次“挂载”(被添加到 DOM)时执行，在组件的生命周期中仅会执行一次。...函数组件和类组件当然是有区别的，而且函数组件的性能比类组件的性能要高，因为类组件使用的时候要实例化，而函数组件直接执行函数取返回结果即可。为了提高性能，尽量使用函数组件。...在react17 会删除以下三个生命周期 componentWillMount，componentWillReceiveProps ， componentWillUpdate非嵌套关系组件的通信方式？...在 Redux 中，何为 storeStore 是一个 javascript 对象，它保存了整个应用的 state。...纯函数的输入输出确定性 o useMemo 纯的一个记忆函数 o useRef 返回一个可变的ref对象，其Current 属性被初始化为传递的参数，返回的 ref 对象在组件的整个生命周期内保持不变。
Redux的action和reducer已经足够复杂了，现在还需要理解Redux的中间件。为什么Redux的存在有何意义？为什么Redux的中间件有这么多层的函数返回？...写在前面：本文其实就是我理解Redux中间件的一个思考过程，中间不免来自我个人的吐槽，大家看看乐乐就好。 我们为什么要用中间件？ 我们为什么要用中间件？这个问题提的好！...这个时候难道我们要一个个去注释删除吗？ 不，我不干，这样可能还会改错。那么我们将此功能独立出来试试，这样不就可以实现复用了。将公用代码写入一个方法，然后变化的参数提取出来。...中间件只执行一次，并且作用于在createStore，而不是createStore返回的对象store。也就是说在store创建的时候，中间件已经执行完毕了。...此处需要注意dispatch因为我们需要传递的dispatch是变异之后的，而不是原生的。所以边我们改写下dispatch的方法，让中间件调用此方法时，是变异后的dispatch。
如果发现在不同的地方写了大量代码来做同一件事时，就可以用 HOC 5、为什么建议传递给 setState 的参数是一个 callback 而不是一个对象 因为 this.props 和 this.state...React在不使用JSX的情况下一样可以工作，然而使用JSX可以提高组件的可读性，因此推荐使用JSX 10、为什么不直接更新state状态 如果直接更新state状态，那么它将不会重新渲染组件，而是使用...15、当调用setState时，React render 是如何工作的 虚拟 DOM 渲染:当render方法被调用时，它返回一个新的组件的虚拟 DOM 结构。...浏览器只能读取JavaScript对象，而不能读取普通JavaScript对象中的JSX。...卸载阶段：这是组件生命周期的最后一个阶段，在这个阶段组件被销毁并从DOM中删除。 27、详细解释React组件的生命周期方法。
DOM 更新===》界面会有问题如果不存在对数据的逆序添加 逆序删除等破坏顺序操作，仅用于渲染展示，用index作为key也没有问题react hooks，它带来了那些便利代码逻辑聚合，逻辑复用HOC嵌套地狱代替...source参数时，默认在每次 render 时都会优先调用上次保存的回调中返回的函数，后再重新调用回调；useEffect(() => { // 组件挂载后执行事件绑定 console.log...思想的实现，但其并不足以替代 Redux，可以理解成一个组件内部的 redux:并不是持久化存储，会随着组件被销毁而销毁；属于组件内部，各个组件是相互隔离的，单纯用它并无法共享数据；配合useContext...source来进行控制，有如下几种情况：[source]参数不传时，则每次都会优先调用上次保存的函数中返回的那个函数，然后再调用外部那个函数；[source]参数传[]时，则外部的函数只会在初始化时调用一次...，返回的那个函数也只会最终在组件卸载时调用一次；[source]参数有值时，则只会监听到数组中的值发生变化后才优先调用返回的那个函数，再调用外部的函数。
和变更前 state 状态进行比较，从而确定是否调用 this.setState()方法触发Connect及其子组件的重新渲染为什么 useState 要使用数组而不是对象useState 的用法：const...[count, setCount] = useState(0)可以看到 useState 返回的是一个数组，那么为什么是返回数组而不是返回对象呢？...总结：useState 返回的是 array 而不是 object 的原因就是为了降低使用的复杂度，返回数组的话可以直接根据顺序解构，而返回对象的话要想使用多次就需要定义别名了。...（1）React16.8 加入hooks，让React函数式组件更加灵活，hooks之前，React存在很多问题：在组件间复用状态逻辑很难复杂组件变得难以理解，高阶组件和函数组件的嵌套过深。...在React中，组件返回的元素只能有一个根元素。为了不添加多余的DOM节点，我们可以使用Fragment标签来包裹所有的元素，Fragment标签不会渲染出任何元素。
（3）区别props 是传递给组件的（类似于函数的形参），而state 是在组件内被组件自己管理的（类似于在一个函数内声明的变量）。...相互关联且需要对照修改的代码被进行了拆分，而完全不相关的代码却在同一个方法中组合在一起。如此很容易产生 bug，并且导致逻辑不一致。在多数情况下，不可能将组件拆分为更小的粒度，因为状态逻辑无处不在。...被装饰对象 本身，而只是在外面套一个外壳接口。...React Hooks 的限制主要有两条：不要在循环、条件或嵌套函数中调用 Hook；在 React 的函数组件中调用 Hook。那为什么会有这样的限制呢？...那为什么不要在循环、条件或嵌套函数中调用 Hook 呢？因为 Hooks 的设计是基于数组实现。在调用时按顺序加入数组中，如果使用循环、条件或嵌套函数很有可能导致数组取值错位，执行错误的 Hook。
前段时间准备面试，总结了很多，下面是我在准备React面试时，结合自己的实际面试经历，以及我以前源码分析的文章，总结出来的一些 React高频面试题目。...setState时，根据 JavaScript的异步机制，会将异步代码先暂存，等所有同步代码执行完毕后在执行，这时 React的批处理机制已经走完，处理标志设被设置为 false，这时再调用 setState...所以，我更倾向于说， VitrualDom帮助我们提高了开发效率，在重复渲染时它帮助我们计算如何更高效的更新，而不是它比 DOM操作更快。 虚拟Dom中的$$typeof属性的作用是什么？...babel在编译时会判断 JSX中组件的首字母，当首字母为小写时，其被认定为原生 DOM标签， createElement的第一个变量被编译为字符串；当首字母为大写时，其被认定为自定义组件， createElement...为什么要引入？ 为什么推荐在 componentDidMount中发起网络请求？ React代码优化？ React组件设计要掌握哪些原则？ Redux的核心原理是什么？ 什么是 Redux中间件？
当发现节点不存在时，则该节点及其子节点会被完全删除掉，不会用于进一步的比较。 这样只需要对树进行一次遍历，便能完成整个 DOM 树的比较。...图片 这就意味着，如果 dom 节点发生了跨层级移动，react 会删除旧的节点，生成新的节点，而不会复用。...一旦有插入动作，会导致插入位置之后的列表全部重新渲染 这也是为什么渲染列表时为什么要使用唯一的 key。...（Redux支持React、Angular、jQuery甚至纯JavaScript）。 在 React 中，UI 以组件的形式来搭建，组件之间可以嵌套组合。...最典型的应用场景：当父组件具有overflow: hidden或者z-index的样式设置时，组件有可能被其他元素遮挡，这时就可以考虑要不要使用Portal使组件的挂载脱离父组件。
答案是输出为10，因为将对象传递给函数时的对象相似，仅传递其值，而不传递对内存位置的实际引用。这就是为什么更改仅影响函数范围内的参数的原因。 3、控制台输出是什么？...17、在JavaScript中使用事件委托时 例如，当我们必须侦听页面加载期间可能不存在的事件时，可以使用事件委托，并在父元素上提供事件处理程序并查看event.target。...不可以，嵌套是一种用于限制catch语句范围的控制结构。用简单的话来说，嵌套的catch仅捕获其作用域及其以下范围内的故障，而不捕获嵌套范围之外的链中较高的错误。 22、控制台输出是什么，为什么？...但是，可以在JavaScript中通过在未将所有可能的参数都传递给函数时返回不同的输出来执行重载。 29、return语句在数组的forEach循环中做什么？...它返回h，因为数组在JavaScript中是从零开始的，因此arr [2] [1]将可以访问外部数组的第3个元素和内部数组的第2个元素，从而得出值“ h”。
而函数组件本身轻量简单，且在 Hooks 的基础上提供了比原先更细粒度的逻辑组织与复用，更能适应 React 的未来发展。...思想的实现，但其并不足以替代 Redux，可以理解成一个组件内部的 redux: 并不是持久化存储，会随着组件被销毁而销毁； 属于组件内部，各个组件是相互隔离的，单纯用它并无法共享数据； 配合useContext...当一个 匹配成功时，它将渲染其内容，当它不匹配时就会渲染 null。没有路径的 将始终被匹配。...为了演示这一点，在渲染 Icketang组件时，分别传递和不传递user属性数据来观察渲染结果。...redux 在React中页面重新加载时怎样保留数据？
也就是key值不一样的时候通常我们输出节点的时候都是map一个数组然后返回一个ReactNode，为了方便react内部进行优化，我们必须给每一个reactNode添加key，这个key prop在设计值处不是给开发者用的...当 render 被调用时，它会检查 this.props 和 this.state 的变化并返回一下类型之一：原生的 DOM，如 divReact 组件数组或 FragmentPortals（传送门）...setTimeout中是同步Redux实现原理解析为什么要用redux在React中，数据在组件中是单向流动的，数据从一个方向父组件流向子组件（通过props）,所以，两个非父子组件之间通信就相对麻烦，...图片这就意味着，如果 dom 节点发生了跨层级移动，react 会删除旧的节点，生成新的节点，而不会复用。...，会导致插入位置之后的列表全部重新渲染这也是为什么渲染列表时为什么要使用唯一的 key。
由于JavaScript中异步事件的性质，当您启动API调⽤时，浏览器会在此期间返回执⾏其他⼯作。当React渲染⼀个组件时，它不会等待componentWillMount它完成任何事情。...React 16之后有三个⽣命周期被废弃(但并未删除) componentWillMount componentWillReceiveProps componentWillUpdate 官⽅计划在17版本完全删除这三个函数...卸载阶段: -componentWillUnmount：当我们的组件被卸载或者销毁了就会调⽤，我们可以在这个函数⾥去清除⼀些定时器，取消⽹络请求，清理⽆效的DOM元素等垃圾清理⼯作。...； componentWillReceiveProps：在初始化render的时候不会执行，它会在组件接受到新的状态(Props)时被触发，一般用于父组件状态更新时子组件的重新渲染 shouldComponentUpdate...的批量更新策略会对其进⾏覆盖，取最后⼀次的执⾏，如果是同时setState多个不同的值，在更新时会对其进⾏合并批量更新。
Refsref 的返回值取决于节点的类型：当 ref 属性被用于一个普通的 HTML 元素时，React.createRef() 将接收底层 DOM 元素作为他的 current 属性以创建 ref。...当 ref 属性被用于一个自定义的类组件时，ref 对象将接收该组件已挂载的实例作为他的 current。当在父组件中需要访问子组件中的 ref 时可使用传递 Refs 或回调 Refs。...合成事件是 react 模拟原生 DOM 事件所有能力的一个事件对象，其优点如下：兼容所有浏览器，更好的跨平台；将事件统一存放在一个数组，避免频繁的新增与删除（垃圾回收）。...经常被误解的只有在类组件中才能使用 refs，但是refs也可以通过利用 JS 中的闭包与函数组件一起使用。...可以使用自定义事件通信（发布订阅模式）可以通过redux等进行全局状态管理如果是兄弟组件通信，可以找到这两个兄弟节点共同的父节点, 结合父子间通信方式进行通信。为什么不直接更新 state 呢 ?
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
即时通信 IM
ICP备案
对象存储
实时音视频
