5.React生命周期和事件冒泡

最新推荐文章于 2024-10-22 16:04:44 发布
最新推荐文章于 2024-10-22 16:04:44 发布
阅读量385 收藏
点赞数
分类专栏： react学习笔记
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_22701869/article/details/80247580
版权

一、react - 生命周期

简单来说 - react Component通过定了几个函数来控制各个阶段的动作。

1、 componentWillMount 组件挂载前（组件渲染前）

2、componentDidMount 组件挂载后（组件渲染后）

3、componentWillUpdate 组件更新前

4、componentDidUpdate 组件更新后

5、componentWillUnmount 组件卸载之前

（1）componentWillMount 组件挂载前（组件渲染前）

特点：

1.找不到元素

2.属性、状态允许使用

以下是实例：

<!doctype html>

<html>

<head>

    <meta charset="utf-8">

    <title></title>

    <script type="text/javascript" src='bower_components/react/react.js'></script>

    <script type="text/javascript" src='bower_components/react/react-dom.js'></script>

    <script type="text/javascript" src='bower_components/babel/browser.js'></script>

</head>

<body>

<div id='app'></div>

<script type='text/babel'>

class Leo extends React.Component{

         constructor(){

                   super();

                   this.state={a:'state不是渲染内容，可以显示'}

         }

         componentWillMount(){

                   console.log(this.state.a)

                   console.log(this.props.b)

                   console.log("div1是渲染内容，所以在组件渲染前不能使用"+document.querySelector('#div1'))

                   console.log('组件挂在前')

         }

         render(){

                   return (

                            <div id = 'div1'>hello</div>

                   )

         }

}

ReactDOM.render(<Leo b="props不是渲染内容，是属性，可以显示"/>,app);</script

</body>

</html>

显示结果：

 

（2）componentDidMount 组件挂载后（组件渲染后）

特点：

1.可以找到元素

2.属性、状态允许使用

实例代码：

<script type='text/babel'>

class Leo extends React.Component{

         constructor(){

                   super();

                   this.state={a:'state不是渲染内容，可以显示'}

         }

         componentDidMount(){

                   console.log(this.state.a)

                   console.log(this.props.b)

                   console.log("div1是渲染内容，所以在组件渲染后能使用"+document.querySelector('#div1'))

                   console.log('组件挂在前')

         }

         render(){

                   return (

                            <div id = 'div1'>hello</div>

                   )

         }

}

ReactDOM.render(<Leo b="props不是渲染内容，是属性，可以显示"/>,app);

</script>

结果：

（3）componentWillUpdate 组件更新前

特点：

1.可以找到元素

2.属性、状态允许使用

class Leo extends React.Component{

         constructor(){

                   super();

                   this.state = {

                            msg:'hello react!'

                   }

         }

         componentWillUpdate(){

                   console.log('组件更新前');

                   debugger;

         }

         show(){

                   this.setState({

                            msg:Math.random()

                   })

         }

         render(){

                   return (<div>

                                     <input value="点击" onClick={this.show.bind(this)} type='button'/>

                                     <div id='div1'>{this.state.msg}</div>

                            </div>)

         }

}

ReactDOM.render(<Leo l='1'/>,app);

 

componentDidUpdate 组件更新后

特点：

1.可以找到元素

2.属性、状态允许使用

class Leo extends React.Component{

         constructor(){

                   super();

                   this.state = {

                            msg:'hello react!'

                   }

         }

         componentWillUpdate(){

                   console.log('组件更新前');

                   //debugger;

         }

         componentDidUpdate(){

                   console.log('组件更新后');

         }

         show(){

                   this.setState({

                            msg:Math.random()

                   })

         }

         render(){

                   return (<div>

                                     <input value="点击" onClick={this.show.bind(this)} type='button'/>

                                     <div id='div1'>{this.state.msg}</div>

                            </div>)

         }

}

ReactDOM.render(<Leo l='1'/>,app);

 

componentWillUnmount 组件卸载之前

<script type='text/babel'>

class Leo extends React.Component{

         constructor(){

                  super();

                   this.state = {

                            msg:'hello react!'

                   }

         }

         componentWillMount(){

                   //console.log(document.querySelector('#div1'))

                   //console.log(this.props.l,this.state)

                   console.log('组件挂载前');

         }

