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. Git操作入门

    生成ssh key: ​ ssh-keygen -t rsa -C "lkt@temp.com" ​ 按三次回车,最后在.ssh文件夹下得到id_rsa和id_rsa.pub两个文 ...

  2. Python25之字典1

    一.字典的意义 字典不同于前述的序列类型,他是一种映射类型,它的引入就是为了简化定义索引值和元素值存在的特定关系的定义和访问问题 二,字典定义 字典变量名 = {key1 : value1, key2 ...

  3. Django框架1——视图和URL配置

    三个命令 1.创建一个django项目 在cmd中:django-admin.py startproject project_name D:\python\django_site>django- ...

  4. Linux基础-08-进程控制

    1. 系统监视和进程控制工具—top和free 1) top命令的功能:top命令是Linux下常用的性能分析工具,能够实时显示系统中各个进程的资源占用状况,类似于Windows的任务管理器. 2) ...

  5. Oracle和SQL Server 用当前日期减去 '0001-01-01' 得出的天数不一致,相差2天,谁知道原因?

    Oracle和SQL Server 用当前日期减去 '0001-01-01' 得出的天数不一致,相差2天.求大佬科普

  6. PB笔记之数据窗口添加虚拟列的方法

    1.选择计算域控件: 2.输入公式 3.添加一个输入框作为列名,注意Name必须改为后缀为_t(PB固定识别_t)才可以绑定输入框和计算域作为虚拟列,虚拟列在最后一列时,有可能不能改变宽度,需往前挪才 ...

  7. ELK基础配置

    前言 近期在研究日志系统的设计,感觉现在公司的子系统和接口太多了,日志看不过来,就想着有没有一种方法可以把各个程序的日志组合到一起.于是乎就搜到了ELK.开始对ELK的概念完全搞不懂,就照着各个平台文 ...

  8. linux命令行删除N天前的数据的命令

    命令:  find . -mtime +N -type f -name "*.log.*" -exec rm -f {} \; 简单解释: find .查询  ; -mtime 规 ...

  9. apply,call和bind的使用及区别

    1.用途 1)apply,call和bind都是 用来改变this的指向 2)apply和call会让当前函数立即执行,而bind会返回一个函数,后续需要的时候再调用执行 2.this指向问题 thi ...

  10. 监控SQL:执行表中所有sql语句、记录每个语句运行时间(3)

    原文:监控SQL:执行表中所有sql语句.记录每个语句运行时间(3) 通过执行一个 带参数的存储过程  exec  OpreateTB('OpreateUser','IsRun')  更新表的数据 表 ...