zz130428的博客

当一个组件在显示与消失过程中存在过渡动画，可以很好的增加用户的体验。属性，让元素在两个状态之间平滑过渡，从而得到相应的动画效果。发生变化的时候，先保存移除的节点，当动画结束后才真正移除。在日常开发中，页面切换时的转场动画是比较基础的一个场景。可以帮助我们方便的实现组件的入场和离场动画。，然后开始执行动画，当动画结束后，移除两个。插入的节点，先渲染dom，然后再做动画。删除的节点，先做动画，然后再删除dom。当有一组动画的时候，就可将这些。当动画执行结束后，会移除两个

良好使用key属性是性能优化的非常关键的一步，注意事项为：key 应该是唯一的key不要使用随机值（随机数在下一次 render 时，会重新生成一个数字）使用 index 作为 key值，对性能没有优化react判断key。当拥有key的时候，react根据key属性匹配原有树上的子元素以及最新树上的子元素，像上述情况只需要将000元素插入到最前面位置当没有key的时候，所有的li标签都需要进行修改同样，并不是拥有key值代表性能越高，如果说只是文本内容改变了，不写key反而性能和效率更高

性能方面：使用 Virtual DOM，能够有效避免真实 DOM 数频繁更新，减少多次引起重绘与回流，提高性能。请求后，并不知道后续还有 9 次更新操作，因此会马上执行流程，最终执行 10 次流程。，意思为文档对象模型，是一个结构化文本的抽象，在页面渲染出的每一个结点都是一个真实。跨平台：React 借助虚拟 DOM，带来了跨平台的能力，一套代码多端运行。第二个参数是个对象，里面存着标签的一些属性，例如 id、class 等。节点，浏览器没这么智能，收到第一个更新。执行，返回值是一个对象，也就是虚拟。

Taro 利用 Babel、React、Webpack 等技术，通过封装原生 API 和提供不同的 Polyfill 实现了多端适配，同时也支持复杂的样式表达和自动化导入组件等特性。Taro 是一个多端统一开发框架，可以使用一套代码编译成微信小程序、支付宝小程序、百度智能小程序、字节跳动小程序、QQ 小程序、快应用、H5 等多个平台的应用。：Taro 在运行时对代码进行了一些优化，例如使用字典树实现 JSX 解析、避免使用内置事件监听器、减少对原生 API 的调用等方式来优化性能。

假设电梯有两种运行策略 debounce 和 throttle，超时设定为15秒，不考虑容量限制电梯第一个人进来后，等待15秒。如果过程中又有人进来，15秒等待重新计时，直到15秒后开始运送，这是防抖。：少量的触发，在规定的时间内是不会重复触发的，只有超过这个事件才会再次的触发。n 秒后在执行该事件，若在 n 秒内被重复触发，则重新计时。n 秒内只运行一次，若在 n 秒内重复触发，只有一次生效。当用户高频率的触发事件，事件较短，内部出现卡顿现象。电梯第一个人进来后，15秒后准时运送一次，这是节流。

React是一个前端js框架React高效灵活声明式设计，使用简单组件式开发，提高代码的复用率单向的数据绑定比双向的数据绑定更加安全1）虚拟dom不会进行重绘和回流，而真实dom会频繁重排与重绘2）虚拟dom的总损耗是”虚拟dom的增删改+真实dom的差异增删改+重排“；真实dom的消耗是”真实dom全部增删改+重排“真实dom​ 优点：直接操作HTML，易用​ 缺点：​ 1）解析速度慢，效率低，内存占用量高​ 2）性能差：频繁操作真实DOM，导致重绘、回流虚拟dom​ 优点：​

不是浏览器本身触发的事件，自己创建和触发的事件。在React中事件的写法和原生事件写法的区别？React 事件的命名采用小驼峰式（camelCase），而不是纯小写。使用 JSX 语法时你需要传入一个函数作为事件处理函数，而不是一个字符串。// HTML中的写法// React中的写法

