React飞行日记(三) - JSX语法的渲染流程

Jsx的渲染流程

在React.js中, 其为我们提供了一种JSX语法, 能够直接在JS文件中进行虚拟DOM代码的编写, 并在编译后转换成真实DOM渲染到页面中, 那么React是怎么把JSX的虚拟DOM转换成真实的DOM?

主要靠两个API : React.createElement | ReactDOM.render

实验代码

显示效果

渲染步骤

需要借助babel来帮我们编译JSX语法的代码

babel网址
用法如下↓↓↓↓↓↓↓↓
jsx语法转换成编译后, <div></div>就变成了React.createElement(...)这样的结构

执行React.createElement(...)会返回一个对象, 我称他为 抽象DOM对象 该对象如下
```
// 被返回的对象
{type: 'div',key: null,ref: null,props: {id: 'onde', style: {color: "red"}, childre:[{..},{..}]},__proto__: Object...
}
```
执行React.render方法 ( 第五篇会重写render方法 )
1. 会把React.createElement() 生成的对虚拟DOM对象作为第一参数
2. 并渲染到到传入的第二个参数容器中( 第二参数是容器 )
3. 最后执行第三个回调函数

React飞行日记(三) - JSX语法的渲染流程相关推荐

jsx 调用php,JavaScript_JavaScript的React框架中的JSX语法学习入门教程，什么是JSX？在用React写组件的 - phpStudy...
JavaScript的React框架中的JSX语法学习入门教程什么是JSX? 在用React写组件的时候,通常会用到JSX语法,粗看上去,像是在Javascript代码里直接写起了XML标签,实质上 ...
React框架简介（JSX语法、组件、虚拟DOM渲染）
目录 React框架为什么要学习React React特点 React核心 JSX语法语法详解 React开发过程实际DOM 虚拟DOM React组件函数组件类组件虚拟DOM渲染过程 R ...
React基本使用、jsx语法介绍
文章目录 1. 第一个 react 应用 2. jsx 2.1 jsx 介绍 2.2 使用 jsx 重构页面显示结构 2.3 jsx 表达式 2.4 jsx 动态属性赋值 2.5 jsx 列表渲染 1 ...
React 学习笔记：JSX 语法
JSX JSX 是 JavaScript XML 的简写,表示了在 JavaScript 中书写 XML 格式的代码.它可以让我们在 React 中创建元素更加简单,并且保留 HTML 代码的结构更直 ...
React飞行日记(二) -邂逅React
-React 渐进式框架: 最流行的框架设计思想我们在使用一个框架的时候, 如果只想使用其中几个功能, 但是需要引入一个庞大的框架, 过于臃肿, 这时候渐进式框架的特点就来了特点: 能够把各个功能 ...
React学习笔记一 JSX语法组件
JSX语法 1.标签不能添加引号,换行用括号包裹,并且只有一个根标签 const H1 = <h1>标题</h1> const Div = (<div><h1 ...
html将页面分成三块_导航渲染流程你真的知道从输入URL到页面展示发生了什么吗？（内附思维导图）...
导航渲染流程通过这篇文章当你被问到从URL输入到页面展示都发生了什么的时候,基本都能对答如流,甚至可以一直深入的说,说到面试官闭麦哈哈哈~ 以下是本文的思维导图,直接拿图「点个赞」再走吧 ~ 求求了 ...
技术分享PPT整理（三）：网页渲染流程
在我刚开始学习Web开发的时候,一直有个疑问--我写出的代码究竟是在什么时候发生作用的呢?是不是每次我修改代码网页都随之变化了?当然,现在来看这肯定是一个错误的想法,经过一段时间的工作和学习后,代码到 ...
React飞行日记(五) - 重构React渲染函数React.createElement与ReactDOM.render
为什么在JS文件中用那么几行神奇的代码, 就能够把虚拟DOM转换成真实DOM?并且还实实在在的插入了页面中? 为了搞明白这一切, 我自己写了两个方法, 也就是对React.createElementR ...

React飞行日记(三) - JSX语法的渲染流程

Jsx的渲染流程

实验代码

显示效果

渲染步骤

React飞行日记(三) - JSX语法的渲染流程相关推荐

最新文章

热门文章