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() {}