React 并不会把所有的处理函数直接绑定在真实的节点上。而是把所有的事件绑定到结构的最外层，使用一个统一的事件监听器，这个事件监听器上维持了一个映射来保存所有组件内部的事件监听和处理函数。当组件挂载或卸载时，只是在这个统一的事件监听器上插入或删除一些对象。当事件发生时，首先被这个统一的事件监听器处理，然后在映射里找到真正的事件处理函数并调用。这样做的优点是解决了兼容性问题，并且简化了事件处理和回收机制（不需要手动的解绑事件，React 已经在内部处理了）

单一数据源：整个应用的全局 state 被存储在一棵 object tree 中，并且这个 object tree 只存在于唯一一个 store 中。State 是只读的：唯一改变 state 的方法就是触发 action，action 是一个用于描述已发生事情的普通对象。使用纯函数来执行修改：为了描述 action 如何改变 state tree，需要编写纯的 reducers。

在 React 16.8 之前，函数组件也称为无状态组件，因为函数组件也不能访问 react 生命周期，也没有自己的状态。react 自 16.8 开始，引入了 Hooks 概念，使得函数组件中也可以拥有自己的状态，并且可以模拟对应的生命周期。应该在什么时候使用 Hooks 呢？那么相对于传统class， Hooks 有哪些优势?

16版本先执行原生事件，当冒泡到document时，统一执行合成事件，17版本在原生事件执行前先执行合成事件捕获阶段，原生事件执行完毕执行冒泡阶段的合成事件,通过根节点来管理所有的事件原生的阻止事件流会阻断合成事件的执行，合成事件阻止后也会影响到后续的原生执行。

简单来说，memoization 是一个过程，它允许缓存递归/昂贵的函数调用的值，以便下次使用相同的参数调用函数时，返回缓存的值而不必重新计算函数。，它接收一个组件A作为参数并返回一个组件B，如果组件B的 props（或其中的值）没有改变，则组件 B 会阻止组件 A 重新渲染。想象一下，有一个组件显示数以千计的数据，每次用户单击一个按钮时，该组件或树中的每条数据都会在不需要更新时重新渲染。换句话说，如果组件中的任何值更新，整个组件将重新渲染，包括尚未更改其 values/props 的函数/组件。

React 团队在 2022 年 3 月 29 日正式发布了 React 的第 18 个版本。在这篇文章里简单介绍 React 18 的新特性，React Concurrent Mode（并发模式）的实现，以及简要的升级指南。

React 合成事件（SyntheticEvent）是 React 模拟原生 DOM 事件所有能力的一个事件对象，即浏览器原生事件的跨浏览器包装器。然后调用ensureListeningTo进行事件绑定，生成事件合成对象、收集事件、触发真正的事件。• 在捕获阶段，先注册的先执行，且React合成事件先于原生事件执行；冒泡阶段，先注册的后执行，且原生事件先于React事件执行。React 想实现一个全浏览器的框架， 为了实现这种目标就需要提供全浏览器一致性的事件系统，以此抹平不同浏览器的差异。

任何正在学习 React 并想使用 React 构建项目的人。有各种博客和文章可以为开发人员指导此类项目。我确实浏览过这些文章，但其中总是缺少一种项目。缺少的项目是音乐播放器和视频播放器。这两个项目都会让您有机会处理音频和视频。您将学到很多东西，例如处理播放和暂停音频的音频。今天，我们将在 React 中构建一个音乐播放器。设置环境播放/暂停音频音频处理时间（以当前时间和音频完整时长表示）为音频时间线添加范围滑块。

路由切换动画

reducer的概念是伴随着Redux的出现逐渐在JavaScript中流行起来。但我们并不需要学习Redux去了解Reducer。简单来说 reducer是一个函数：接收当前应用的state和触发的动作action，计算并返回最新的state。// 举个例子 计算器reducer，根据state（当前状态）和action（触发的动作加、减）参数，计算返回newStatedefault:}}

