React-3

React-3

January 8, 2020

1872views

2023字数

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

React-3