onclick 获取img 里面的id_如何理解React里面的生命周期？

生命周期列如一下代码：

let div =document.createElement('div')创建一个div，div的create/construct过程。

div.textContent='hi'给div添加一个数据，也可以理解为初始化state。

document.bodyappendChild(div)将div挂载body里面在页面展示出来，div的mount过程。

div.textContent='hi2'更新div的数据，div的update过程。

div.remove() 点击之后将div从body卸载，这是div的unmount过程。

以上的过程就称之为“生命周期”，React的过程也是如此。

constructor

用于：初始化props、初始化state，但此时不能调用setState。用来写bind this代码如下：

constructor(){
	/*其他代码略*/
  this.onClick = this.onClick.bind(this)
}
//可以通过新语法来代替
onClick=()=>{}
constructor(){/*其他代码略*/}

shouldComponentUpadate

用于返回true表示不阻断UI更新，返回false表示阻止UI更新。

shouldComponentUpadate(newProps,newState){
	if(newState.n === this.state.n){
  	return false
  }else{
  	return true
  }
}

shouldComponentUpadate它允许我们手动判断是否要进行组件更新，我们可以根据应用场景灵活的设置返回值，以避免不必要的更新。

render

用于展示视图，列如：return (<div>hi</div>) ，但是只能有一个元素，如果有两个元素就要用<React.Fragment>包裹起来，列如下面代码。小技巧：<React.Fragment/>可以缩写成<></> 。

render{
   return(
    <React.Fragment>
  	<div></div>
    	<div></div>
    </React.Fragment>
  )
}

在render里面还可以写if-else、?:表达式、array.map（循环），注意！render里面不能直接写for循环，需要用数组。

componentDidMount()

用于元素插入页面后执行代码，这些代码依赖DOM，比如想要获取div的高度，就可以在这里面写。

官方推荐发起加载数据的AJAX请求推荐放在这个里面，首次渲染会执行此钩子。

componentDidUpdate()

作用于在视图更新后执行代码，这里面同样也可以发起AJAK请求，但是这里一般用于更新数据操作。

首次加载不会渲染此钩子，因为首次渲染没有更新任何东西，所以不会触发此钩子。

注意！在这里面setState可能会引起无限循环，除非放在if里面。

如果​componentDidUpdate()​返回false，则不会触发此钩子，相当于手动阻止此钩子更新。

componentWillUnmount

用于组件将要被移除页面然后被销毁时执行此代码。unmount过的组件不会再次mount，销毁了就没有了。

式列：

• 如果在​componentDidMount​里面监听了​window scroll​，那么就需要在​componenWillUnmount​里面取消监听。
• 如果在​componentDidMount​里面创建了Timer，那么就需要在​componentWillUnmount​里面取消Timer。
• 如果在​componentDudMount​里面创建了AJAX请求，那么就需要在​componentWillUnmount​里面取消AJAX的请求。

​因为我们在使用过程当中有一些组件从页面移除之后不会再使用此组件，此组件虽然已经从页面当中移除了，但是依然保存在内存当中，所以我们需要通过​componentDidMount​将它从内存当中进行销毁，不然就会一直占用用户的内存。

附件：分阶看钩子的执行顺序

图源饥人谷方方前端体系课教学课件