React脚手架工具、组件及生命周期

react 脚手架工具

npm  install create-react-app -g //全局安装

create-react-app  -V//查看版本

create-react-app 项目名字// 通过脚手架工具创建项目

基本指令

npm start 本地开发环境运行
npm run build 编译打包

基本目录结构

build 打包后的文件目录
config 项目的配置目录
script js启动脚本
src 项目的源码目录
.gitignore git 上传的忽略文件
package.josn

组件的创建

15版本使用 createClass 方法来创建组件
16版本则通过class关键字或者函数来创建组件

类组件函数组件

类组件 （功能组件，智能组件,有状态组件）
用class 关键字创建的组件
有state值 ，能修改state值
能写jsx
有生命周期
函数组件 (ui组件，木偶组件，傻瓜组件，无状态组件)
用函数创建的组件
没有state ，不能修改数据
没有生命周期
只能写jsx
只能接受props 渲染界面

受控组件 非受控组件

并不是一种新的组件而是获取表单数据的两种方式

非受控组件 ： 通过ref 获取表单数据
受控组件： 将表单value 和state 里的数据进行关联

Fragment

可以作为根组件使用并且不会被渲染

生命周期

1. 创建初始化
   getDefaultProps 初始化porps（ 15.6 版本的生命周期 ）
   getInitialState 初始化state （ 15.6 版本的生命周期 ）
   在16版本取消 用 构造函数代替
2. 挂载
   （即将废弃）componentWillmount 挂载之前
   componentDidMount 挂载结束
3. 更新
   （即将废弃）componentWillReceiveProps props发生改变的时候触发
   shouldComponentUpdate 数据的改变是否应该引起页面的更新
   （即将废弃）componentWillUpdate 组件将要更新
   componentDidUpdate 组件更新完毕
4. 卸载销毁
   componentWillUnMount