拖拽交互常见于各种前端编辑器里，而“编辑器”是一个集成前端技术能力的综合性工程，其中就会涉及到各种形式的拖拽交互，因为“拖拽”是提升用户体验的重要交互方式，所以需要对拖拽的交互效果做各种定制化，作为开发者理应熟练掌握“拖拽”的使用！
高阶组件（higher-order components：以下简称HOC或HOC组件）是一个React组件复用的高级技巧。HOCs本身并不是React的API接口，他是React组件之间组织方式的一种模式。
React.memo 是一个高阶组件 (HOC)，可用于包装组件并记住其渲染的输出。这意味着只有当组件的 props 发生变化时，React 才会重新渲染组件。这对于防止不必要的重新渲染和提高应用程序的性能很有用。
React 是基于 JavaScript 的用户界面库，可灵活组合元素(html标签)并渲染到HTML中某个指定DOM元素下。
Re-rendering React components unnecessarily can slow down your app and make the UI feel unresponsive.
JSX，既不是字符串也不是HTML，本质上是一个 JavaScript 的语法扩展，且更接近于JavaScript，是通过React.createElement()创建的一个对象，称为React 元素。
大家都在试用React，之前呢，也给大家分享过一次主题为“浅谈Hooks&&生命周期”的内容，今天呢，作为延伸，来继续给大家介绍一些React的Advanced Topics，也就是一些高级的、不天天用的、但是我们需要会的知识点。
组件之间复用状态逻辑很难，在hooks之前，实现组件复用，一般采用高阶组件和 Render Props，它们本质是将复用逻辑提升到父组件中，很容易产生很多包装组件，带来嵌套地域。
第二个参数是一个函数，该函数会在 setState函数调用完成并且组件开始重渲染时调用，可以用该函数来监听渲染是否完成。
高阶组件 (HOC) 是 React 中用于重用组件逻辑的高级技术。HOC 本身并不是 React API 的一部分。它们是从 React 的组合性质中出现的一种模式。
该方法当props发生变化时执行，初始化render时不执行，在这个回调函数里面，你可以根据属性的变化，通过调用this.setState()来更新你的组件状态，旧的属性还是可以通过this.props来获取,这里调用更新状态是安全的，并不会触发额外的render调用。
完整高频题库仓库地址：https://github.com/hzfe/awesome-interview
注意：batchingStrategy 对象可以理解为“锁管理器”。这里的“锁”，是指 React 全局唯一的 isBatchingUpdates 变量，isBatchingUpdates 的初始值是 false，意味着“当前并未进行任何批量更新操作”。每当 React 调用 batchedUpdate 去执行更新动作时，会先把这个锁给“锁上”（置为 true），表明“现在正处于批量更新过程中”。当锁被“锁上”的时候，任何需要更新的组件都只能暂时进入 dirtyComponents 里排队等候下一次的批量更新，而不能随意“插队”。此处体现的“任务锁”的思想，是 React 面对大量状态仍然能够实现有序分批处理的基石。
你可以使用属性初始值设定项(property initializers)来正确绑定回调，create-react-app 也是默认支持的。在回调中你可以使用箭头函数，但问题是每次组件渲染时都会创建一个新的回调。
React并不是将click事件绑定到了div的真实DOM上，而是在document处监听了所有的事件，当事件发生并且冒泡到document处的时候，React将事件内容封装并交由真正的处理函数运行。这样的方式不仅仅减少了内存的消耗，还能在组件挂在销毁时统一订阅和移除事件。
React 中最常见的问题之一是组件不必要地重新渲染。React 提供了两个方法，在这些情况下非常有用：
前端发展速度非常之快，页面和组件变得越来越复杂，如何更好的实现 状态逻辑复用一直都是应用程序中重要的一部分，这直接关系着应用程序的质量以及维护的难易程度。
React.forwardRef 会创建一个React组件，这个组件能够将其接受的 ref 属性转发到其组件树下的另一个组件中。这种技术并不常见，但在以下两种场景中特别有用：
如果你想写的组件只包含一个 render 方法，并且不包含 state，那么使用函数组件就会更简单。我们不需要定义一个继承于 React.Component 的类，我们可以定义一个函数，这个函数接收 props 作为参数，然后返回需要渲染的元素。
React 并不是将 click 事件绑定到了 div 的真实 DOM 上，而是在 document 处监听了所有的事件，当事件发生并且冒泡到 document 处的时候，React 将事件内容封装并交由真正的处理函数运行。这样的方式不仅仅减少了内存的消耗，还能在组件挂在销毁时统一订阅和移除事件。
正如 我们的React教程第一部分 【点击直达】中所指出的，开始使用 React 相对容易。首先使用 Create React App（CRA）初始化一个新项目，然后开始开发。不过遗憾的是，随着时间的推移，代码可能会变得难以维护，特别是在你不熟悉 React 的情况下。组件有可能会变大，或者你可能最终得到一堆不是组件的组件，最终你可能会到处编写重复的代码。
高阶组件是重用组件逻辑的高级方法，是一种源于 React 的组件模式。 HOC 是自定义组件，在它之内包含另一个组件。它们可以接受子组件提供的任何动态，但不会修改或复制其输入组件中的任何行为。你可以认为 HOC 是“纯（Pure）”组件。
PureComponent表示一个纯组件，可以用来优化React程序，减少render函数执行的次数，从而提高组件的性能。
这是最有可能由面试官提出的 常被问到的50个React面试问答。为了方便您访问，我对React面试问题进行了归类：
英文 | https://blog.stackademic.com/top-40-reactjs-interview-questions-and-answers-for-2024-70c94e5fccca
通俗点理解就是，vuex 弱化 dispatch，通过commit进行 store状态的一次更变；取消了action概念，不必传入特定的 action形式进行指定变更；弱化reducer，基于commit参数直接对数据进行转变，使得框架更加简易;
前段时间准备面试，总结了很多，下面是我在准备React面试时，结合自己的实际面试经历，以及我以前源码分析的文章，总结出来的一些 React高频面试题目。
Omil是一个 webpack 的 loader，它允许你以一种名为单文件组件(SFCs)的格式撰写 Omi 组件：
（2）如果已经创建了 Create React App 项目，需要将 typescript 引入到已有项目中
合成事件是 react 模拟原生 DOM 事件所有能力的一个事件对象，其优点如下：
路由匹配是通过比较 <Route> 的 path 属性和当前地址的 pathname 来实现的。当一个 <Route> 匹配成功时，它将渲染其内容，当它不匹配时就会渲染 null。没有路径的 <Route> 将始终被匹配。
高阶组件HOC即Higher Order Component是React中用于复用组件逻辑的一种高级技巧，HOC自身不是React API的一部分，它是一种基于React的组合特性而形成的设计模式。
任何一个项目发展到一定复杂性的时候，必然会面临逻辑复用的问题。在React中实现逻辑复用通常有以下几种方式：Mixin、高阶组件(HOC)、修饰器(decorator)、Render Props、Hook。本文主要就以上几种方式的优缺点作分析，帮助开发者针对业务场景作出更适合的方式。
Keys 是 React 用于追踪哪些列表中元素被修改、被添加或者被移除的辅助标识。
组件是 React 应用 UI 的构建块。这些组件将整个 UI 分成小的独立并可重用的部分。每个组件彼此独立，而不会影响 UI 的其余部分。
如果您尝试直接改变组件的状态，React 将无法得知它需要重新渲染组件。通过使用setState()方法，React 可以更新组件的UI。
现前端的工程化越发重要，虽然使用Ctrl+C与Ctrl+V同样能够完成需求，但是一旦面临修改那就是一项庞大的任务，于是减少代码的拷贝，增加封装复用能力，实现可维护、可复用的代码就变得尤为重要，在React中组件是代码复用的主要单元，基于组合的组件复用机制相当优雅，而对于更细粒度的逻辑(状态逻辑、行为逻辑等)，复用起来却不那么容易，很难把状态逻辑拆出来作为一个可复用的函数或组件，实际上在Hooks出现之前，都缺少一种简单直接的组件行为扩展方式，对于Mixin、HOC、Render Props都算是在既有(组件机制的)游戏规则下探索出来的上层模式，一直没有从根源上很好地解决组件间逻辑复用的问题，直到Hooks登上舞台，下面我们就来介绍一下Mixin、HOC、Render Props、Hooks四种组件间复用的方式。
本期精读文章是：React Higher Order Components in depth
高阶组件（ higher-order component ，HOC ）是 React 中复用组件逻辑的一种进阶技巧。它本身并不是 React 的 API，而是一种 React 组件的设计理念，众多的 React 库已经证明了它的价值，例如耳熟能详的 react-redux。
计算出Virtual DOM中真正变化的部分，并只针对该部分进行原生DOM操作，而非重新渲染整个页面。
展示组件关心组件看起来是什么。展示专门通过 props 接受数据和回调，并且几乎不会有自身的状态，但当展示组件拥有自身的状态时，通常也只关心 UI 状态而不是数据的状态。
在React Diff算法中React会借助元素的Key值来判断该元素是新近创建的还是被移动而来的元素，从而减少不必要的元素重渲染。
在 super() 被调用之前，子类是不能使用 this 的，在 ES2015 中，子类必须在 constructor 中调用 super()。传递 props 给 super() 的原因则是便于(在子类中)能在 constructor 访问 this.props。
在 Vue 中，可以使用 mixins 混入的方式实现代码复用，而在 React 中，代码复用经历从 mixins 到 HOC，然后到 render props 的演变，对于这几种方案的曲折这里梳理下。
chrome浏览器安装react扩展 使用displayName属性 官方文档 扔个例子，写了个高阶组件，名字叫HOC，如果调用多次，就会出来多个HOC，优化后显示传入的组件名。 function getDisplayName(component) { return component.displayName || component.name || 'Component'; } export function withHeader(WrappedComponent) { return cla
组件状态数据或者属性数据发生更新的时候，组件会进入存在期，视图会渲染更新。在生命周期方法 should ComponentUpdate中，允许选择退出某些组件（和它们的子组件）的和解过程。
很多情况下，需要给多个组件添加或者修改一些特定的props，或者在所有组件基础上加个水印等等。而如果这个功能如果是针对多个组件的，每一个组件都写一套相同的代码，显得不是很明智，所以就可以考虑使用高阶组件。
当请求 /users/:id 被重定向去 '/users/profile/:id'：
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
即时通信 IM
ICP备案
对象存储
实时音视频