React16时原生事件与React事件执行时，冒泡阶段与捕获阶段没有区分开（原声捕获-> 原声冒泡 -> React捕获 -> React冒泡）；React17时优化了合成事件的执行，当与原生事件一起调用时，捕获阶段总是先于冒泡阶段（React捕获 ->原声捕获 -> 原声冒泡 -> React冒泡）React 合成事件（SyntheticEvent）是 React 模拟原生 DOM 事件所有能力的一个事件对象，即浏览器原生事件的跨浏览器包装器。然后，冒泡阶段开始，事件反向传播至文档。

React 采用的是虚拟 DOM (即 VDOM )，每次属性 (props) 和状态 (state) 发生变化的时候，render 函数返回不同的元素树，React 会检测当前返回的元素树和上次渲染的元素树之前的差异，然后针对差异的地方进行更新操作，最后渲染为真实 DOM，这就是整个 Reconciliation 过程，其核心就是进行新旧 DOM 树对比的 diff 算法。当根节点为不同类型的元素时，React 会拆卸原有的树并且建立起新的树。方法，会创建一棵由 React 元素组成的树。

这时候当我们在输入框输入内容的时候，会发现输入的内容并无法显示出来，也就是。受控组件，简单来讲，就是受我们控制的组件，组件的状态全程响应外部数据。一般情况是在初始化的时候接受外部数据，然后自己在内部存储其自身状态。大部分时候推荐使用受控组件来实现表单，因为在受控组件中，表单数据由。因此，受控组件我们一般需要初始状态和一个状态更新事件函数。如果选择非受控组件的话，控制能力较弱，表单数据就由。事件，输入的时候触发事件函数，在函数内部实现。非受控组件，简单来讲，就是不受我们控制的组件。当用户输入新的内容时，

1、props是传递给组件的（类似于函数的形参），而state是在组件内部被组件自己管理的（类似于在一个函数内声明的变量）；props是传递给组件的（类似于函数的形参），而state是在组件内部被组件自己管理的（类似于在一个函数内声明的变量）props是不可以被修改的，所有的react组件都必须像纯函数一样保护他们的props不被修改。开发react组件，最常用到的两个引起组件渲染的可能就是state和props。2、props是不可以被修改的，state是多变的，可被修改的。

reducer的概念是伴随着Redux的出现逐渐在JavaScript中流行起来。但我们并不需要学习Redux去了解Reducer。简单来说 reducer是一个函数：接收当前应用的state和触发的动作action，计算并返回最新的state。// 举个栗子 计算器reducer，根据state（当前状态）和action（触发的动作加、减）参数，计算返回newStatedefault:}}

React.lazy() 和 React.Suspense 的提出为现代 React 应用的性能优化和工程化提供了便捷之路。React.lazy 可以让我们像渲染常规组件一样处理动态引入的组件，结合 Suspense 可以更优雅地展现组件懒加载的过渡动画以及处理加载异常的场景。

在调用时按顺序加入数组中，如果使用循环、条件或嵌套函数很有可能导致数组取值错位，执行错误的 Hook。因为 Hooks 的设计是基于数组实现。这三个问题在一定程度上阻碍了 React 的后续发展，所以为了解决这三个问题，为了避免这样的情况，可以引入 ESLint 的 Hooks 检查插件进行预防。Hooks 的设计初衷是为了改进 React 组件的开发模式。就得从 Hooks 的设计说起。当然，实质上 React 的源码里不是数组，是链表。然而第三个问题决定了 Hooks 只支持函数组件。

