首页 > 其他分享 >React相关《下》

React相关《下》

时间:2022-10-21 15:58:12浏览次数:54  
标签:生命周期 componentWillMount render React 组件 相关 方法

React组件有几种特殊方法,它们提供了在组件生命周期中的特定点执行操作的机会,它们被称为生命周期方法或生命周期钩子,允许我们在特定时间点捕获组件,比如在组件被渲染之前、更新之前、接收道具之前、卸载之前等等。下面是一些主要生命周期方法:componentWillMount()、 componentDidMount()、 shouldComponentUpdate()、 componentDidUpdate()、 componentWillUnmount() ,下面将涵盖这些生命周期方法的一些基本用法(其中componentWillMount()在16.X版本中被弃用,在版本17中被删除)。

看下例,我们将组件加载入DOM时,在render()方法之前就调用componentWillMount()方法,使用componentWillMount()在控制台中记录一些内容:

class MyComponent extends React.Component {
  constructor(props) {
    super(props);
  }
  componentWillMount() {
    console.log('hahaha');
  }
  render() {
    return <div />
  }
};
//将组件渲染到DOM:
ReactDOM.render(<MyComponent/>,document.getElementById('challenge-node'));
/*控制台输出:
hahaha
*/

 

 

。。。

 

标签:生命周期,componentWillMount,render,React,组件,相关,方法
From: https://www.cnblogs.com/168-h/p/16813601.html

相关文章

  • React学习--路由不跳转
    在配置React路由的时候遇到的问题,url跳转了但是页面没有跟着刷新,找了很久没找到问题最后想了想可能是因为index.js的<React.StrictMode>导致的,注释之后就成功了......
  • unityID手机绑定相关问题
    关于unityID绑定手机号常见问题:1.想要更换新的手机号,且旧的手机号还在用的情况下,可以自行在账户管理页面更改。    2.若旧手机没有使用了,只能联系supportchina@u......
  • HDFS相关问题处理
    机房搬迁后datanode启动失败,报错如下:2022-10-2110:28:40,551INFOorg.apache.hadoop.hdfs.server.common.Storage:Lockon/HDATA/1/dfs/local/in_use.lockacquired......
  • 面试题vue组件的相关问题
    面试题vue组件的相关问题什么是组件什么是组件:组件(Component)是Vue.js最强大的功能之一。组件可以扩展HTML元素,封装可重用的代码。一个页面可以由多个组件构成,......
  • 文档相关注解
    说明注释允许你在程序中嵌入关于程序的信息。你可以使用javadoc工具软件来生成信息,并输出到HTML文件中说明注释,是你更加方便的记录你的程序信息。文档注释我们一般使用在......
  • react下载兼容浏览器
    //导出模板exportfunctionexportTemplateExcel(url,params,config={}){returnnewPromise((resolve,reject)=>{axios.get(url,{params:pa......
  • 直播网站源码,React中的三大实例之ref的三种形式
    直播网站源码,React中的三大实例之ref的三种形式ref有三种形式:字符串形式回调函数形式CreateRef形式如下示例代码展示了三种形式ref的创建于使用 <!DOCTYPEhtml><......
  • 核心交换机相关技术参数详解
    核心交换机一般指三层交换机。三层交换机就是具有部分路由器功能的交换机,工作在OSI网络标准模型的第三层:网络层。三层交换机的最重要目的是加快大型局域网内部的数据交换,所......
  • 遇到的jstl标签库与tomcat 10服务器相关问题
    在写项目的时候,JSP页面引用核心标签库语句<%@tagliburi="http://java.sun.com/jsp/jstl/core"prefix="c"%>运行后报错在tomcat10使用jstl的时候产生如下错误:HTTP状态......
  • Linux系统文件相关命令
    系统优化相关性能优化安全优化编码优化1)了解⾃⼰的系统情况cat/etc/redhat-releaseuname-r/-a/-n/-s/...#详⻅下图2)在系统中创建⽤户信息创建⽤户use......