react首次渲染

最新推荐文章于 2024-01-10 11:12:10 发布
最新推荐文章于 2024-01-10 11:12:10 发布
阅读量581 收藏
点赞数
分类专栏： react react源码解析 文章标签： reactjs
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_38074118/article/details/113756064
版权
本文深入探讨React的JSX渲染过程，从首次渲染到DOM操作，包括render方法、diff算法、元素创建及组件挂载。详细阐述了mountComponent、mountNativeElement、diffComponent等关键步骤，涉及组件实例、属性处理以及生命周期方法如componentDidMount。
摘要由CSDN通过智能技术生成

全局暴露render方法

react的jsx第一次渲染

在js中调用

  1. 将jsx和dom的根节点传入render方法中
  2. render根据传入的元素调用diff方法中
  3. diff方法先判断是不是老节点，判断老节点依据是否含有_virtualDOM，
    根据不是老节点判断type类型调用createDOMElement创建对应的真实dom，
    第一次传入的话调用mountElement方法，mountElement使用isFunction方法区分渲染的是组件还是节点，
    组件调用mountComponent方法，节点调用mountNativeElement方法
  4. 在createDOMElement方法中先循环加递归的方式将所有子节点添加到根节点的子节点数组中，
    判断传入的type是文本类型还是元素节点，调用对应的方法，在递归创建子节点，
    并且将child是布尔值或null处理，将其转换为textContent属性，
    最后将其转为virtual DOM return掉
  5. 回到diff方法向下执行，如果是组件，调用diffComponent方法，
    如果是文本节点或者元素节点，为其更新内容或是元素的属性，
  6. 并在updateNodeElement方法处理属性时候，如果是特殊值on，addeventlisten添加方法，如果是value，checked等特殊处理
    其余的使用setAttribute方法添加属性
  7. 在mountComponent中进行处理类组件和函数组件的细化，判断原型上是否有render方法，render方法是类组件，没有是函数组件
    函数组件设置type是virtual DOM传入的props，类组件设置type的props和调用render方法
    如果渲染的组件又返回了函数，再次调用mountComponent，
    如果不是函数，就调用mountNativeElement，说明已经可以开始渲染了，获取到组件的实例对象，类组件的话调用setDom方法将dom对象存到类组件的实例对象
    如果是类组件，调用componentDidMount方法初次渲染
