react 渐学（三） ref 和lifecycle

refs
React提供的这个ref属性，表示为对组件真正实例的引用，其实就是ReactDOM.render()返回的组件实例；需要区分一下，ReactDOM.render()渲染组件时返回的是组件实例；而渲染dom元素时，返回是具体的dom节点。

ref可以设置回调函数
ref属性可以设置为一个回调函数，这也是官方强烈推荐的用法；这个函数执行的时机为：

组件被挂载后，回调函数被立即执行，回调函数的参数为该组件的具体实例。

组件被卸载或者原有的ref属性本身发生变化时，回调也会被立即执行，此时回调函数参数为null，以确保内存泄露。

获取ref引用组件对应的dom节点
不管ref设置值是回调函数还是字符串，都可以通过ReactDOM.findDOMNode(ref)来获取组件挂载后真正的dom节点。

但是对于html元素使用ref的情况，ref本身引用的就是该元素的实际dom节点，无需使用ReactDOM.findDOMNode(ref)来获取，该方法常用于React组件上的ref。

以上是抄的 。。。。。ref对初学者来书就是为了获取dom节点用js来修改。这本就是无奈之举，该怎么用就怎么用吧。写出来才有资格优化和改善。。。。。。

react 生命周期

生命周期函数的定义
//$nbsp; 在某个特定的时间里，自动执行的函数。。//（自己的瞎比定义）

initialization
其实就是组件constructo构造过程 ，这本就是js语法。。。所以就不算react的生命周期。。。。（但是的确是这个组件被定义的时期自动执行的函数）

Mounting
componentWillMount() 在组件即将挂载到页面的时刻立即执行；
render() {
1，在state或者props改变时自动执行；
2，在父组件render函数执行的时候，子组件的render函数也自动执行；
}
componentDidMount() 在组件挂载到页面之，自动执行；

对一个组件来说componentWillMount()和componentDidMount() 一般只执行一次。所以可放网络请求喽。。。

Updation

shouldComponentUpdate() // 组件更新之前执行。。 判断数据是否更新。。。。所以return true or false；
componentWillUpdate() // 组件被更新之前，自动执行，在shouldCompenontUpdate之后执行；
{
if（shouldCompenontUpdate return） {
这个函数会被执行
} else {
这个函数不会执行
}
}

componentDidUpdate() //组件更新以后会执行此函数

当在输入库中输入时 log出的情况

当shouldComponentUpdate() return false 时 输入框就不能输入，对应的react 组件数据就无法更改 componentWillUpdate（）和componentDidUpdate（） 就不会执行

componentWillReceiveProps（）
// 当一个组件从父组件接收参数
// 只要这个组件第一次存在在父组件中不会被执行
// 如果这个组件已经存在于父组件中， 父组件的render函数执行 此函数就会执行

当子组件不在父组件显示时 此函数不会触发，单存在后。父组件的render函数触发 此函数就触发再触发子组件的render函数

unmounting

componentWillUnmount（）// 当此组件从父组件中移除时 触发此函数

recat优化

shouldCompenontUpdate() 控制子组件的render函数过度的渲染
setstate 是一个异步函数 可以把多个数据更新转化成一个 避免过度渲染
循环中key值选择唯一的值 优化react 底层同级比对的效率
bind（this） 放在constructor中 避免在render中重复渲染