react 和简单介绍

80 阅读2分钟

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,随后呈现在页面中。
  */