         componentDidMount(){

                   //console.log(document.querySelector('#div1'))

                   //console.log(this.props.l,this.state)

                   console.log('组件挂载后');

         }

         componentWillUpdate(){

                   console.log('组件更新前');

                   //debugger;

         }

         componentDidUpdate(){

                   console.log('组件更新后');

         }

         show(e){

                   this.setState({

                            msg:Math.random()

                   });

                   e.stopPropagation();

                   //e.cancelBubble = true;

         }

         componentWillUnmount(){

                   console.log('组件卸载之前')

         }

         render(){

                   return (<div>

                                     <input value="点击" onClick={this.show.bind(this)} type='button'/>

                                     <div id='div1'>{this.state.msg}</div>

                            </div>)

         }

}

ReactDOM.render(<Leo l='1'/>,app);

document.οnclick=function(){

         //app.innerHTML = '';

         ReactDOM.render(<h1>asdasd</h1>,app);

}

</script>

显示结果


二、事件冒泡

时间冒泡实例：其中click的show事件和document.onclick产生了混淆，点击按钮本来只想出发show，却同时触发了document.onclick

<script type='text/babel'>

class Leo extends React.Component{

         constructor(){

                   super();

                   this.state = {

                            msg:'hello react!'

                   }

         }

         componentWillMount(){

                   //console.log(document.querySelector('#div1'))

                   //console.log(this.props.l,this.state)

                   console.log('组件挂载前');

         }

         componentDidMount(){

                   //console.log(document.querySelector('#div1'))

                   //console.log(this.props.l,this.state)

                   console.log('组件挂载后');

         }

         componentWillUpdate(){

                   console.log('组件更新前');

                   //debugger;

         }

         componentDidUpdate(){

                   console.log('组件更新后');

         }

         show(e){

                   this.setState({

                            msg:Math.random()

                   });

                   e.stopPropagation();

                   //e.cancelBubble = true;

         }

         componentWillUnmount(){

                   console.log('组件卸载之前')

         }

         render(){

                   return (<div>

                                     <input value="点击" onClick={this.show.bind(this)} type='button'/>

                                     <div id='div1'>{this.state.msg}</div>

                            </div>)

         }

}

ReactDOM.render(<Leo l='1'/>,app);

 

 

document.οnclick=function(){

         //app.innerHTML = '';

         ReactDOM.render(<h1>asdasd</h1>,app);

}

 

</script>

结果：

原生的三个解决方法都不好使

1、return false;

2、e.stopPropagation();

3、e.cancelBubble = true;

e.nativeEvent.cancelBubble = true;

有效的解决方法

e -react封装过的nativeEvent 原生的事件对象

代码

         show(e){

                   this.setState({

                            msg:Math.random()

                   });

 

                   e.nativeEvent.stopImmediatePropagation();

                   //e.nativeEvent.cancelBubble = true;

                   //console.log(e.nativeEvent)

                   //return false;

                   //e.stopPropagation();

                   //e.cancelBubble = true;

         }


e.nativeEvent.stopImmediatePropagation()

停止立即的传播

 

 

 


