React
组件状态管理:state
super()
setState:是异步的
this.setState({}) merge上面的state的操作,
1.setState实质上是将传入的第一个参数对象的state对象做merge
2.如果依据愿原有的state更新state,最好传入一个函数,
setState((prevState)=>{return xxx},callback(回调,等待上一个函数的执行,等待DOM渲染,类似nexttick))
setState会导致组件重新渲染

只要父组件render被调用,子组件render也会被调用,不管父组件的状态更不更新
状态提升:Lifting State Up
兄弟组件传参
A子组件调用父组件方法,A子组件的值在使用方法的时候把A组件的状态(数据),传给了父组件,父组件接收一下,可以在传给B子组件
受控组件和非受控组件
表单
<input value={this.state} />
新版:
this.input = React.createRef()
<input ref="this.input">
事件处理
this.handleClick.bind(this)
使用bind,每一次都会创建一个新的事件函数
定义:在constructor
this.xxx = this.xxx.bind(this)
常用
1、需要传参的
()=> this.handleClick(x,x,x,e)
2、只需要传e
this.handleClick()

老(16-)生命周期钩子 没加react.fiber算法时
初始化阶段
constructor(){}
装载阶段
componentWillMount(){}
render(){}
componentDidMount(){}
props改变的阶段
componentWillReceiveProps(){}
shouldComponentUpdate(){
return boolean} 不能再此修改:setState; === PureComponent
componentWillUpdate(){}
render() 不能再此修改:setState
componentDidUpdate(){} 不能再此修改:setState
states状态阶段
shouldComponentUpdate(){return boolean} 不能再此修改:setState; === PureComponent
componentWillUpdate(){}
render() 不能再此修改:setState
componentDidUpdate(){} 不能再此修改:setState
卸载阶段
可以使用React.Dom.xxxxxnode方法卸载节点
componentWillUnmount()
新(16+)生命周期钩子
16.4
挂载时
constructor(){}
getDerivedStateFromProps(){}
render(){}
React(DOM,refs)
componentDidMount(){}
更新时
此钩子,在16.3时只是监测props
不会陷入死循环
getDerivedStateFromProps(props,state){

必须有返回值,没有写null
props为父组件实实传入的值
state为子组件
return {
    title:props.title
} 

}
merage两次的值
shouldComponentUpdate(){}
render(){}
getSnapshotBeforeUpdate(){

必须有返回值,没有写null

}配合使用componentDidUpdate(){}

React(DOM,refs)
componentDidMount(){}
卸载时
componentWillUnmount
16.3
getDerivedStateFromProps
此钩子,在16.3时只是监测props,但是在16.4的时候,此钩子会在props,setState,forceupdata的时候触发
引用了不是state的数据,并更新数据,但不会跟新DOM
使用this.forceUpdate(),强迫人家一下咯!(刷新页面)
forceUpdate使用,不会调用shouldComponentUpdate钩子
static defaultProps()
static displayName()

Last modification:January 8th, 2020 at 04:17 pm
如果觉得我的文章对你有用,请随意赞赏