react学习—渲染过程（首次渲染）
xun__xing的博客
05-15 1172
渲染过程一、渲染过程1、渲染原理2、首次渲染(新节点渲染) 一、渲染过程 1、渲染原理 渲染：生成用于显示的对象，以及将这些对象形成真实的DOM对象 React元素：React Element，通过React.createElement创建（语法糖：JSX） 例如： <div><h1>标题</h1></div> <App /> React节点：专门用于渲染到UI界面的对象，React会通过React元素，创建React节点，ReactD
「React源码分析」三. React-DOM 中首次调用 render() 方法的DOM元素渲染流程
u012922190的博客
10-17 683
2021SC@SDUSC 本系列分析的React源码版本为撰写本文时的最新版（17.0.3） 首次调用render() 方法后的DOM元素渲染流程 首先让我们从这段最简单的React代码开始： var React = require('react'); var ReactDOM = require('react-dom'); function MyComponent() { return <div>Hello World</div>; } ReactDOM.render(&l
深入理解React源码 - 首次渲染 I
lacsis的专栏
01-13 1767
本文也同时发表在博客和HACKERNOON 界面更新本质上就是数据的变化。通过把所有会动的东西收敛到状态(state)，React提供了一个非常直观的前端框架。我也比较喜欢review基于React代码，因为我一般都是从数据结构开始看，这样可以在钻到细节代码之前建立对整个逻辑的初步理解。我也经常会好奇React的实现方式，然后就有了这篇文章。 阅读更多
react----------react初次渲染
weixin_30664051的博客
09-16 247
参考：https://mp.weixin.qq.com/s?__biz=MjM5MTA1MjAxMQ==&mid=2651229767&idx=1&sn=8f06283e43cfcda722189b56644f4dfc&chksm=bd4957c38a3eded58cd388130c4f303ff4033213ffcf157698d50f1ebfe8778...
React初次渲染内部流程详解：prerender, render与commit
在《20 React应用程序首次渲染时内部运行流程概述》的慕课专栏中，该章节主要针对已经建立的React基础知识，如组件与元素设计、React Fiber架构以及任务调度体系，进一步深入探讨React应用程序初次渲染时的内部运作...
详解超简单的react服务器渲染(ssr)入坑指南
10-17
它在服务器端将React组件渲染成HTML字符串，然后将这些字符串发送到客户端，使得用户在首次加载页面时就能看到完整的HTML结构，从而避免了传统SPA（Single Page Application）的白屏问题和搜索引擎爬虫无法解析动态...
react页面渲染之前_react 渲染顺序
weixin_32816613的博客
01-13 2590
工作中要对一个表格做再次更新, 可能是渲染后更新或者部分组件渲染之后, 对页面效果做处理之前对react的理解, 仅仅停留在render渲染.这次好好理解了下react的生命周期1 react组件有三种状态 Mounted(已插入真实的DOM)Updating(正在被渲染) 和Unmounted已移除真实DOM2 每个状态有两种处理方法will(进入状态之前调用) 和 did(进入状态之后调...
REACT 渲染 Hook
m0_55064043的博客
05-13 595
比对介绍 useEffect + useMemo +useCallback + useLayoutEffect
React源码解读01，页面初次渲染
Happy_Boy_z的博客
12-28 396
1. 页面初次渲染 JSX语法的转换 先看看我们使用React打印HelloWorld ReactDOM.render(( <h1 style="color:red">Hello World</h1> ),document.getElementById('root')); 使用React.createElement包裹 ReactDOM.render(( React.createElement("h1",{style:"color:red"},"Hello Wo
React：类组件第一次渲染的底层逻辑
KalinOvO的博客
07-10 265
创建类组件。
react学习记录-渲染列表数据
华工Web练习生
06-27 317
文章目录渲染列表数据渲染存放 JSX 元素的数组使用 map 渲染列表数据课后习题 渲染列表数据 在使用 React.js 处理列表数据的时候，需要掌握一些规则。 渲染存放 JSX 元素的数组 假设现在我们有这么一个用户列表数据，存放在一个数组当中： const users = [ { username: 'Jerry', age: 21, gender: 'male' }, { username: 'Tomy', age: 22, gender: 'male' }, { username: '
React.js学习随笔一：列表渲染
m0_60014407的博客
07-07 150
在学校学习过Vue，现在所在公司使用react开发，现在还在学习中。。。实习生小白一枚，请大家指教。 React的特色就是使用JSX代替了原生的html+js的方式，将html结构放入js中一块开发。 react大量使用了ES6语法，所以学习时最好先熟悉es6。 在列表渲染中，vue使用它自定义的指令v-for对数据进行遍历和操作，react的区别在于，以为它和JQuery一样是js库，所以它直接调用js方法进行操作，常用的是map方法。 import "./list.css" import Re
react源码分析记录（1）之render进入初次渲染
superermiao的博客
03-16 279
用了react快大半年，经常遇到不少报错，由于不了解源码，会解决很久的问题。现在打算开始阅读源码，一 个是学习设计者开发react框架的优秀的思想，另一个也是为了工作中解决相关问题。 就从render开始入手吧。 首先进入legacyRenderSubtreeIntoContainer函数。 ...
React框架-函数组件与类组件学习
Lycheezzj的博客
06-03 434
类组件的代码使用方式如下所示： 1.类组件创建类后必须要继承React.Component2.必须要有render 函数，返回的是react标签3.render 中必须有return 二、函数组件 函数组件也跟类组件一样使用ReactDOM.render方法在真实DOM容器中进行渲染 1.类组件有生命周期，函数组件没有2.类组件需要继承 Class，函数组件不需要3.类组件可以获取实例化的 this，并且基于 this 做各种操作，函数组件不行4.类组件内部可以定义并维护 state， 函数组件为无状态组
React+Axios调用api并且渲染在前端界面
祈澈菇凉
11-26 909
import React from 'react'; import axios from 'axios' class Axios extends React.Component { //构造函数 constructor() { super(); //react定义数据 this.state = { l...
关于React的正确打开方式（一）
专注在前端的路上人
04-08 4010
关于React的正确打开方式(一)
ReactHooks（1）：渲染与useState
最新发布
羽墨灵丘的博客
01-10 1648
react渲染与useState的使用指南
React如何先加载接口再render
weixin_43718291的博客
03-20 4257
在很多需求中 父组件要调用好几个接口传入子组件 这时候要注意都是异步调用还是同步调用 1.如果只调用一个的情况下 在state存一个loding的默认值（布尔类型）然后在dispatch中的回调函数callback中去改变state的loding， 然后在render中判断loding 是否return 2.如果多个接口 如果一个子组件需要调用2个或以上的接口 有两种情况要考虑：这个组件是要在...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值