一、es5版
实例化
- 取得默认属性
getDefaultProps
外部传入的props - 初始状态
getInitailState
state状态 - 即将挂载
componentWillMount
- 描画VDOM
render
二、旧版本生命周期
加载阶段
-
取得默认属性,初始状态在constructor中完成(运行一次,可读数据,可同步修改state,异步修改state需要setState,setState在实例产生后才可以使用,可以访问到props)
-
即将挂载
componentWillMount
-
描画VDOM
render
(创建虚拟dom,进行diff算法,更新dom树) -
组件渲染之后调用
componentDidMount
(一般在这个钩子中做一些初始化的事,例如:开启定时器、发送网络请求、订阅消息) 常用
更新阶段 -
props改变
componentWillReceiveProps
(组件加载时候不调用,组件接受新的props时调用) -
shouldComponentUpdate
是否需要更新(return true就会更新dom,false阻止更新) -
描画VDOM
render
(创建虚拟dom,进行diff算法,更新dom树) -
componentDidUpdate
组件数据更新完成后调用
卸载阶段
compoenentWillUnmount
(即将卸载,可以做一些组件相关的清理工作,如青春计时器、网络请求等 )常用
组件卸载: unmountComponentAtNode(document.getElementById('root'))
所有子组件挂载完成,才标记着父组件挂载完成,父组件更新,子组件更新,子组件更新,子组件不更新
//创建组件
class Count extends React.Component{
//构造器
constructor(props){
console.log('Count---constructor');
super(props)
//初始化状态
this.state = {count:0}
}
//加1按钮的回调
add = ()=>{
//获取原状态
const {count} = this.state
//更新状态
this.setState({count:count+1})
}
//卸载组件按钮的回调
death = ()=>{
ReactDOM.unmountComponentAtNode(document.getElementById('test'))
}
//强制更新按钮的回调
force = ()=>{
this.forceUpdate()
}
//组件将要挂载的钩子
componentWillMount(){
console.log('Count---componentWillMount');
}
//组件挂载完毕的钩子
componentDidMount(){
console.log('Count---componentDidMount');
}
//组件将要卸载的钩子
componentWillUnmount(){
console.log('Count---componentWillUnmount');
}
//控制组件更新的“阀门”
shouldComponentUpdate(){
console.log('Count---shouldComponentUpdate');
return true
}
//组件将要更新的钩子
componentWillUpdate(){
console.log('Count---componentWillUpdate');
}
//组件更新完毕的钩子
componentDidUpdate(){
console.log('Count---componentDidUpdate');
}
render(){
console.log('Count---render');
const {count} = this.state
return(
<div>
<h2>当前求和为:{count}</h2>
<button onClick={this.add}>点我+1</button>
<button onClick={this.death}>卸载组件</button>
<button onClick={this.force}>不更改任何状态中的数据,强制更新一下</button>
</div>
)
}
}
//父组件A
class A extends React.Component{
//初始化状态
state = {carName:'奔驰'}
changeCar = ()=>{
this.setState({carName:'奥拓'})
}
render(){
return(
<div>
<div>我是A组件</div>
<button onClick={this.changeCar}>换车</button>
<B carName={this.state.carName}/>
</div>
)
}
}
//子组件B
class B extends React.Component{
//组件将要接收新的props的钩子
componentWillReceiveProps(props){
console.log('B---componentWillReceiveProps',props);
}
//控制组件更新的“阀门”
shouldComponentUpdate(){
console.log('B---shouldComponentUpdate');
return true
}
//组件将要更新的钩子
componentWillUpdate(){
console.log('B---componentWillUpdate');
}
//组件更新完毕的钩子
componentDidUpdate(){
console.log('B---componentDidUpdate');
}
render(){
console.log('B---render');
return(
<div>我是B组件,接收到的车是:{this.props.carName}</div>
)
}
}
//渲染组件
ReactDOM.render(<Count/>,document.getElementById('root'))
三、新版生命周期
- 在React16新的生命周期弃用了compostWillMount、componentWillReceiveProps、componentWillUpdate
- 新增了getDerivedStateFromProps、getSonapshotBeforeUpdate来替代弃用的三个钩子函数(compostWillMount、componentWillReceiveProps、componentWillUpdate)
加载阶段
- 渲染前 static
getDerivedStateFromProps(props,state)
无法访问this
props,state是更新后的
必须返回一个对象,用来更新state或者null 不更新
必须要初始化state
场景:state的值在任何时候都取决于props时
render
必须return jsx|string|number|null
不会直接于浏览器交互:不要操作DOM|和数据
componentDidMount
挂载完成后执行
更新阶段
- 渲染前 static
getDerivedStateFromProps(props,state)
无法访问this
props,state是更新后的
必须返回一个对象,用来更新state或者null 不更新
必须要初始化state
场景:state的值在任何时候都取决于props时
render
必须return jsx|string|number|null
不会直接于浏览器交互:不要操作DOM|和数据
getSnapshortBeforeUpdate(prevProps,prevState)
组件能在发生更改之前从DOM中捕获一些信息(dom渲染前的状态)
返回 值|null 会给componentDidUpdate
prevProps、prevState 更新前this.props、this.state更新后
销毁阶段
componentWillUnmont
组件即将卸载执行
class Count extends React.Component{
constructor(props){
console.log('Count---constructor');
super(props)
//初始化状态
this.state = {count:0}
}
//加1按钮的回调
add = ()=>{
//获取原状态
const {count} = this.state
//更新状态
this.setState({count:count+1})
}
//卸载组件按钮的回调
death = ()=>{
ReactDOM.unmountComponentAtNode(document.getElementById('test'))
}
//强制更新按钮的回调
force = ()=>{
this.forceUpdate()
}
//若state的值在任何时候都取决于props,那么可以使用getDerivedStateFromProps
static getDerivedStateFromProps(props,state){
console.log('getDerivedStateFromProps',props,state);
return null
}
//在更新之前获取快照
getSnapshotBeforeUpdate(){
console.log('getSnapshotBeforeUpdate');
return 'atguigu'
}
//组件挂载完毕的钩子
componentDidMount(){
console.log('Count---componentDidMount');
}
//组件将要卸载的钩子
componentWillUnmount(){
console.log('Count---componentWillUnmount');
}
//控制组件更新的“阀门”
shouldComponentUpdate(){
console.log('Count---shouldComponentUpdate');
return true
}
//组件更新完毕的钩子
componentDidUpdate(preProps,preState,snapshotValue){
console.log('Count---componentDidUpdate',preProps,preState,snapshotValue);
}
render(){
console.log('Count---render');
const {count} = this.state
return(
<div>
<h2>当前求和为:{count}</h2>
<button onClick={this.add}>点我+1</button>
<button onClick={this.death}>卸载组件</button>
<button onClick={this.force}>不更改任何状态中的数据,强制更新一下</button>
</div>
)
}
}
//渲染组件
ReactDOM.render(<Count count={199}/>,document.getElementById('root'))