8、组件的生命周期
8.1、旧的生命周期（@17之前）
初始化阶段: 由ReactDOM.render()触发—初次渲染
1. constructor()
2. componentWillMount()
3. render()
4. componentDidMount() =====> 常用
一般在这个钩子中做一些初始化的事，例如：开启定时器、发送网络请求、订阅消息
2. 更新阶段: 由组件内部this.setSate()或父组件render触发
1. shouldComponentUpdate()
2. componentWillUpdate()
3. render() =====> 必须使用的一个
4. componentDidUpdate()
3. 卸载组件: 由ReactDOM.unmountComponentAtNode()触发
1. componentWillUnmount() =====> 常用
一般在这个钩子中做一些收尾的事，例如：关闭定时器、取消订阅消息
//创建组件 class Count extends React.Component{ //构造器 constructor(props){ console.log('Count---constructor'); super(props) //初始化状态 this.state = {count:0} } //加1按钮的回调 add = ()=>{ //获取原状态 const {count} = this.state //更新状态 this.setState({count:count+1}) } //卸载组件按钮的回调 death = ()=>{ ReactDOM.unmountComponentAtNode(document.getElementById('test')) } //强制更新按钮的回调 force = ()=>{ this.forceUpdate() } //组件将要挂载的钩子 componentWillMount(){ console.log('Count---componentWillMount'); } //组件挂载完毕的钩子 componentDidMount(){ console.log('Count---componentDidMount'); } //组件将要卸载的钩子 componentWillUnmount(){ console.log('Count---componentWillUnmount'); } //控制组件更新的“阀门” shouldComponentUpdate(){ console.log('Count---shouldComponentUpdate'); return true } //组件将要更新的钩子 componentWillUpdate(){ console.log('Count---componentWillUpdate'); } //组件更新完毕的钩子 componentDidUpdate(){ console.log('Count---componentDidUpdate'); } render(){ console.log('Count---render'); const {count} = this.state return( <div> <h2>当前求和为：{count}</h2> <button onClick={this.add}>点我+1(模拟更新状态)</button> <button onClick={this.death}>卸载组件（卸载）</button> <button onClick={this.force}>不更改任何状态中的数据，强制更新一下</button> </div> ) } }
当在父子组件中的生命周期：
8.2、新的生命周期（@17之后）
组件的生命周期可分成三个状态：
- Mounting(挂载)：已插入真实 DOM
- Updating(更新)：正在被重新渲染
- Unmounting(卸载)：已移出真实 DOM
生命周期的三个阶段
1.初始化阶段
由ReactDOM.render()触发，一般在这个钩子中做一些初始化的事情,如:开启定时器,发送网络请求,订阅消息等。
·constructor()
· getDerivedStateFromProps() 从Props获得派生状态 static 静态方法 state状态取决于props使用
·render()
·componentDidMount() ====>常用 //在页面渲染完成，组件已挂载完成时调用。
2.更新阶段
由组件内部的this.setState()或者父组件的render触发。
·getDerivedStateFromProps() 从Props获得派生状态
· shouldComponentUpdate() 组件应该更新
·render()
·getSnapshotBeforeUpdate(beforeprops,beforestate) 在更新前获得快照 返回null
·componentDidUpdate()
3.卸载阶段
由ReactDOM.unmountComponentAtNode()触发
·componentWillUnmount() ===>常用
一般在这个钩子中做一些收尾的事情,如:关闭定时器、取消订阅消息
生命周期总结
1、重要的钩子
render:初始化渲染或者更新渲染调用
componentDidMount() :组件挂载之后调用，此时可以操作DOM，ajax请求，订阅信息等。
componentWillUnmount(): 组件卸载后调用，做一些收尾工作,如:清理定时器,取消网络请求等。
2、即将废弃的钩子
componentWillMount
componentWillReceiveProps
componentWillUpdate
ps:现在使用会出现警告,之后版本可能需要加上UNSAFE_前缀才能使用,以后可能会被彻底废弃,不建议使用
推测React团队认为提高使用成本将会间接影响我们,让我们去适应新的钩子,所以加上这个
create-react-app 脚手架
1、安装脚手架
npm install create-react-app -g
react: react的顶级库
react-dom: 因为react有很多的运行环境，比如app端的react-native, 我们要在web上运行就使用 react-dom react-scripts: 包含运行和打包react应用程序的所有脚本及配置
出现下面的界面，表示创建项目成功:
Success! Created your-app at /dir/your-app
Inside that directory, you can run several commands:
npm start
Starts the development server.
npm run build
Bundles the app into static files for production. 千锋大
查看全局安装库：
package.json文件
2、安装利于react开发的插件
ES7 React/Redux/GraphQL/React-Native snippets
插件详情： http://t.csdn.cn/HzfK2
3、消息的订阅预发布（pubsub.js）
首先安装：npm i pubsub-js
1、消息的发布
// 一、在需要发布信息的组件里引入 import pubsub from 'pubsub-js'; // 二、定义方法 pubsub.publish('消息名称', '消息内容');
2、消息的订阅
// 一、在需要订阅信息的组件里引入 import pubsub from 'pubsub-js'; // 二、定义方法 pubsub.subscribe('消息名称', '接受参数的回调(回调里两个参数，第一个参数名，第二个消息内容)');
4、服务端代理
配置服务端代理的原因是，现在我们的前端并不是只是一个页面了，而是一个工程他是一个服务，当我们需要访问后端数据时，要解决跨域问题
配置服务端代理
第一步、安装 http-proxy-middleware 中间件
npm install http-proxy-middleware --save
安装在项目目录下安装，查看安装库的使用可以直接百度，找带有npm后缀的是库的官网
第二步：
在src下新建一个文件setupProxy.js
在文件里写入
const { createProxyMiddleware } = require('http-proxy-middleware'); module.exports = function(app) { app.use( '/api', // 请求连接里要是存在api路径，就会启动代理转发 createProxyMiddleware({ target: 'http://127.0.0.1:8000', // 配置服务器的域名和端口号 changeOrigin: true, pathRewrite: {'^/old/api' : '/new/api'} // 表示把请求连接的路径换为新设置的 }) ); };
3、消息的订阅预发布（pubsub.js）
首先安装：npm i pubsub-js
1、消息的发布
// 一、在需要发布信息的组件里引入 import pubsub from 'pubsub-js'; // 二、定义方法 pubsub.publish('消息名称', '消息内容');
2、消息的订阅
// 一、在需要订阅信息的组件里引入 import pubsub from 'pubsub-js'; // 二、定义方法 pubsub.subscribe('消息名称', '接受参数的回调(回调里两个参数，第一个参数名，第二个消息内容)');
4、服务端代理
配置服务端代理的原因是，现在我们的前端并不是只是一个页面了，而是一个工程他是一个服务，当我们需要访问后端数据时，要解决跨域问题
配置服务端代理
第一步、安装 http-proxy-middleware 中间件
npm install http-proxy-middleware --save
安装在项目目录下安装，查看安装库的使用可以直接百度，找带有npm后缀的是库的官网
第二步：
在src下新建一个文件setupProxy.js
在文件里写入
const { createProxyMiddleware } = require('http-proxy-middleware'); module.exports = function(app) { app.use( '/api', // 请求连接里要是存在api路径，就会启动代理转发 createProxyMiddleware({ target: 'http://127.0.0.1:8000', // 配置服务器的域名和端口号 changeOrigin: true, pathRewrite: {'^/old/api' : '/new/api'} // 表示把请求连接的路径换为新设置的 }) ); };