其出现场景在于弥补 Javascript 没有不可变数据结构的问题，通过 structural sharing来解决的性能问题。内部提供了一套完整的 Persistent Data Structure，还有很多易用的数据类型，如。如果对象树中一个节点发生变化，只修改这个节点和受它影响的父节点，其它节点则进行共享。Immutable，不可改变的，在计算机中，即指一旦创建，就不能再被更改的数据。也就是使用旧数据创建新数据时，要保证旧数据同时可用且不变，同时为了避免。性能优化的时候，为了避免重复渲染，会在。

要回答这个问题得弄明白 ES6 的解构赋值(destructring assignment)语法。可以看到 useState 返回的是一个数组，那么为什么是返回数组而不是返回对象呢？如果在自定义的Hook中遇到了以上几个问题，不妨试试返回 object。返回数组，那么可以顺便对数组中的变量命名，代码看起来也比较干净。搞清楚了解构赋值，那上面的问题就比较好解释了。而如果是对象的话返回的值必须和。中使用一次，想要多次使用。内部实现返回的对象同名，必须得重命名返回值。

移动端中，用户访问了一个列表页，上拉浏览列表页的过程中，随着滚动高度逐渐增加，数据也将采用触底分页加载的形式逐步增加，列表页浏览到某个位置，用户看到了感兴趣的项目，点击查看其详情，进入详情页，从详情页退回列表页时，需要停留在离开列表页时的浏览位置上类似的数据或场景还有已填写但未提交的表单、管理系统中可切换和可关闭的功能标签等，这类数据随着用户交互逐渐变化或增长，这里理解为状态，在交互过程中，因为某些原因需要临时离开交互场景，则需要对状态进行保存。

render函数里面可以编写JSX，转化成createElement这种形式，用于生成虚拟DOM，最终转化成真实DOM在React 中，类组件只要执行了 setState 方法，就一定会触发 render 函数执行，函数组件使用useState更改状态不一定导致重新render组件的props 改变了，不一定触发 render 函数的执行，但是如果 props 的值来自于父组件或者祖先组件的 state在这种情况下，父组件或者祖先组件的 state 发生了改变，就会导致子组件的重新渲染。

中间件（Middleware）是介于应用系统和系统软件之间的一类软件，它使用系统软件所提供的基础服务（功能），衔接网络上应用系统的各个部分或不同的应用，能够达到资源共享、功能共享的目的。中间件会判断你当前传进来的数据类型，如果是一个函数，将会给函数传入参数值（dispatch，getState）作用是将所有的中间件组成一个数组，依次执行。如果想要实现一个日志功能，则可以使用现成的。在上面的学习中，我们了解到了。是官网推荐的异步处理中间件。，然后嵌套执行，最后执行。可以看到，中间件内部（

Fiber架构

connect的第三个参数就是用来做这件事。它真正连接 Redux 和 React，它包在我们的容器组件的外一层，它接收上面 Provider 提供的 store 里面的 state 和 dispatch，传给一个构造函数，返回一个对象，以属性形式传给我们的容器组件。componentDidMount时，添加事件this.store.subscribe(this.handleChange)，实现页面交互。接收Redux的store作为props，通过context对象传递给子孙组件上的connect。

不能把Symbol放在JSON中，因此，即使服务器具有安全漏洞并返回JSON而不是文本，该JSON也不能包含Symbol.for（'react.element'）。React将检查元素的$typeof属性，如果$typeof属性丢失或无效，将拒绝处理该元素。如果你经常使用React，你可能会对type、props、key、ref属性很熟悉，但是，什么是typeof属性？在React 0.14版本，它的修复方法是对每一个React元素使用Symbol来进行标记。但是实际上，你调用的是一个函数。

父组件在调用子组件的时候，在子组件标签内传递参数，子组件通过props属性就能接收父组件传递过来的参数。context创建成功后，其下存在Provider组件用于创建数据源，Consumer组件用于接收数据。使用context提供了组件之间通讯的一种方式，可以共享数据，其他数据都能读取对应的数据。父组件向子组件传一个函数，然后通过这个函数的回调，拿到子组件传过来的值。Provider组件通过value属性用于给后代组件传递数据。父组件作为中间层来实现数据的互通，通过使用父组件传递。

