皮皮网

1.React.render和reactDom.render的区别
2.React源码分析4-深度理解diff算法
3.React 弹窗组件用的 createPortal 是怎么实现的？
4.React设计原理，由浅入深解析 react18 源码（一）
5.如何掌握高级react设计模式: Render Props
6.preact源码解析，从preact中理解react原理

React.render和reactDom.render的区别

       åˆšå¼€å§‹å­¦ä¹ react.js。发现网上的资料，有些是写着react.render，有些写着reactDom.render.觉得很奇怪就查阅了一下资料。解释如下：

       è¿™ä¸ªæ˜¯react最新版api，也就是0.版本做出的改变。主要是为了使React能在更多的不同环境下更快、更容易构建。于是把react分成了react和react-dom两个部分。这样就为web版的react和移动端的React Native共享组件铺平了道路。也就是说我们可以跨平台使用相同的react组件。

       æ–°çš„react包包含了React.createElement，.createClass，.Component，.PropTypes，.children以及其他元素和组件类。这些都是你需要构建组件时助手。

       è€Œreact-dom包包括ReactDOM.render，.unmountComponentAtNode和.findDOMNode。在 react-dom/server ，有ReactDOMServer.renderToString和.renderToStaticMarkup服务器端渲染支持。

       æ€»çš„来说，两者的区别就是：ReactDom是React的一部分。ReactDOM是React和DOM之间的粘合剂，一般用来定义单一的组件，或者结合ReactDOM.findDOMNode（）来使用。更重要的是ReactDOM包已经允许开发者删除React包添加的非必要的代码，并将其移动到一个更合适的存储库。

React源码分析4-深度理解diff算法

       React 每次更新，都会通过 render 阶段中的 reconcileChildren 函数进行 diff 过程。这个过程是 React 名声远播的优化技术，对新的紫苑源码 ReactElement 内容与旧的 fiber 树进行对比，从而构建新的 fiber 树，将差异点放入更新队列，对真实 DOM 进行渲染。简单来说，diff 算法是为了以最低代价将旧的 fiber 树转换为新的 fiber 树。

       经典的 diff 算法在处理树结构转换时的时间复杂度为 O(n^3)，其中 n 是树中节点的个数。在处理包含 个节点的应用时，这种算法的性能将变得不可接受，需要进行优化。React 通过一系列策略，将 diff 算法的时间复杂度优化到了 O(n)，实现了高效的更新 virtual DOM。

       React 的 diff 算法优化主要基于以下三个策略：tree diff、component diff 和 element diff。tree diff 策略采用深度优先遍历，仅比较同一层级的元素。当元素跨层级移动时，React 会将它们视为独立的更新，而不是直接合并。

       component diff 策略判断组件类型是否一致，不一致则直接替换整个节点。这虽然在某些情况下可能牺牲一些性能，但考虑到实际应用中类型不一致且内容完全一致的情况较少，这种做法有助于简化 diff 算法，保持平均性能。

       element diff 策略通过 key 对元素进行比较，识别稳定的渲染元素。对于同层级元素的比较，存在插入、删除和移动三种操作。这种策略能够有效管理 DOM 更新，确保性能。

       结合源码的 diff 整体流程从 reconcileChildren 函数开始，根据当前 fiber 的存在与否决定是直接渲染新的 ReactElement 内容还是与当前 fiber 进行 Diff。主要关注的虚幻引擎源码查询下载函数是 reconcileChildFibers，其中的细节与具体参数的处理方式紧密相关。不同类型的 ReactElement（如 REACT_ELEMENT_TYPE、纯文本类型和数组类型）将走不同的 diff 流程，实现更高效、针对性的处理。

       diff 流程结束后，形成新的 fiber 链表树，链表树上的 fiber 标记了插入、删除、更新等副作用。在完成 unitWork 阶段后，React 构建了一个 effectList 链表，记录了需要进行真实 DOM 更新的 fiber。在 commit 阶段，根据 effectList 进行真实的 DOM 更新。下一章将深入探讨 commit 阶段的详细内容。

