react相关知识点总结
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相关知识点总结的更多相关文章
- react相关知识点
1.react内联样式写法: <div style={{width:'200px',height:'100px',border:'1px solid red'}}> </div> ...
- react相关知识点链接整理
1.React组件之间的通信 2.中间件做代理解决跨域问题 3.不要再问我跨域的问题了 4.React 组件数据流 && 组件间沟通 5.如何理解虚拟DOM 6.react性能调谐与d ...
- React其它相关知识点
React其它相关知识点 一,解释一下React Fiber? 简单来说,核心就是在虚拟dom和浏览器的调用栈之间多了一个虚拟调用栈,和虚拟dom一样,这个虚拟调用栈也是在内存中的,这个虚拟调用栈就类 ...
- UITableView相关知识点
//*****UITableView相关知识点*****// 1 #import "ViewController.h" // step1 要实现UITableViewDataSou ...
- 【原】整理的react相关的一些学习地址,包括 react-router、redux、webpack、flux
因为平时经常去网上找react相关的一些地址,找来找去很麻烦,所以自己整理了一下,不过前面部分不是我整理的, 是出自于:http://www.cnblogs.com/aaronjs/p/4333925 ...
- Android开发涉及有点概念&相关知识点(待写)
前言,承接之前的 IOS开发涉及有点概念&相关知识点,这次归纳的是Android开发相关,好废话不说了.. 先声明下,Android开发涉及概念比IOS杂很多,可能有很多都题不到的.. 首先由 ...
- IOS开发涉及有点概念&相关知识点
前言,IOS是基于UNIX的,用C/C+/OC直通系统底层,不想android有个jvm. 首先还是系统架构的分层架构 1.核心操作系统层 Core OS,就是内存管理.文件系统.电源管理等 2.核心 ...
- IOS之UI--小实例项目--添加商品和商品名(使用xib文件终结版) + xib相关知识点总结
添加商品和商品名小项目(使用xib文件终结版) 小贴士:博文末尾有项目源码在百度云备份的下载链接. xib相关知识点总结 01-基本使用 一开始使用xib的时候,如果要使用自定义view的代码,就需要 ...
- 学习记录013-NFS相关知识点
一.NFS相关知识点 1.NFS常用的路径/etc/exports NFS服务主配置文件,配置NFS具体共享服务的地点/usr/sbin/exportfs NFS服务的管理命令,exportfs -a ...
随机推荐
- mysql子查询用法
mysql子查询用法 1 可以当值来用<pre>select id from hcyuyin_share where id=(select id from hcyuyin_share li ...
- RestTemplate对象的使用
- quartz定时任务存储
今天不聊quartz的概念,像任务bean,触发器,调度器这些随随便便都可以百度到,其中任务bean要实现job接口.对于这些创建生成的定时任务,它可以保存在内存中,重启失效,也可以保存在数据库里重启 ...
- python爬虫-爬取你想要的小姐姐
一.准备 1. 原地址 2. 检查html发现,网页是有规则的分页, 最大图片的class为pic-large 二.代码 import requests import os from bs4 impo ...
- javascript常用小案例
常用javascript小案例 样式调节 //注: 这个可以控制td中的字段成行显示 #modelInfos td,th { white-space: nowrap; } //文本输入框随着内容尺寸往 ...
- golang之 iota 常量生成器
常量声明可以使用iota常量生成器初始化,它用于生成一组以相似规则初始化的常量,但是不用每行都写一遍初始化表达式.在一个const声明语句中,在第一个声明的常量所在的行,iota将会被置为0,然后在每 ...
- [Luogu5319][BJOI2019]奥术神杖(分数规划+AC自动机)
对最终答案取对数,得到$\ln(Ans)=\frac{1}{c}\sum \ln(v_i)$,典型的分数规划问题.二分答案后,对所有咒语串建立AC自动机,然后套路地$f[i][j]$表示走到T的第i个 ...
- 怎样查看系统安装的python版本
方法一: 在命令行下使用python -V 方法二: 在命令行下进入python交互模式, 可以在第一行看到python的版本信息
- Integer源码解析
版权声明:本文为博主原创文章,未经博主允许不得转载. https://blog.csdn.net/wangyangzhizhou/article/details/77196626 概况 Java的In ...
- elk docker-compose
version: '3.1' services: elasticsearch: image: docker.elastic.co/elasticsearch/elasticsearch:6.2.4 c ...