react 是什么 用于构建用户界面的javascript 库
是一个将数据渲染为html视图的开源javascript 库
react的特点
1 采用组件化模式,声明式编码,提高开发效率及组件复用率
2。在react native中可以使用react语法进行移动化开发
3 使用虚拟do m+优秀的Di f fing算法,尽量减少与真实DOm的交互
虚拟dom.
关于虚拟do m 本质是一个object 对象
虚拟dom 比较轻 真实dom 比较重。因为虚拟do m 是react内部在用无需真实DO m上那么多的属性
虚拟dom 最终会被react转化为真实dom 呈现在页上面
Jsx 语法规则
1定义虚拟DOM时 不要写引号
2。标签中 混入j s 表达式时要用到{}. 【js语句(代码)与j s表达式。 1 表达式: 一个表达式会产生一个值,可以放在任何一个需要的地方 2 语句(代码):控制代码走向的】
3 样式的类名指定不要用c l s s要用className
4 内联样式,要用到style={{key:value}}的形式去写
5 虚拟dom 必须只有一个根标签。
6 标签必须闭合
7 关于标签首字母
(1) 如果小写字母开头 则将该标签转为ht m l中的同名标签 如果html 中 无改同名元素则报错
(2) 若大写字母开头 react就去渲染对应的组件 若组件没有定义 则会报错
创建函数式组件
渲染组件到页面过程
ReactDOM.render(组件,document.getElementById('页面盒子'))
/*
执行了ReactDOM.render(组件,.......之后,发生了什么?
1.React解析组件标签,找到了组件。
2.发现组件是使用函数定义的,随后调用该函数,将返回的虚拟DOM转为真实DOM,随后呈现在页面中。
*/
.创建类式组件
渲染组件到页面过程
执行了ReactDOM.render(组件.......之后,发生了什么?
1.React解析组件标签,找到了组件组件。
2.发现组件是使用类定义的,随后new出来该类的实例,并通过该实例调用到原型上的render方法。
3.将render返回的虚拟DOM转为真实DOM,随后呈现在页面中。
*/