createStore并没有直接返回store中存放的state，而是返回一个函数getState来获取state，当我们调用getState去获取state时，需要返回一个state的复制品，也就是需要返回一个深拷贝state之后对象，这样可以避免state值的非法篡改，因为如何直接返回state的话，只需通过state[key] = xxxx就能对state进行修改，违背了redux只能通过dispatch(action)去更新state。5.可以添加中间件对提交的dispatch进行重写。

render 函数返回的是 JSX 的数据结构，用于描述具体的渲染内容，但是 render函数并不会去真正的渲染组件，真正的渲染是依靠 React 操作 JSX 描述结构来完成，而且 render 函数应该是一个纯函数，不应该在里面产生副作用，比如调用 setState 函数（render 函数在每次渲染的时候都会被调用，而 setState 又会触发渲染，所以就会造成死循环）在讨论React 的生命周期的时候，一定是在讨论类组件，因为函数组件并没有生命周期的概念，它本身就是一个函数，只会从头执行到尾巴。

大家在使用 的时候，假如回调函数中使用 的时候，会报错如下。看报错，我们知道 应该返回一个销毁函数（返回的 函数），如果 第一个参数传入 ，返回值则变成了 ，会导致 在调用销毁函数的时候报错**。 作为 中一个很重要的 ，可以在函数组件中执行副作用操作。它能够完成之前 中的生命周期的职责。它返回的函数的执行时机如下：不管是哪个，我们都不希望这个返回值是异步的，这样无法预知代码的执行情况，很容易出现难以定位的 Bug。所以 React 就直接限制了不能 useEffect 回调函数中不能支持

如果在react中这么样写：在react 15中将被渲染成：在react 16及之后的版本中将被渲染成：但这个会有限制，如果自定义的属性不是 , 或者 ，该属性依然会被忽略。所以目前可以这样添加 webkit-playsinline 属性： 另外，还可以通过 进行设置，比如：

hooks中 “奇怪”（其实符合逻辑） 的 “闭包陷阱” 的场景，同时，在许多 react hooks 的文章里，也能看到 useRef 的身影，那么为什么使用 useRef 又能摆脱 这个 “闭包陷阱” ？搞清楚这些问题，将能较大的提升对 react hooks 的理解。react hooks 一出现便受到了许多开发人员的追捧,或许在使用react hooks 的时候遇到 “闭包陷阱” 是每个开发人员在开发的时候都遇到过的事情 (以下react示范demo，均为react 16.8.3 版本)一定遭遇过以

React是一个前端js框架React高效灵活声明式设计，使用简单组件式开发，提高代码的复用率单向的数据绑定比双向的数据绑定更加安全1)Diff算法是虚拟DOM的一个必然结果，它是通过新旧DOM的对比，将在不更新页面的情况下，将需要内容局部更新2)Diff算法遵循深度优先，同层比较的原则3)可以使用key值，可以更加准确的找到DOM节点react中diff算法主要遵循三个层级的策略：tree层级conponent 层级element 层级tree层不会做任何修改，如果有不一样，直接删

从上面我们可以看到，同步任务进入主线程，即主执行栈，异步任务进入任务队列，主线程内的任务执行完毕为空，会去任务队列读取对应的任务，推入主线程执行。出现分歧的原因在于异步任务执行顺序，事件队列其实是一个“先进先出”的数据结构，排在前面的事件会优先被主线程读取。宏任务的时间粒度比较大，执行的时间间隔是不能精确控制的，对一些高实时性的需求就不太符合。同步任务：立即执行的任务，同步任务一般会直接进入到主线程中执行。会阻塞下面的代码（即加入微任务队列），先执行。这时候，事件循环，宏任务，微任务的关系如图所示。