react入门

react的特点

• 声明式编码（相对于命令式编码）
• 组件化编码
• React Native编写原生应用（可以在学习了react之后学习 React Native）
• 高效(优秀的Diffing算法)
  React高效原因

1. 使用虚拟DOM，没有直接操作页面真实DOM
2. DOM Diffing算法，最小化页面重绘（Diffing算法可以比较新的DOM与旧的DOM是否有区别，有区别重绘，无区别就无需再绘DOM）

创建虚拟DOM

1. 方式一

const VDOM = React.createElement('标签',{id:'id选择器'},'标签体内容')

2. 方式二

const VDOM = <h1>标签体内容</h1>
//渲染
ReactDom.render('h1',document.getElementById('id选择器'))

虚拟DOM对象最终都会被React转换为真实的DOM；我们编码时只需要操作React的虚拟DOM相关数据，React会转换为真实DOM变化而更新页面。

jsx

语法规则：

• VDOM中不需要加引号
• 样式的类名，不用属性class,用属性className;内联样式写法 像fontSize这些属性使用小驼峰形式书写。style里面加花括号，对应值加引号

<span style={{color:'white';fontSize:'29px'}}></span>

• VDOM中的跟标签只能有一个，而且必须有结尾符
• 标签字母
  1. 若标签以小写字母开头，先与html中同名的元素标签匹配，若html中没有，报错
  2. 若大写字母开头，查找react对应组件，若没有定义该组件，则报undefined错误。
• 遇到 <开头的代码, 以标签的语法解析: html同名标签转换为html同名元素, 其它标签需要特别解析
• 遇到以 { 开头的代码，以JS语法解析: 标签中的js表达式必须用{ }包含

形式

语法作用：将虚拟DOM元素渲染到页面中的真实容器DOM显示

ReactDOM.render(virtualDOM,containerDOM)

参数：

• virtualDOM：纯js或jsx创建的虚拟dom对象
• containerDOM：用来包含虚拟DOM元素的真实dom
  渲染类组件标签的基本流程：
• React内部会创建组件实例对象
• 调用render()得到虚拟DOM
• 插入指定的页面元素内部

模块化

组件化

函数式组件

//组件名必须要大写开头，所以函数名大写开头
MyCompent(){
	return <h1>我是函数定义组件（适用于【简单组件】的定义）</h1>
}
//渲染组件到页面
ReactDOM.render(<MyCompent />,document.getElementById('test'))

类式组件

class MyClassComp extends React.Component{
	render(){
		//render时放在哪？ -- MyClassComp 的圆形对象上，给实例使用
		//render的this是谁？ -- MyClassComp 组件实例对象
		return <h2>我是类定义组件（适用于【复杂组件】的定义）</h2>
	}
	//渲染组件到页面
	ReactDOM.render(<MyClassComp  />,document.getElementById('test'))
}

执行了ReactDOM.render(<MyClassComp />,...)发生了什么？
1.React解析组件标签，找到了MyClassComp 组件
2.发现组件是使用类定义的，随后new出来该类的实例，并通过该实例调用原型上的render方法
3.将render返回的虚拟DOM转为真实DOM，随后渲染到页面中。