4.React生命周期

4.1引出生命周期

    class Life extends React.Component {

        state = {
opacity:0.5
} death = () => {
// 卸载定时器
// clearInterval(this.timer)
// 卸载组件
ReactDOM.unmountComponentAtNode(document.getElementById('test')) } // 生命周期钩子函数
// 组件挂载完调用
componentDidMount(){
this.timer = setInterval(()=>{
// 获取原状态
let {opacity} = this.state
// 减小0.1
opacity -= 0.1
// 设置新的透明度
if (opacity <= 0) opacity = 1
this.setState({opacity}) }, 200)
} // 组件将要卸载操作
componentWillUnmount(){
// 卸载定时器
clearInterval(this.timer)
} render(){
return (
<div>
<h2 style={{opacity: this.state.opacity}}>yeyang is da hanbi</h2>
<button onClick={this.death}>don't life</button>
</div>
)
}
}

4.2 react生命周期(旧)(17.0版本之前)

    /*
1. 初始化阶段: 由ReactDOM.render()触发---初次渲染
1. constructor()
2. componentWillMount()
3. render()
4. componentDidMount() ====> 常用
--- 一般在这个钩子做一些初始化的事,例如:开启定时器,发送网络请求,订阅消息
2. 更新阶段: 由组件内部this.setSate()或父组件重新render触发
1. shouldComponentUpdate()
2. componentWillUpdate()
3. render() ====> 必须使用的一个
4. componentDidUpdate()
3. 卸载组件: 由ReactDOM.unmountComponentAtNode()触发
1. componentWillUnmount() ====> 常用
---- 一般在这个钩子中做一些收尾的事,如关闭定时器、取消订阅消息
*/ class Count extends React.Component { constructor(props) {
console.log('Count---constructor')
super(props);
this.state = {
count: 0
}
} // state = {
// count: 0
// } 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: 'benz'
} changeCar = () => {
this.setState({
carName: 'bmw'
})
} 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(){
return (
<div>
我是B组件, 接收的车是:{this.props.carName}
</div>
)
}
} // ReactDOM.render(<Count />, document.getElementById('test'))
ReactDOM.render(<A />, document.getElementById('test'))

4.3 react生命周期(新)(17.0版本之后)

    /*
1. 初始化阶段: 由ReactDOM.render()触发---初次渲染
1. constructor()
2. getDerivedStateFromProps
3. render()
4. componentDidMount()
2. 更新阶段: 由组件内部this.setSate()或父组件重新render触发
1. getDerivedStateFromProps
2. shouldComponentUpdate()
3. render()
4. getSnapshotBeforeUpdate
5. componentDidUpdate()
3. 卸载组件: 由ReactDOM.unmountComponentAtNode()触发
1. componentWillUnmount()
*/ class Count extends React.Component { constructor(props) {
console.log('Count---constructor')
super(props);
this.state = {
count: 0
}
} // state = {
// count: 0
// } add = () => {
const {count} = this.state
this.setState({
count: count+1
})
} death = () => {
ReactDOM.unmountComponentAtNode(document.getElementById('test'))
} force = () => {
this.forceUpdate() // 强制更新钩子
} // 若state的值在任何时候都取决于props,可以使用该方法
static getDerivedStateFromProps(props ,state){
console.log('Count---getDerivedStateFromProps', props, state)
return null // 返回 state对象或者null
} // 在更新之前获取快照
getSnapshotBeforeUpdate(){
console.log('Count---getSnapshotBeforeUpdate')
return 'abc'
} // 组件挂载完成的钩子
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('test'))

4.4 getSnapshotBeforeUpdate使用场景

拖动滚动条让滚动条停留在当前数据位置

    class NewList extends React.Component {

        state = {
newsArr: []
} componentDidMount() {
setInterval(() => {
// 获取原状态
const {newsArr} = this.state
// 模拟一条新闻
const news = '新闻' + (newsArr.length + 1)
// 更新状态
this.setState({
newsArr: [news, ...newsArr]
})
}, 1000)
} getSnapshotBeforeUpdate() {
return this.refs.list.scrollHeight
} componentDidUpdate(preProps, preState, height) {
console.log(preProps, preState, height)
console.log(this.refs.list.scrollTop) // 当前距离滚动条顶端的距离
this.refs.list.scrollTop += (this.refs.list.scrollHeight - height)
// this.refs.list.scrollTop += 30
} render() {
console.log('NewList---render')
const {newsArr} = this.state
return (
<div className="list" ref='list'>
{
newsArr.map((n, index) => {
return <div key={index} className="news">{n}</div> })
}
</div>
)
}
} ReactDOM.render(<NewList/>, document.getElementById('test'))

