react 与 DOM
React源码中的dom-diff
这一章就来讲讲React在协调阶段的beginWork里面主要做的事情 -- dom diff。本文主要讲的是React17.0.2版本的diff，在此我也画了一个简单的流程图：在这里插入图片描述reconcileChildrendom diff的入口函数就是reconcileChildren，那么他的源码如下：//packages/react-reconciler/src/ReactFiberB
日期 2023-06-12 10:48:40
React源码中的dom-diff
这一章就来讲讲React在协调阶段的beginWork里面主要做的事情 -- dom diff。本文主要讲的是React17.0.2版本的diff，在此我也画了一个简单的流程图：在这里插入图片描述reconcileChildrendom diff的入口函数就是reconcileChildren，那么他的源码如下：//packages/react-reconciler/src/ReactFiberB
日期 2023-06-12 10:48:40React.createElement和ReactDom.render方法简单思路
实际上，JSX 仅仅只是 React.createElement(component, props, ...children) 函数的语法糖,因此，使用 JSX 可以完成的任何事情都可以通过纯 JavaScript 完成。例如，用 JSX 编写的代码：class Hello extends React.Component { render() { return <div>H
日期 2023-06-12 10:48:40react 路由 react-router/react-router-dom
react-router-dom中包含react-router 安装前者即可npm install react-router-dom -S复制import { BrowserRouter as Router, Route, Link, Switch } from 'react-router-dom'<Switch>组件，和switch语法一样，遇到匹配就结束，后面
日期 2023-06-12 10:48:40React在循环DOM的时候为什么需要添加key
一、React 渲染流程和更新流程react渲染流程：jsx -> 虚拟dom -> 真实domreact更新流程：props/state改变 -> render函数重新执行 -> 生成新的虚拟dom树 -> 新旧虚拟dom树进行diff -> 计算出差异进行更新 ->更新到真实的dom树所以在每次更新的时候，React需要基于这两颗不同的树之间的差别来判
日期 2023-06-12 10:48:40
react-react-dom v6 知识整合
bug收集：专门解决与收集bug的网站网址：www.bugshouji.com组件在项目开发过程经常发生变化，如:react-router-dom今天为大家分享关于：React-router-dom v6.3 知识总结一、路由模块的安装 npm install react-router-dom// 目前版本： v6.3官方案例：import { render } from "react
日期 2023-06-12 10:48:40说说 React 中 fiber、DOM、ReactElement、实例对象之间的引用关系
大家好，我是前端西瓜哥。本文探究 fiber、DOM、ReactElement、类组件实例对象之间的引用关系。React 版本为 18.2.0原生组件 fiber原生组件 fiber，指的就是 type 为 "span"、"div" 的 fiber。fiber.stateNode 指向真实 DOM 节点；node["__reactFiber$&qu
日期 2023-06-12 10:48:40React循环DOM时为什么需要添加key_2023-02-23
一、React 渲染流程和更新流程react渲染流程：jsx -> 虚拟dom -> 真实domreact更新流程：props/state改变 -> render函数重新执行 -> 生成新的虚拟dom树 -> 新旧虚拟dom树进行diff -> 计算出差异进行更新 ->更新到真实的dom树所以在每次更新的时候，React需要基于这两颗不同的树之间的差别来判
日期 2023-06-12 10:48:40![[React] Manipulate the DOM with React refs](/scriptcss/images/12.png)
[React] Manipulate the DOM with React refs
React is really good at creating and updating DOM elements, but sometimes you need to work with them yourself. A common use case for this is when you’re using a third party library that wasn’t built
日期 2023-06-12 10:48:40[React] Use React Fragments to make your DOM tree cleaner
In this lesson, we will look at Fragments and how they are useful in achieving a cleaner DOM structure without additional empty div elements. const HeaderFooter = () =>
日期 2023-06-12 10:48:40![[ReactJS] DOM Event Listeners in a React Component](/scriptcss/images/14.png)
[ReactJS] DOM Event Listeners in a React Component
React doesn't provide the listener to listen the DOM event. But we can do it in React life cycle: So when the compoment did mount, we add listeners to the dom event. And remember to remove the dom li
日期 2023-06-12 10:48:40reactjs虚拟DOM与真实DOM
关于虚拟DOM： 1.本质是Object类型的对象（一般对象） 2.虚拟DOM比较“轻”，真实DOM比较“重”，因为虚拟DOM是React内部在用&
日期 2023-06-12 10:48:40react服务端渲染同构报错Browser history needs a DOM
https://github.com/nozzle/react-static/issues/343 去掉了browserRouter就不报错了，但是又会有其他报错。。
日期 2023-06-12 10:48:40React虚拟DOM浅析
在Web开发中，需要将数据的变化实时反映到UI上，这时就需要对DOM进行操作，但是复杂或频繁的DOM操作通常是性能瓶颈产生的原因，为此，React引入了虚拟DOM（Virtual DOM）的机制。 什么是虚拟DOM？ 虚拟DOM VS 直接操作原生DOM？ 虚拟DOM VS MVVM？ 对React虚拟DOM的误解？
日期 2023-06-12 10:48:40React学习笔记 -- 组件通信之路由传参（react-router-dom）
最近在学习react，现在的工作中使用的是vue，在学习的过程中对两者进行比较，加深理解。 以下是react中的一小部分知识点，我个人觉得也是比较常用的知识点，react组件通信的其中一种方式--路由传参（react组件通信的方式有多种，如pro
日期 2023-06-12 10:48:40React Virtual DOM Explained in Simple English
If you are using React or learning React, you must have heard of the term “Virtual DOM”. Now what is a Virtual DOM, and why does React use it? Real DOM First things first, DOM stands for “Document Ob
日期 2023-06-12 10:48:40React和Vue等框架什么时候操作DOM
虽然网上都在将，React和Vue等框架尽量减少直接的DOM操作，但还有有些情况，必须直接操作
日期 2023-06-12 10:48:40JavaScript是如何工作的：编写自己的Web开发框架 + React及其虚拟DOM原理
这是专门探索 JavaScript 及其所构建的组件的系列文章的第 19 篇。 如果你错过了前面的章节，可以在这里找到它们： JavaScript 是如何工作的：引擎，运行时和调用堆栈的概述！ JavaScript 是如何工作的：深入V8引擎&编写优化代码的5个技巧！ JavaScript 是如何工作的：内存管理+如何处理4个常见的内存泄漏！ JavaScript 是如何工作的：事件循
日期 2023-06-12 10:48:40