react入门[js的编写]

react介绍

• 用于动态构建用户界面的javascript库
• 由facebook开源

react特点

• 声明式编码
• 组件化编码
• React Native编写原生应用
• 高效[Diffing算法]

react高效的原因

• 使用虚拟DOM,不总是直接操作页面的真实DOM
• DOM Diffing算法，最小页面重绘

react的基本使用

       #### react相关js库

• react.js: react核心库
• react-dom.js: 提供操作DoM的react扩展库
• babel.min.js: 解析JSX语法代码转化为JS代码的库

虚拟DOM的两种创建方式

• jsx创建

  const VDOM = (  
  			
  
  				Hello,React
  			
  		)
  

• js创建（不常用）

  //由React提供了一些API来创建一种 “特别” 的一般js对象
  const VDOM = 
  React.createElement('h1',{id:'title'},React.createElement('span',{},'Hello,React'))
  

真实DOM与虚列DOM

• 虚拟DOM对象最终都会被React转化成为 真实DOM
• 编码时只需操作虚拟DOM相关的数据

Jsx语法规则

• 定义虚拟DOM时，不要写引号
• 标签中混入js表达式要用{}
• 样式的类名指定不要用class,要用className
• 内联样式，要用style={{key:value}}的形式去写
• 只能有一个根标签
• 标签首字母
  • 若小写字母开头，则将该标签转为html中同名元素，若html中无该标签对应的同名元素，则报错。
  • 若大写字母开头，react就去渲染对应的组件，若组件没有定义，则报错

react中的定义组件

• 函数式组件

• 类式组件