React 弹窗组件用的 createPortal 是怎么实现的？

       React 中弹窗组件的实现，往往依赖于 createPortal 这个 API。它能够将组件渲染到文档的任意位置，比如 antd 的 Modal 组件通常会直接挂在 body 下面。让我们通过源码分析来揭示这个功能的工作原理。

       首先，React 的组件渲染过程包含 render（创建虚拟DOM）和 commit（实际更新DOM）两个阶段。当我们在jsx中定义弹窗组件时，React 会将其编译成 render function，生成的 React Element 是虚拟DOM的核心表示。

       接下来，createPortal 函数的介入就显得尤为重要。当调用这个函数时，它会返回一个特殊的 React Element，类型为 REACT_PORTAL_TYPE。这个元素内部保存了容器信息（containerInfo），它是后续将组件挂载到指定位置的关键。

       在 reconciliation 阶段，这个 REACT_PORTAL_TYPE 的 React Element 会转换成对应的 fiber 节点，并将 containerInfo 存储在 fiber.stateNode 中。这个操作允许React根据不同类型的 fiber 节点管理它们的私有数据，如状态信息。

       到了 commit 阶段，React 会遍历 fiber 树并执行DOM操作。在处理 portal 的微信淘宝客源码 fiber 节点时，它会调用插入或追加的方法，将组件实际插入到 body 中，从而实现了我们看到的弹窗组件直接挂载到文档主体的效果。

       总结来说，createPortal 的使用使得React能够灵活地将组件渲染到任何指定位置，整个过程涉及到 render、reconciliation 和 commit 的协同工作，最终实现了弹窗组件的动态显示效果。

React设计原理，由浅入深解析 react 源码（一）

       React设计原理详解：深入理解React 源码（一）

       React的核心工具之一是jsx，它是一种语法扩展，开发者编写的代码会被Babel编译成ReactElement，进一步转化为FiberNode，这是一种虚拟DOM在React中的实现，它能表达组件状态和节点关系，同时具备可扩展性。

       FiberNode的工作方式采用深度优先遍历(DFS)策略，递归地处理ReactElement。在渲染过程中，递归分为beginWork（开始工作）和completeWork（完成工作）两个阶段。在ReactDOM的createRoot和render方法中，scheduleUpdateOnFiber和processUpdateQueue负责更新和创建子fiber节点。

       在commit阶段，关键步骤包括执行root上的mutation，以及对Host类型的FiberNode构建离屏DOM树。ChildReconciler的两个关键点是子ReactElement到子fiber的创建方式和flag标识的设置。最后，学习者需要注意的是，通过阅读本文，可以关注以下三点：

       理解jsx与FiberNode的关系

       掌握React的递归渲染过程和commit阶段的子阶段

       反思和分享你的学习体验，一起探讨React的深入知识

       如果你觉得这篇文章有价值，别忘了在留言区分享你的见解，或者将其推荐给你的朋友。让我们一起深化对React 源码的理解。

如何掌握高级react设计模式: Render Props

       掌握高级React设计模式：Render Props

       在一系列React设计模式探讨中，我们已经解决了复合组件和静态类属性的局限性，以及Context API的设置问题。现在，我们将深入理解一种新的模式，Render Props，它能解决之前遇到的网站源码怎么弄所有挑战。

       Render Props是一种设计模式，起初可能会让人感到困惑，它涉及到了React的顶级API和JSX代码如何转换。例如，JSX是React的扩展JavaScript语法，通过它，我们可以描述组件的UI并传递任何JavaScript对象，包括函数。在简单示例中，通过传递一个返回字符串的函数，我们可以实现与直接传递字符串相同的效果，只是在调用函数时动态生成内容。

       这种模式的重要性在于，它突破了传统组件通过props.children渲染子组件的限制。我们不再局限于直接渲染，而是通过调用props中的函数来替代。更进一步，我们可以传递参数给这些函数，增强组件的灵活性。

       Render Props设计模式不仅允许组件访问所有props，就像Context API那样，而且无需手动传递给每个子组件。然而，它牺牲了一些代码的直观性，可能需要理解像Context.consumer中函数那样的复杂性。不过，通过合理调整，我们可以让代码更易读，比如通过调用props.children来访问子项函数，这样既保持了灵活性，又提高了可读性。

       总的来说，Render Props是一种强大的工具，它使得组件设计更为灵活，易于重用，并且在跨应用部署时无需额外设置。尽管可能需要一些学习和适应，但它带来的好处使得这种模式值得深入理解和掌握。

