React 中的 定义组件的 两种方式
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 { render() { |
- 在 Class 中添加 lifecycle方法
在有很多组件的大型应用中,当在组件被销毁的时候及时地释放资源是非常重要的。
class Clock extends React.Component { // 当 Clock 第一次渲染到 DOM 时创建一个定时器,在 React 中叫做 mounting // 当 Clock 被移除的时候需要清理掉这个定时器, 在 React 中叫做 unmounting tick() { render() { ReactDOM.render( |
componentDidMount
和 componentWillUnmount
被叫做 lifecycle hooks
原文:https://blog.csdn.net/gx15366039985/article/details/78142778
React 中的 定义组件的 两种方式的更多相关文章
- 使用react定义组件的两种方式
react组件的两种方式:函数定义,类定义 在定义一个组件之前,首先要明白一点:react元素(jsx)是react组件的最基本的组成单位 组件要求: 1,为了和react元素进行区分,组件名字首必须 ...
- react学习笔记1之声明组件的两种方式
//定义组件有两种方式,函数和类 function Welcome(props) { return <h1>Hello, {props.name}</h1>; } class ...
- strus2中获取表单数据 两种方式 属性驱动 和模型驱动
strus2中获取表单数据 两种方式 属性驱动 和模型驱动 属性驱动 /** * 当前请求的action在栈顶,ss是栈顶的元素,所以可以利用setValue方法赋值 * 如果一个属性在对象栈,在页面 ...
- .Net 中读写Oracle数据库常用两种方式
.net中连接Oracle 的两种方式:OracleClient,OleDb转载 2015年04月24日 00:00:24 10820.Net 中读写Oracle数据库常用两种方式:OracleCli ...
- 怎样在Android开发中FPS游戏实现的两种方式比较
怎样在Android开发中FPS游戏实现的两种方式比较 如何用Android平台开发FPS游戏,其实现过程有哪些方法,这些方法又有哪些不同的地方呢?首先让我们先了解下什么是FPS 英文名:FPS (F ...
- HTML中设置背景图的两种方式
HTML中设置背景图的两种方式 1.background background:url(images/search.png) no-repeat top; 2.background-image ...
- [Android] Android ViewPager 中加载 Fragment的两种方式 方式(二)
接上文: https://www.cnblogs.com/wukong1688/p/10693338.html Android ViewPager 中加载 Fragmenet的两种方式 方式(一) 二 ...
- [Android] Android ViewPager 中加载 Fragment的两种方式 方式(一)
Android ViewPager 中加载 Fragmenet的两种方式 一.当fragment里面的内容较少时,直接 使用fragment xml布局文件填充 文件总数 布局文件:view_one. ...
- 【转】在Android Studio中下载Android SDK的两种方式(Android Studio3.0、windows)
在Android Studio中下载Android SDK的两种方式(Android Studio3.0.windows) 方式一.设置HTTP Proxy1. 打开Settings2. 点击HTTP ...
随机推荐
- [Beta]第七次 Scrum Meeting
[Beta]第七次 Scrum Meeting 写在前面 会议时间 会议时长 会议地点 2019/5/17 22:00 10min 大运村公寓6F寝室 附Github仓库:WEDO 例会照片 工作情况 ...
- CentOS 6和 CentOS 7的区别【转】
虽然,redhat 8在今年已经推出了,但是centos 8还没有推出.而且公司好多都在用centos 6和7 来了解一下6和7的区别吧 整体说明 1.系统 项目CentOS 6CentOS7 . 安 ...
- Research Guide for Neural Architecture Search
Research Guide for Neural Architecture Search 2019-09-19 09:29:04 This blog is from: https://heartbe ...
- Python面向对象编程核心思想
原文地址https://blog.csdn.net/weixin_42134789/article/details/80194788 https://blog.csdn.net/happyjxt/ar ...
- 025_Excel知识汇总
一.Excel相对引用和绝对应用的区别 加上了绝对地址符“$”的列标和行号为绝对地址,在公式向旁边复制时不会发生变化,没有加上绝对地址符号的列标和行号为相对地址,在公式向旁边复制时会跟着发生变化. 具 ...
- 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 ...
- LinkedBlockingQueue与ArrayBlockingQueue
阻塞队列与普通的队列(LinkedList/ArrayList)相比,支持在向队列中添加元素时,队列的长度已满阻塞当前添加线程,直到队列未满或者等待超时:从队列中获取元素时,队列中元素为空 ,会将获取 ...
- tomcat一闪而过,无法开启
记事本打开startup.bat,找到最后一句话::end,我们知道end表示结束的意思,:end是一个标记,我们在后面加上一句pause,然后启动该脚本 正常情况下回像下图显示 如果一闪而过的话,可 ...
- Rabbitmq消息积压清理
#!/bin/bash QUE=`rabbitmqctl list_queues messages_ready name durable|grep -v "^Listing" |g ...
- NET Core3高性能RPC框架
NET Core 3.0 使用gRPC 一.前言 在前一文 <ASP.NET Core 3.0 使用gRPC>中有提到 gRPC 支持双向流调用,支持实时推送消息,这也是 gRPC的一大特 ...