4.React生命周期的更多相关文章

  1. React生命周期

    在react生命周期中,分2段执行,一个挂载的生命周期,一个是组件发生了数据变动,或者事件触发而引发的更新生命周期. 注:react生命周期很重要,对于很多组件场景的应用发挥重要作用,而且不熟悉生命周 ...

  2. React 生命周期

    前言 学习React,生命周期很重要,我们了解完生命周期的各个组件,对写高性能组件会有很大的帮助. Ract生命周期 React 生命周期分为三种状态 1. 初始化 2.更新 3.销毁 初始化 1.g ...

  3. React生命周期详解

    React生命周期图解: 一.旧版图解: 二.新版图解: 从图中,我们可以清楚知道React的生命周期分为三个部分:  实例化.存在期和销毁时. 旧版生命周期如果要开启async rendering, ...

  4. React生命周期简单详细理解

    前言 学习React,生命周期很重要,我们了解完生命周期的各个组件,对写高性能组件会有很大的帮助. Ract生命周期 React 生命周期分为三种状态 1. 初始化 2.更新 3.销毁 初始化 1.g ...

  5. 22.1 、react生命周期(一)

    在每个react组件中都有以下几个生命周期方法~我们需要在不同阶段进行讨论 组件生命周期概述 1.初始化 在组件初始化阶段会执行 constructor static getDerivedStateF ...

  6. react 生命周期钩子里不要写逻辑,否则不生效

    react 生命周期钩子里不要写逻辑,否则不生效,要把逻辑写在函数里,然后在钩子里调用函数,否则会出现问题.

  7. react复习总结(2)--react生命周期和组件通信

    这是react项目复习总结第二讲, 第一讲:https://www.cnblogs.com/wuhairui/p/10367620.html 首先我们来学习下react的生命周期(钩子)函数. 什么是 ...

  8. React生命周期执行顺序详解

    文章内容转载于https://www.cnblogs.com/faith3/p/9216165.html 一.组件生命周期的执行次数是什么样子的??? 只执行一次: constructor.compo ...

  9. vue生命周期和react生命周期对比

    一 vue的生命周期如下图所示(很清晰)初始化.编译.更新.销毁 二 vue生命周期的栗子 注意触发vue的created事件以后,this便指向vue实例,这点很重要 <!DOCTYPE ht ...

  10. react生命周期知识点

    react生命周期知识点 一个React组件的生命周期分为三个部分:实例化.存在期和销毁时. 实例化 组件在客户端被实例化,第一次被创建时,以下方法依次被调用: 1.getDefaultProps2. ...

随机推荐

  1. springboot多个service互相调用的事务处理(十三)

    在一个service的方法A中,调用另一个service的方法B,方法A和方法B均存在数据库插入操作,需要添加如下配置: @Transactional(rollbackFor = Exception. ...

  2. JS 之循环 应用案例1

    应用场景:将el-select下拉框的lab值,显示在下面的详情text框,见下图 用到了 el-select 传值,js循环判断options.code是否等于传进来的值,等于就break; tex ...

  3. 大数据学习(26)—— Spark之RDD

    做大数据一定要有一个概念,需要处理的数据量非常大,少则几十T,多则上百P,全部放内存是不可能的,会OOM,必须要用迭代器一条一条处理. RDD叫做弹性分布式数据集,是早期Spark最核心的概念,是一种 ...

  4. 声明提前(hoist)

    程序执行前,都会先找到var声明的变量和function声明的函数. 一.var声明的变量 程序 结果 console.log(a); var a=10; console.log(a); //unde ...

  5. [JS]回调函数和回调地狱

    回调函数 小明在奶茶店点了奶茶,店员开始制作奶茶,此时"制作奶茶"与"小明等待奶茶"是一个同时进行的不同的两个事件(任务),那么,小明获取店员制作成功的奶茶是从 ...

  6. vulnhub-靶机Lampiao

    目标信息:攻击机IP地址:192.1681.10 Lampiao靶机IP地址:192.168.1.12 DC-1靶机IP地址:192.168.1.7 目的:获取靶机root权限和靶机设置的所有flag ...

  7. Eclipse的XML编辑器解决方案

    现在使用的Eclipse SDK 3.7.2里没有XML编辑器,无法进行语法高亮,也没有格式化(按层次控制缩进量)和设计视图,很不方便.对于ant文件,可以用Ant Editor来打开,ivy文件在装 ...

  8. Docker入门第九章

    Commit镜像 docker commit 提交容器成为一个新的副本 # 命令和git原理类似 docker commit -m="提交的描述信息" -a="作者&qu ...

  9. Vue3 Composition API写烦了,试试新语法糖吧—setup script

    前言 Vue3发布近一年了,相信大家对Vue3的新特性,新语法都很熟悉了.那么在使用Composition API的过程中,有没有觉得整个过程比较繁琐.比如你的模板里用到了大量的state和方法的时候 ...

  10. k8s 执行 ingress yaml 文件报错: error when creating "ingress-myapp.yaml": Internal error occurred: failed calling webhook

    k8s 执行 ingress yaml 文件报错:错误如下: [root@k8s-master01 baremetal]# kubectl apply -f ingress-test.yaml Err ...