从零开始学习react系列(一)中已经简单介绍了react的入门，这篇文章会介绍到用脚手架搭建项目，类组件和函数组件，组件的生命周期
脚手架
安装脚手架
npm install -g create-react-app
创建项目
create-react-app 项目名称
创建好项目
cd 项目名称
yarn start
目录结构分析
test-react
├─ README.md // readme说明文档
├─ package.json // 对整个应用程序的描述：包括应用名称、版本号、一些依赖包、以及项目的启动、打包等等（node管理项目必备文件）
├─ public
│ ├─ favicon.ico // 应用程序顶部的icon图标
│ ├─ index.html // 应用的index.html入口文件
│ ├─ logo192.png // 被在manifest.json中使用
│ ├─ logo512.png // 被在manifest.json中使用
│ ├─ manifest.json // 和Web app配置相关
│ └─ robots.txt // 指定搜索引擎可以或者无法爬取哪些文件
├─ src
│ ├─ App.css // App组件相关的样式
│ ├─ App.js // App组件的代码文件
│ ├─ App.test.js // App组件的测试代码文件
│ ├─ index.css // 全局的样式文件
│ ├─ index.js // 整个应用程序的入口文件
│ ├─ logo.svg // 刚才启动项目，所看到的React图标
│ ├─ serviceWorker.js // 默认帮助我们写好的注册PWA相关的代码
│ └─ setupTests.js // 测试初始化文件
└─ yarn.lock
webpack配置
想要看到webpack的配置先在package.json文件中的一个脚本："eject": "react-scripts eject"，该操作不可以逆行
- 这个操作是不可逆的，所以在执行过程中会给与我们提示；
yarn eject
组件
类组件
import React, { Component } from 'react';
export default class App extends Component {
constructor() {
super();
this.state = {
}
}
render() {
return <h2>Hello App</h2>
}
}
函数组件
函数组件是使用function来进行定义的函数，只是这个函数会返回和类组件中render函数返回一样的内容。
函数组件有自己的特点（当然，后面我们会讲hooks，就不一样了）：
- 没有生命周期，也会被更新并挂载，但是没有生命周期函数；
- 没有this(组件实例）；
- 没有内部状态（state）；
export default function App() {
return (
<div>Hello World</div>
)
}
组件生命周期
大致可以概括为：初始化阶段--挂载阶段--更新阶段--卸载阶段
初始化阶段
发生在constructor中的内容，在 constructor 中进行 state、props 的初始化，在这个阶段修改 state，不会执行更新阶段的生命周期，可以直接对 state 赋值。
constructor
constructor(props) {
super(props);
this.state = {
name: 'Hello App'
}
}
- 通过给
this.state赋值对象来初始化内部的state； - 为事件绑定实例（this）；
挂载阶段
对应的生命周期：
* 1.componentWillMount
发生在 render 函数之前，还没有挂载 Dom
* 2.render
* 3.componentDidMount
发生在 render 函数之后，已经挂载 Dom
componentDidMount
componentDidMount() 会在组件挂载后（插入 DOM 树中）立即调用。
componentDidMount中通常进行哪里操作呢？
- 依赖于DOM的操作可以在这里进行；
- 在此处发送网络请求就最好的地方；（官方建议）
- 可以在此处添加一些订阅（会在componentWillUnmount取消订阅）；
更新阶段
componentDidUpdate
componentDidUpdate() 会在更新后会被立即调用，首次渲染不会执行此方法。
- 当组件更新后，可以在此处对 DOM 进行操作；
- 如果你对更新前后的 props 进行了比较，也可以选择在此处进行网络请求；（例如，当 props 未发生变化时，则不会执行网络请求）。
卸载阶段
componentWillUnmount
componentWillUnmount() 会在组件卸载及销毁之前直接调用。
- 在此方法中执行必要的清理操作；
- 例如，清除 timer，取消网络请求或清除在
componentDidMount()中创建的订阅等；
