（七）React的生命周期
（七）React的生命周期
React更新之后出现新的生命周期，这里两个都看一下，但是在实际使用的时候，可能都用的比较少。
生命周期（旧）
这是旧的的生命周期 但是据说很经典
1. 初始化阶段: 由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() =====> 常用
一般在这个钩子中做一些收尾的事，例如：关闭定时器、取消订阅消息
挂载 mount
卸载 unmount
//卸载组件 ReactDOM.unmountComponentAtNode(document.getElementById('test'))
1.这是正式加载的过程
//组件将要挂载的钩子
componentWillMount(){
console.log('Count---componentWillMount');
}
//组件挂载完毕的钩子
componentDidMount(){
console.log('Count---componentDidMount');
}
//组件将要卸载的钩子
componentWillUnmount(){
console.log('Count---componentWillUnmount');
}
//render的调用时机是在 初始化渲染 状态更新之后
render（）{
}
2.组件更新的生命周期
更新的时候有一个：回调函数 在更新State的时候触发，不写这个回调的时候默认就是true， 但是写了就必须返回。
//控制组件更新的“阀门”
shouldComponentUpdate(){
console.log('Count---shouldComponentUpdate');
return true
}
//组件将要更新的钩子
componentWillUpdate(){
console.log('Count---componentWillUpdate');
}
//组件更新完毕的钩子
componentDidUpdate(){
console.log('Count---componentDidUpdate');
}
3.组件强制更新的生命周期
怎么触发强制更新？就是你不更改但是我就强制更新一下
//强制更新按钮的回调
force = ()=>{
this.forceUpdate()
}
4.componentWillReceiveProps 组件将要更新的生命周期的钩子
父子组件的更新方式
父组件渲染的时候 render 会触发组件将要接收参数的钩子函数（但是必须要是新的props才会出发）
//组件将要接收新的props的钩子
componentWillReceiveProps(props){
console.log('B---componentWillReceiveProps',props);
}
实现案例：
//父组件A
class A extends React.Component{
//初始化状态
state = {carName:'奔驰'}
changeCar = ()=>{
this.setState({carName:'奥拓'})
}
render(){
return(
<div>
<div>我是A组件</div>
<button onClick={this.changeCar}>换车</button>
<B carName={this.state.carName}/>
</div>
)
}
}
//子组件B
class B extends React.Component{
//组件将要接收新的props的钩子
componentWillReceiveProps(props){
console.log('B---componentWillReceiveProps',props);
}
//控制组件更新的“阀门”
shouldComponentUpdate(){
console.log('B---shouldComponentUpdate');
return true
}
//组件将要更新的钩子
componentWillUpdate(){
console.log('B---componentWillUpdate');
}
//组件更新完毕的钩子
componentDidUpdate(){
console.log('B---componentDidUpdate');
}
render(){
console.log('B---render');
return(
<div>我是B组件，接收到的车是:{this.props.carName}</div>
)
}
}
//渲染组件
ReactDOM.render(<B/>,document.getElementById('test'))
然后就按照上图的继续走
生命周期（新）
新的比旧的少了三个 多了俩
1. 初始化阶段: 由ReactDOM.render()触发---初次渲染
1. constructor()
2. getDerivedStateFromProps
3. render()
4. componentDidMount() =====> 常用
一般在这个钩子中做一些初始化的事，例如：开启定时器、发送网络请求、订阅消息
2. 更新阶段: 由组件内部this.setSate()或父组件重新render触发
1. getDerivedStateFromProps
2. shouldComponentUpdate()
3. render()
4. getSnapshotBeforeUpdate
5. componentDidUpdate()
3. 卸载组件: 由ReactDOM.unmountComponentAtNode()触发
1. componentWillUnmount() =====> 常用
一般在这个钩子中做一些收尾的事，例如：关闭定时器、取消订阅消息
多出来的这两个就是
getDerivedStateFromProps getSnapshotBeforeUpdate
其实根据英文单词的意思就可以理解
1.getDerivedStateFromProps 这个本身是横跨所有的，加载和更新
必须要有返回值：null（返回null也就是没有操作了） 或者 状态对象就是state里面的key和值 但是一旦返回就更改了数据 就是不会进行更改 {}
为什么会影响state的使用： 因为这个回调是横跨整个的一旦开始接入就需要听从他的
这是一个罕见的用例，这是个派生状态 state的值在任何情况下都取决于props
这是使用方法在是使用的时候必须是一个静态方法
static getDerivedStateFromProps (){
return null
}
什么时候用：若state的值在任何时候都取决于props，那么可以使用getDerivedStateFromProps 但是也可以在构造器里面用进行操作，构造器会拿到props的值，可以赋值过去。所以不是必须要用
2.getSnapshotBeforeUpdate 更新之前的快照
这个只是在更新的生命周期里面的
这个比上一个还好一些就是还会用到，但是实际开发我不是很清楚，还是在学习阶段。
必须要返回 null 或者 快照值(任何值都可以是快照值)
getSnapshotBeforeUpdate（）{
return null 或 return '任意内容'
}
那个这个返回值所返回内容返到哪去了 在 componentDidUpdate 中
componentDidUpdate(preProps, preState, snapshotValue) {
console.log('Count---componentDidUpdate', preProps, preState, snapshotValue);
}
其实就是在更新的过程中 ， 这个是属于更新之前的， 你要获取的东西 ，比如你点击更新列表数据从10个人增加到了11个人 ，之前的高度是多少你得有个判断有个存储，就可以使用快照的方式进行返回传值，在更新之后就可以使用快照的值了
实例 such as:
简介：写了一个新闻的列表，每隔200毫秒就向上边插入一条，然后效果就是一条一条的出现，列表就会出现滚动条，一条一条的往下挤，但是你要想滚动去查看下边的几条，在新插入的时候就会自滚动的最上面去。怎么解决呢？就是在更新之前记录我看的新闻的位置，然后在更新的时候将位置滚动回去，就可以实现插入新的新闻，自己的页面没有变化
<script type="text/babel">
class NewsList extends React.Component{
state = {newsArr:[]}
componentDidMount(){
setInterval(() => {
//获取原状态
const {newsArr} = this.state
//模拟一条新闻
const news = '新闻'+ (newsArr.length+1)
//更新状态
this.setState({newsArr:[news,...newsArr]})
}, 1000);
}
getSnapshotBeforeUpdate(){
return this.refs.list.scrollHeight
}
componentDidUpdate(preProps,preState,height){
this.refs.list.scrollTop += this.refs.list.scrollHeight - height
}
render(){
return(
<div className="list" ref="list">
{
this.state.newsArr.map((n,index)=>{
return <div key={index} className="news">{n}</div>
})
}
</div>
)
}
}
ReactDOM.render(<NewsList/>,document.getElementById('test'))
</script>