黑皮爱学习
关注
专栏目录
react生命周期详细介绍
luobo2345的博客
02-10 2万+
react生命周期详解，挂载渲染，卸载和错误捕获
React Component生命周期函数
RainGirl_的博客
06-27 347
React组件有哪些生命周期函数？类组件才有的生命周期函数：
React冒泡和阻止冒泡的应用详解
11-19
阻止事件冒泡分三种： 1：阻止合成事件往最外层document上的事件冒泡，用e.nativeEvent.stopImmediatePropagation(); 2: 合成事件间的冒泡，使用 e.stopPropagation()； 3：阻止合成事件，往处理document上的其他原生事件冒泡，需要通过e.target来判断，示例代码如下。 import React,{ Component } from 'react'; import ReactDOM,{findDOMNode} from 'react-dom'; class Counter extends Component{ const
React 事件冒泡
neoveee的博客
01-27 4212
在React中，我们可以在创建element的时候，传入事件和处理函数，这些事件会被做为合成事件来处理，当然，有些时候，我们也需要定义原生事件，比如给document绑定事件。有些情况下，就需要通过阻止事件冒泡来实现预期的交互效果。下面是几个简单的demo Demo 比如有如下的代码： import React from 'react' class Demo1 extends React.Comp...
react组件的事件冒泡
qq_55139096的博客
04-17 254
事件处理程序还将捕获来自你的组件可能具有的任何子级的事件。我们说事件在树上 “冒泡” 或 “传播”：它从事件发生的地方开始，然后沿着树上升。
React小笔记：事件冒泡问题
qq_45977489的博客
11-14 960
具体详情可以自行去Chrome或stackOverflow上自行了解。react冒泡事件导致父元素也跟着触发。
学习react过程中遇到的JavaScript 的事件冒泡问题
a1009698473的博客
08-29 174
用react实现实现点击图片和背景时分别切换不同的效果。
23.React Native触摸事件处理学习；
Tiger的专栏
09-25 787
目录 1.什么是触摸事件 2.基础触摸事件组件 3.React Native单组件触摸响应 3.1申请成为响应者和释放响应者 3.2合成事件介绍-evt 4.嵌套组件事件传递 4.1正常事件响应顺序 4.2父视图拦截事件传递 5.手势识别-PanResponder 5.1PanResponder类介绍 5.2gestureState参数介绍 5.3PanResponder基...
react源码解析18.react事件系统
zz2000aa的博客
12-14 158
react源码解析18.react事件系统 视频讲解（高效学习）：进入学习 往期文章： 1.开篇介绍和面试题 2.react的设计理念 3.react源码架构 4.源码目录结构和调试 5.jsx&核心api 6.legacy和concurrent模式入口函数 7.Fiber架构 8.render阶段 9.diff算法 10.commit阶段 11.生命周期 12.状态更新流程 13.hooks源码 14.手写hooks 15.scheduler&Lane 16.concurrent模式 17
React阻止事件冒泡
qq_44872061的博客
06-07 746
我第一反应是用event.stopPropagation阻止冒泡，但是结果失败了，又想是不是因为react事件系统跟原生不一样，看了一篇文档，知道了react用的是合成事件系统（这就是为什么F12看见的是SyntheticEvent），然后我就直接用js添加事件，最后发现冒泡被拦截了，但是详情里的按钮也点不了了！经过排查，确定是因为react的合成事件最终全部是冒泡到document统一处理的，如果使用js拦截冒泡的话，被拦截的dom下面的组件就不会触发事件。问题在于，我是用ant的Modal组件啊！
react下的冒泡排序
SASAEDFDASF的博客
12-07 249
react下的冒泡小demo
React-阻止事件冒泡
Lewis_1993的博客
06-13 1184
React 合成事件系统中提供了一个 e.nativeEvent.stopImmediatePropagation()方法用来阻止冒泡，不过需要注意的是，阻止 React 事件冒泡的行为只能用于 React 合成事件系统中，且没办法阻止原生事件的冒泡。反之，在原生事件中的阻止冒泡行为，却可以阻止 React 合成事件的传播。...
React 中阻止事件冒泡的问题
weixin_30892037的博客
04-06 867
在正式开始前，先来看看 JS 中事件的触发与事件处理器的执行。 JS 中事件的监听与处理 事件捕获与冒泡 DOM 事件会先后经历 捕获 与 冒泡 两个阶段。捕获即事件沿着 DOM 树由上往下传递，到达触发事件的元素后，开始由下往上冒泡。 IE9 及之前的版本只支持冒泡 | A -----------------|--|--...
react 事件冒泡 阻止默认事件
最新发布
初遇你时动了情
10-22 377
【代码】react 事件冒泡 阻止默认事件。
React虚拟DOM树的冒泡
EmotionComputer
03-22 144
React会按照虚拟DOM树进行冒泡，即按照逻辑树，而不是物理树。
react 阻止冒泡
刘振兴的博客
10-05 968
今天做一个点击空白地方移除，原生的不起作用（见下图 e.stopPropagation() 修改成 react 自己的禁止冒泡 e.nativeEvent.stopPropagation()
react组件里阻事件冒泡
weixin_30657999的博客
04-10 385
e.nativeEvent.stopImmediatePropagation(); 转载于:https://www.cnblogs.com/yigexiaojiangshi/p/10683916.html
React.js面试精华：事件绑定与 setState 缺点详解
- 同步与异步的特性：尽管`setState`在原生事件和`setTimeout`中表现为同步执行，但在合成事件和生命周期钩子函数中，它的执行实际上是异步的。这是因为React会在更新之前合并所有`setState`调用，这样做的目的是...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值