preact源码解析，从preact中理解react原理

       基于preact.3.4版本进行分析，完整注释请参阅链接。竞价单页源码下载阅读源码建议采用跳跃式阅读，遇到难以理解的部分先跳过，待熟悉整体架构后再深入阅读。如果觉得有价值，不妨为项目点个star。

       一直对研究react源码抱有兴趣，但每次都半途而废，主要原因是react项目体积庞大，代码颗粒化且执行流程复杂，需要投入大量精力。因此，转向研究preact，一个号称浓缩版react，体积仅有3KB。市面上已有对preact源码的解析，但大多存在版本过旧和分析重点不突出的问题，如为什么存在_nextDom？value为何不在diffProps中处理？这些都是解析代码中的关键点和收益点。

       一. 文件结构

       二. 渲染原理

       简单demo展示如何将App组件渲染至真实DOM中。

       vnode表示节点描述对象。在打包阶段，babel的transform-react-jsx插件会将jsx语法编译为JS语法，即转换为React.createElement(type, props, children)形式。preact中需配置此插件，使React.createElement对应为h函数，编译后的jsx语法如下：h(App,null)。

       执行render函数后，先调用h函数，然后通过createVNode返回虚拟节点。最终，h(App,null)的执行结果为{ type:App,props:null,key:null,ref:null}，该虚拟节点将被用于渲染真实DOM。

       首次渲染时，旧虚拟节点基本为空。diff函数比较虚拟节点与真实DOM，创建挂载完成，执行commitRoot函数，该函数执行组件的did生命周期和setState回调。

       2. diff

       diff过程包含diff、diffElementNodes、diffChildren、diffProps四个函数。diff主要处理函数型虚拟节点，非函数型节点调用diffElementNodes处理。判断虚拟节点是否存在_component属性，若无则实例化，执行组件生命周期，调用render方法，保存子节点至_children属性，进而调用diffChildren。

       diffElementNodes处理HTML型虚拟节点，创建真实DOM节点，查找复用，若无则创建文本或元素节点。diffProps处理节点属性，如样式、事件监听等。diffChildren比较子节点并添加至当前DOM节点。

       分析diff执行流程，render函数后调用diff比较虚拟节点，执行App组件生命周期和render方法，保存返回的虚拟节点至_children属性，调用diffChildren比较子节点。整体虚拟节点树如下：

       diffChildren遍历子节点，查找DOM节点，比较虚拟节点，返回真实DOM，追加至parentDOM或子节点后。

       三. 组件

       1. component

       Component构造函数设置状态、强制渲染、定义render函数和enqueueRender函数。

       强制渲染通过设置_force标记，加入渲染队列并执行。_force为真时，diff渲染不会触发某些生命周期。

       render函数默认为Fragment组件，返回子节点。

       enqueueRender将待渲染组件加入队列，延迟执行process函数。process排序组件，渲染最外层组件，调用renderComponent渲染，更新DOM后执行所有组件的did生命周期和setState回调。

       2. context

       使用案例展示跨组件传递数据。createContext创建context，包含Provider和Consumer组件。Provider组件跨组件传递数据，Consumer组件接收数据。

       源码简单，createContext后返回context对象，包含Consumer与Provider组件。Consumer组件设置contextType属性，渲染时执行子节点，等同于类组件。

       Provider组件创建函数，渲染到Provider组件时调用getChildContext获取ctx对象，diff时传递至子孙节点组件。组件设置contextType，通过sub函数订阅Provider组件值更新，值更新时渲染订阅组件。

       四. 解惑疑点

       理解代码意图。支持Promise时，使用Promise处理，否则使用setTimeout。了解Promise.prototype.then.bind(Promise.resolve())最终执行的Promise.resolve().then。

       虚拟节点用Fragment包装的原因是，避免直接调用diffElementNodes，以确保子节点正确关联至父节点DOM。

       hydrate与render的区别在于，hydrate仅处理事件，不处理其他props，适用于服务器端渲染的HTML，客户端渲染使用hydrate提高首次渲染速度。

       props中value与checked单独处理，diffProps不处理，处理在diffChildren中，找到原因。

       在props中设置value为空的原因是，遵循W3C规定，不设置value时，文本内容作为value。为避免MVVM问题，需在子节点渲染后设置value为空，再处理元素value。

       组件异常处理机制中，_processingException和_pendingError变量用于标记组件异常处理状态，确保不会重复跳过异常组件。

       diffProps中事件处理机制，为避免重复添加事件监听器，只在事件函数变化时修改dom._listeners，触发事件时仅执行保存的监听函数，移除监听在onChange设置为空时执行。

       理解_nextDom的使用，确保子节点与父节点关联，避免在函数型节点渲染时进行不必要的关联操作。

