05-react-ref、生命周期

react中ref的使用

获取元素对应的dom节点

e.target 或者ref

在dom标签上绑定ref

<ul ref={(ul) => {this.ul = ul}}>
          {this.getTodoItem()}
        </ul>

这样在函数中就可以通过this.ul来获取对这个ul的引用

记住，setState是一个异步函数，如果在修改数据后，立刻执行的代码，需要放在，setState的回调函数中

  handleClick1(){
    this.setState((prevState) => ({
      list: [...prevState.list, prevState.inputValue],
      inputValue: ''
    }), ()=>{
      console.log(this.ulll.querySelectorAll('div').length)
    })
  }  

react的生命周期

什么是生命周期函数？

在某一个时刻组件会自动执行的函数

render函数也属于生命周期函数

• initialization****阶段**

setup state and props

• mounting阶段

componentWillMount->render->componentDidMount

• updating阶段

分props和states改变

(componentWillReceiveprops) -> shouldComponentUpdate->componentWillUpdate->render->componentDidUpdate

componentWillReceiveprops的执行时刻：此组件必须从父组件接收参数，只要父组件的render函数被重新执行了，子组件的这个生命周期函数就会执行

组件第一次存在于父组件中不会被执行，如果这个组件之前已经存在于父组件中，才会执行

• unmount****阶段

comonpentWillUnmount

生命周期的使用场景

• shouldComponentUpdate(nextProps, nextState){

}

借助这个生命周期函数，可以判断这个组件什么时候需要render，什么时候不需要render，减少render的次数可以提高性能

• 发送ajax请求(放在render里会死循环)

  componentDidMount() {}

发送ajax请求