React 中创建 Components 的方式有两种:Function and Class

定义一个组件最简单的方法就是写一个 JavaScript 函数

function Welcome(props) { return <h1>Hello, {props.name}</h1> }

因为Welcome函数接受单个携带数据的props对象并且返回一个React元素,所以它就是一个组件。这种通过字面表达式函数创建的组建通常叫做functional

当然你也可以通过ES6 class的语法来定义一个组件

class Welcome extends React.Component { render() { return <h1>Hello, {this.props.name}</h1>; } }

要说明的是从 React's 的角度以上两种定义组件的效果是相等的

那什么时候需要用 Class 方式来定义组件呢

在需要使用一些额外的特点的时候比如 state 和 lificycle 的情况下,就应该使用 Class 来定义组件

  • 在 Class 中添加 State

class Clock extends React.Component {
constructor(props) { // 注意这里将props传入了构造器 Class 方式创建的组件必须总是调用带有 props 的构造器
super(props);
this.state = {date: new Date()};
}

render() {
return (
<div>
<h1>Hello, world!</h1>
<h2>It is {this.state.date.toLocaleTimeString()}.</h2>
</div>
);
}
}

  

  • 在 Class 中添加 lifecycle方法

  在有很多组件的大型应用中,当在组件被销毁的时候及时地释放资源是非常重要的。

class Clock extends React.Component {
constructor(props) {
super(props);
this.state = {date: new Date()};
}

// 当 Clock 第一次渲染到 DOM 时创建一个定时器,在 React 中叫做 mounting
componentDidMount() {
this.timerID = setInterval(
() => this.tick(),
1000
);
}

// 当 Clock 被移除的时候需要清理掉这个定时器, 在 React 中叫做 unmounting
componentWillUnmount() {
clearInterval(this.timerID);
}

tick() {
this.setState({
date: new Date()
});
}

render() {
return (
<div>
<h1>Hello, world!</h1>
<h2>It is {this.state.date.toLocaleTimeString()}.</h2>
</div>
);
}
}

ReactDOM.render(
<Clock />,
document.getElementById('root')
);

  componentDidMount 和 componentWillUnmount 被叫做 lifecycle hooks

  原文:https://blog.csdn.net/gx15366039985/article/details/78142778

React 中的 定义组件的 两种方式的更多相关文章

  1. 使用react定义组件的两种方式

    react组件的两种方式:函数定义,类定义 在定义一个组件之前,首先要明白一点:react元素(jsx)是react组件的最基本的组成单位 组件要求: 1,为了和react元素进行区分,组件名字首必须 ...

  2. react学习笔记1之声明组件的两种方式

    //定义组件有两种方式,函数和类 function Welcome(props) { return <h1>Hello, {props.name}</h1>; } class ...

  3. strus2中获取表单数据 两种方式 属性驱动 和模型驱动

    strus2中获取表单数据 两种方式 属性驱动 和模型驱动 属性驱动 /** * 当前请求的action在栈顶,ss是栈顶的元素,所以可以利用setValue方法赋值 * 如果一个属性在对象栈,在页面 ...

  4. .Net 中读写Oracle数据库常用两种方式

    .net中连接Oracle 的两种方式:OracleClient,OleDb转载 2015年04月24日 00:00:24 10820.Net 中读写Oracle数据库常用两种方式:OracleCli ...

  5. 怎样在Android开发中FPS游戏实现的两种方式比较

    怎样在Android开发中FPS游戏实现的两种方式比较 如何用Android平台开发FPS游戏,其实现过程有哪些方法,这些方法又有哪些不同的地方呢?首先让我们先了解下什么是FPS 英文名:FPS (F ...

  6. HTML中设置背景图的两种方式

    HTML中设置背景图的两种方式 1.background    background:url(images/search.png) no-repeat top; 2.background-image ...

  7. [Android] Android ViewPager 中加载 Fragment的两种方式 方式(二)

    接上文: https://www.cnblogs.com/wukong1688/p/10693338.html Android ViewPager 中加载 Fragmenet的两种方式 方式(一) 二 ...

  8. [Android] Android ViewPager 中加载 Fragment的两种方式 方式(一)

    Android ViewPager 中加载 Fragmenet的两种方式 一.当fragment里面的内容较少时,直接 使用fragment xml布局文件填充 文件总数 布局文件:view_one. ...

  9. 【转】在Android Studio中下载Android SDK的两种方式(Android Studio3.0、windows)

    在Android Studio中下载Android SDK的两种方式(Android Studio3.0.windows) 方式一.设置HTTP Proxy1. 打开Settings2. 点击HTTP ...

随机推荐

  1. [Beta]第七次 Scrum Meeting

    [Beta]第七次 Scrum Meeting 写在前面 会议时间 会议时长 会议地点 2019/5/17 22:00 10min 大运村公寓6F寝室 附Github仓库:WEDO 例会照片 工作情况 ...

  2. CentOS 6和 CentOS 7的区别【转】

    虽然,redhat 8在今年已经推出了,但是centos 8还没有推出.而且公司好多都在用centos 6和7 来了解一下6和7的区别吧 整体说明 1.系统 项目CentOS 6CentOS7 . 安 ...

  3. Research Guide for Neural Architecture Search

    Research Guide for Neural Architecture Search 2019-09-19 09:29:04 This blog is from: https://heartbe ...

  4. Python面向对象编程核心思想

    原文地址https://blog.csdn.net/weixin_42134789/article/details/80194788 https://blog.csdn.net/happyjxt/ar ...

  5. 025_Excel知识汇总

    一.Excel相对引用和绝对应用的区别 加上了绝对地址符“$”的列标和行号为绝对地址,在公式向旁边复制时不会发生变化,没有加上绝对地址符号的列标和行号为相对地址,在公式向旁边复制时会跟着发生变化. 具 ...

  6. LeetCode 993. Cousins in Binary Tree(判断结点是否为Cousin)

    993. Cousins in Binary Tree In a binary tree, the root node is at depth 0, and children of each dept ...

  7. LinkedBlockingQueue与ArrayBlockingQueue

    阻塞队列与普通的队列(LinkedList/ArrayList)相比,支持在向队列中添加元素时,队列的长度已满阻塞当前添加线程,直到队列未满或者等待超时:从队列中获取元素时,队列中元素为空 ,会将获取 ...

  8. tomcat一闪而过,无法开启

    记事本打开startup.bat,找到最后一句话::end,我们知道end表示结束的意思,:end是一个标记,我们在后面加上一句pause,然后启动该脚本 正常情况下回像下图显示 如果一闪而过的话,可 ...

  9. Rabbitmq消息积压清理

    #!/bin/bash QUE=`rabbitmqctl list_queues messages_ready name durable|grep -v "^Listing" |g ...

  10. NET Core3高性能RPC框架

    NET Core 3.0 使用gRPC 一.前言 在前一文 <ASP.NET Core 3.0 使用gRPC>中有提到 gRPC 支持双向流调用,支持实时推送消息,这也是 gRPC的一大特 ...