React SSR 全流程原理：从 renderToString 到 hydrate

       SSR，即服务端渲染，是一种古老的技术，通过服务器返回已渲染的HTML供浏览器解析，构建页面。起初，服务器使用如JSP、PHP等模板引擎填充数据生成HTML，而没有组件的概念。引入组件后，服务器需要基于组件填充数据，渲染HTML以返回。在浏览器解析HTML后，还需关联至对应组件，添加交互逻辑和后续渲染。

       在使用组件的场景下，服务端渲染一次，客户端渲染一次，形成同构渲染。服务端多采用Node.js执行JS逻辑，渲染组件。组件在服务端渲染成字符串，拼接HTML返回，浏览器接收到HTML后再次渲染，执行hydrateRoot API，关联已有HTML标签，避免不必要的渲染。

       服务端渲染过程是HTML字符串的拼接，组件与元素分别有各自的渲染逻辑。组件通过传入参数执行，元素则拼接字符串，递归渲染生成HTML字符串。服务端渲染相对简单，而客户端渲染的hydrate过程则涉及React渲染流程，将JSX代码编译为render function，执行生成React Element（vdom），再转换为fiber结构，通过循环处理不同类型的React Element（vdom），完成转换和构建DOM树的过程。

       React SSR包括服务端通过renderToString将组件树渲染为HTML字符串，以及客户端通过hydrate将DOM与fiber树关联。服务端渲染通过递归拼接字符串实现，组件通过传入参数执行，元素通过拼接字符串生成HTML，最终返回HTML给浏览器。浏览器端渲染则在reconcile过程中，根据DOM是否可复用，将DOM与fiber关联，跳过创建新元素的步骤。

       总结而言，SSR是JSP和PHP时代存在的技术，通过Node.js服务端渲染组件为字符串，客户端再次渲染与DOM关联。React SSR则通过服务端的renderToString生成HTML字符串，客户端的hydrate将DOM与fiber树关联，实现交互逻辑和再次渲染，形成完整的SSR流程。

React源码学习入门（二）React的render究竟返回的是什么？

       深入解析React源码，首先关注核心问题：React的render究竟返回的是什么？理解这一问题，是进一步探索React源码的关键。

       React的render函数返回类型被定义为ReactNode。ReactNode可以是多种类型，其中最重要且常见的类型是ReactElement。JSX扩展语法，是React团队早期引入的一种JavaScript语法，允许开发者以类似HTML标签的方式编写代码。

       通过Babel编译器，JSX语法转化为React.createElement的调用，这是render函数实际返回的值。ReactElement是一个普通对象，包含type、props等关键属性，是React内部渲染返回的实际底层表示。

       ReactElement封装了所有需要的信息，形式简单却极其重要，它相当于一个标记（token），是一种DSL（Domain Specific Language）。通过这一抽象表示，React构建了组件的嵌套树，即Virtual DOM。Virtual DOM允许React实现跨端跨平台的通用处理，且得益于高效的Diff算法，显著提升了整体更新性能，为SSR（Server-Side Rendering）开辟了可能。

       React团队在年提出这一理念并实现，展现出前瞻性和创新性，引领了前端技术的新纪元。综上，React的render函数实质返回的是一种简单对象——ReactElement，这一对象通过构建Virtual DOM，实现了前端技术的革新。

react-Render props

       问题在于如何让一套逻辑在不同的组件间得到复用。换句话说，如果某个组件已经掌握了鼠标的位置信息，我们能否将其封装起来，使得其他组件也能利用这一功能呢？

       由此引出了 render props 的概念：我们可以传递一个包含函数的 prop 给组件，这个函数能够动态地决定需要渲染的内容，而不是将内容硬编码在组件内部，从而有效地改变其渲染结果。

       具体来说，render prop 是一个用于告知组件应渲染何种内容的函数 prop。实际上，任何用于指示组件渲染内容的函数 prop，在技术上都可以被称为 “render prop”。

       需要注意的是，当使用 Render props 与 React.PureComponent 结合时，要格外小心，如下面的代码示例所示：

       此外，我们还可以将 render props 写成实例方法。