react项目的创建、jsx语法、组件的生命周期

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：组件将要被卸载，此时，组件还可以正常使用；