1 JSX解析的问题

JSX其实是语法糖;

开发环境会将JSX编译成JS代码

react定义的方法,用来解析html,第一个参数是“html元素”,第二个参数是“属性”,第三个参数是其子元素;

所以下面的html会转成:

再如:

验证方式:使用babel的transfrom-react-jsx插件来转译react代码:

转译成:

此外,react是如何编译自定义的标签呢?

编译后:

vDom是React初次推广开来的,结合了JSX使用

snabbdom中的h函数=====vue中的_c函数======react中的createELement函数,都是返回的vnode,虚拟dom

然后在通过patch函数 第一次挂载元素,第二次diff

例如上面的h函数生成的vnode就像右侧的代码;

====

render(){
return (
<div>
<Todo/>
</div>
)
}
编译成:
React.createElement(
"div",
null,
React.createElement(Todo,null)
);
React.createElement(Todo,null) 相当于:
var todo = new Todo(null);
return todo.render()

所以

1. JSX编译成JS,然后JS再转成vnode,也就是最终渲染成html,数据驱动视图;

2. createELement函数相当于h函数,但是h函数第一个参数是默认的html标签名,而createELement函数第一个参数可以是自定义的元素名;

3. 何时patch:ReactDom.render() 和 setState

==============

setState是异步的。

vue修改属性也是异步的。

setState为何使用异步?

1 可能一次执行多个setState;

2 你无法规定限制用户如何使用setState

3 没有必要每次setState都重新渲染,考虑性能

4 即使每次渲染,用户也看不到中间的效果,比如定义的变量从1到10,最后只会直接出结果;

----

说一下 React setState 的过程

每个组件都会继承react的类,则都会有 renderComponent的方法

写个伪函数,模拟 renderComponent的方法

1:

2:

   

vue中使用各种 v-if等语句糅合到html中,而jsx是和js语法一样,单独放在{}中的

3 react的模板和js混合在一起,未分离

react相关知识点总结的更多相关文章

  1. react相关知识点

    1.react内联样式写法: <div style={{width:'200px',height:'100px',border:'1px solid red'}}> </div> ...

  2. react相关知识点链接整理

    1.React组件之间的通信 2.中间件做代理解决跨域问题 3.不要再问我跨域的问题了 4.React 组件数据流 && 组件间沟通 5.如何理解虚拟DOM 6.react性能调谐与d ...

  3. React其它相关知识点

    React其它相关知识点 一,解释一下React Fiber? 简单来说,核心就是在虚拟dom和浏览器的调用栈之间多了一个虚拟调用栈,和虚拟dom一样,这个虚拟调用栈也是在内存中的,这个虚拟调用栈就类 ...

  4. UITableView相关知识点

    //*****UITableView相关知识点*****// 1 #import "ViewController.h" // step1 要实现UITableViewDataSou ...

  5. 【原】整理的react相关的一些学习地址,包括 react-router、redux、webpack、flux

    因为平时经常去网上找react相关的一些地址,找来找去很麻烦,所以自己整理了一下,不过前面部分不是我整理的, 是出自于:http://www.cnblogs.com/aaronjs/p/4333925 ...

  6. Android开发涉及有点概念&相关知识点(待写)

    前言,承接之前的 IOS开发涉及有点概念&相关知识点,这次归纳的是Android开发相关,好废话不说了.. 先声明下,Android开发涉及概念比IOS杂很多,可能有很多都题不到的.. 首先由 ...

  7. IOS开发涉及有点概念&相关知识点

    前言,IOS是基于UNIX的,用C/C+/OC直通系统底层,不想android有个jvm. 首先还是系统架构的分层架构 1.核心操作系统层 Core OS,就是内存管理.文件系统.电源管理等 2.核心 ...

  8. IOS之UI--小实例项目--添加商品和商品名(使用xib文件终结版) + xib相关知识点总结

    添加商品和商品名小项目(使用xib文件终结版) 小贴士:博文末尾有项目源码在百度云备份的下载链接. xib相关知识点总结 01-基本使用 一开始使用xib的时候,如果要使用自定义view的代码,就需要 ...

  9. 学习记录013-NFS相关知识点

    一.NFS相关知识点 1.NFS常用的路径/etc/exports NFS服务主配置文件,配置NFS具体共享服务的地点/usr/sbin/exportfs NFS服务的管理命令,exportfs -a ...

随机推荐

  1. mysql子查询用法

    mysql子查询用法 1 可以当值来用<pre>select id from hcyuyin_share where id=(select id from hcyuyin_share li ...

  2. RestTemplate对象的使用

  3. quartz定时任务存储

    今天不聊quartz的概念,像任务bean,触发器,调度器这些随随便便都可以百度到,其中任务bean要实现job接口.对于这些创建生成的定时任务,它可以保存在内存中,重启失效,也可以保存在数据库里重启 ...

  4. python爬虫-爬取你想要的小姐姐

    一.准备 1. 原地址 2. 检查html发现,网页是有规则的分页, 最大图片的class为pic-large 二.代码 import requests import os from bs4 impo ...

  5. javascript常用小案例

    常用javascript小案例 样式调节 //注: 这个可以控制td中的字段成行显示 #modelInfos td,th { white-space: nowrap; } //文本输入框随着内容尺寸往 ...

  6. golang之 iota 常量生成器

    常量声明可以使用iota常量生成器初始化,它用于生成一组以相似规则初始化的常量,但是不用每行都写一遍初始化表达式.在一个const声明语句中,在第一个声明的常量所在的行,iota将会被置为0,然后在每 ...

  7. [Luogu5319][BJOI2019]奥术神杖(分数规划+AC自动机)

    对最终答案取对数,得到$\ln(Ans)=\frac{1}{c}\sum \ln(v_i)$,典型的分数规划问题.二分答案后,对所有咒语串建立AC自动机,然后套路地$f[i][j]$表示走到T的第i个 ...

  8. 怎样查看系统安装的python版本

    方法一:  在命令行下使用python -V 方法二:  在命令行下进入python交互模式, 可以在第一行看到python的版本信息

  9. Integer源码解析

    版权声明:本文为博主原创文章,未经博主允许不得转载. https://blog.csdn.net/wangyangzhizhou/article/details/77196626 概况 Java的In ...

  10. elk docker-compose

    version: '3.1' services: elasticsearch: image: docker.elastic.co/elasticsearch/elasticsearch:6.2.4 c ...