react项目的创建
1、运行‘cnpm react react-dom -s’安装包
2、在项目中导入相关的包
// 2.1 react是专门用来创建react组件、组件生命周期等这些东西的;
// 2.2 react-dom里面主要封装了和DOM相关的包,比如要把组件渲染到页面上
import React from 'react'
import ReactDOM from 'react-dom'
3、创建JS虚拟DOM节点
// 在 react 中,如要要创建 DOM 元素了,只能使用 React 提供的 JS API 来创建 ,不能【直接】像 Vue 中那样,手写 HTML 元素
// React.createElement() 方法,用于创建 虚拟DOM 对象,它接收 3个及以上的参 数
// 参数1: 是个字符串类型的参数,表示要创建的元素类型
// 参数2: 是一个属性对象,表示 创建的这个元素上,有哪些属性
// 参数3: 从第三个参数的位置开始,后面可以放好多的虚拟DOM对象,这写参数, 表示当前元素的子节点
<div title="this is a div" id="mydiv">这是一个div</div>
var myH1 = React.createElement('h1', null, '这是一个大大的H1')
var myDiv = React.createElement('div', { title: 'this is a div', id: 'mydiv' }, '这是一个div', myH1)
4、使用reactDOM 把元素渲染到我们指定的容器中
//ReactDOM。render(‘要渲染的虚拟DOM元素’,‘要渲染到页面上的那个位置中’)
//注意:ReactDOM.render() 方法的第二个参数,和vue不一样,不接受"#app"这样的字符串,而是需要传递一个原生的DOM对象
ReactDOM.render(myDiv,document.getElementByID('app'))
jsx语法
1、运行 cnpm babel-preset-react -D ;然后再.babelrc中添加语法配置
2、jsx语法的本质:还是以React.creatElement 的形式来实现的,并没有直接把用户写的HTML代码,渲染到页面上
3、如果要在jsx语法内部书写js代码了,那么所有的js代码,必须写到{}内部;
4、但编译引擎,在编译jsx代码的时候,如果遇到了<那么就把他当做HTML代码去编译,如果遇到{}就把花括号内部的代码当做普通js代码去编译;
5、在{}内部,可以写任何符合js规范的代码;
6、在jsx中,如果要为元素添加class属性了,那么必须写成className,因为class在es6中是一个关键字;和class类似,label标签for属性需要替换为htmlFor.
7、在jsx创建DOM的时候,所有的节点,必须有唯一的根元素进行包裹;
8、如果要写注释,注释必须放到{}内部;
组件的生命周期
1、组件创建阶段:组件创建阶段的是生命周期函数 有一个显著的特性 创建阶段的生命周期函数 在组件的一辈子中只执行一次
1)componWillMount:组件将要被挂载,此时还没有开始渲染虚拟DOM
2)render:第一次开始渲染真正的虚拟DOM 当render执行完 内存中就有了完整的虚拟DOM了
3)componentDidMount:组件完成了挂载 此时 组件已经显示到了页面上 当这个方法执行完,组件就进入了运行中的状态
2、组件的运行阶段:也有一个显著的特点 根据组件state和props的改变,有选择是触发0次或多次
1)componentWillReceiveProps:组件将要挂载新属性,此时,只要这个方法别触发,就证明父组件为当前子组件传递了新的属性;
2)shouldComponentUpdate:组件是否需要更新, 此时,组件尚未被更新,但是,state和props肯定是最新的
3)componentWillUpdate:组件将要被更新,此时,尚未开始更新,组件中的虚拟DOM还是旧的
4)render:此时,又要重新根据最新的state和props重新渲染一颗内存中的虚拟DOM树,当render调用完毕,内存中的旧的DOM树,已经被新的DOM树替换了,此时页面还是旧的
5)componentDidUpdate:此时, 页面又被重新渲染了 state和虚拟DOM和页面已经完全保持同步
3、组件销毁阶段:只执行一次
componentWillUnmount:组件将要被卸载,此时,组件还可以正常使用;