持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第7天，点击查看活动详情
React16
React16新的生命周期弃用了componentWillMount、componentWillReceiveporps、componentWillUodate
'新增了getDerivedStateFromprops、getSanapshotBeforeUpdate来代替弃用的三个钩子函数'
React16并没有删除这三个钩子函数，但是不能和新增的钩子函数混用，React17删除这三个钩子函数
新增了对错误的处理(componentDidCatch)
生命周期图
State合并
//将新的state合并到状态更新队列中
var nextState=this._processPendingState(nextProps,nextContext);
//根据更新队列和shouldComponent的状态来判断是否需要更新组件
var shouldUpdate=thox._pendingForceUpdate||!inst.shouldComponentUpdate||inst.shouldComponentUpdate
(nextProps,nextState,nextContext);
当调用setState时，实际上会执行enqueueSetState方法，并对partialState以及_pending-StateQueue更新队列进行
合并操作，并最终通过enqueueUpdate执行State更新，而performUpdateIfNecessary方法会获取_pending-ForceUpdate，
并调用rexeiveComponent和updateComponent方法进行组件更新，如果在shouldComponentUpdate或者
componentWillUpdate方法中调用setState，此时this._pending-StateQueue!=null,就会造成循环调用，使得浏览器内存
占满后崩溃
props
ref
React支持一种非常特殊的属性Ref，你可以用来绑定到render（）输出的任何组件上是个特殊的属性允许你引用render()
返回相应的支撑实例（backing instance）这样就可以确保在任何时间总是拿到正确的实例
获取组件属性，或者设置组件属性可以使用原生js方法，也可以使用refs
原生属性
单击按钮是按钮背景颜色发生变化，给按钮添加id在，在handkeClick里获取内容并且改变颜色
ref
给按钮添加ref属性，在对应的方法里用refs获得
//react14以上的版本推荐使用ref回调函数方式
ref实例：
import React from 'react';
export class Header extends React.Component {
constructor() {
super();
this.state = {name: 'link'}
}
changename(){
this.setState({name: 'link 朗科'},()=>alert('完事'))
}
showmsg(){
alert("你好")
alert(this.refs.username.value)
}
render() {
return (
<div>
<input type='text' ref='username'/>
<h2 onClick={this.showmsg.bind(this)}>link 朗科</h2>
<span id='a'> {this.state.name}</span>
<input type="button" name="but" value="logo" onClick={this.changename.bind(this)}/>
</div>
)
}
}
key的作用
react中的key属性，它是一个特殊的属性，它的出现不是给开发者用的（为一个组件设置key之后不能获取组件的这个
key props）而是给react自己用的
简单来说，react利用key来识别组件，它是一种身份标识，就像我们的身份证用来辨别一个人一样，每个key对应一个组件，
相同的key react认为是同一个组件，这样后续相同的key对应组件都不会被创建
实例：
this.state={uers:[{id:1,name:'张三'},{id:2,name:'李四'},{id:2,name:'王五'},....]}rebder()
return(用户列表{this.state.users.map(u=>{u.id}:{u.name})})
//用户列表只有张三和李四两个用户，王五并没有展示处理，主要是因为react根据key认为李四和王五是同一个组件
//（id值相同），导致第一个被渲染，后续的会被丢弃掉
'在React16之后循环遍历必须加key值'
有了key属性后，就可以与组件建立了一种对应关系，react根据key来决定是销毁重新创建组件还是更新组件
key相同，若组件属性有所变化，则react只更新组件对应的属性；没有变化则不更新
key值不同，则react先销毁该组件（有状态组件的conponentWillUnmount会执行），然后重新创建该组件（有状态
组件的construstor和componentWillunmount都会执行）
key实例
import React from "react";
export class Right extends React.Component{
constructor(){
super();
this.state = {names:['lily','tom','lucy']}
}
render(){
return(
<div>
<ul>
{this.state.names.map((v,i)=>{return (<li key={i}>{v}</li>)})}
{/* <li></li> */}
</ul>
</div>
)
}
}
