React文档(五)组件和props

组件可以让你将UI分割成独立的,可复用的模块,然后考虑将每个模块彼此隔离。
从概念上理解,组件就像js中的函数。他们接受随意的输入(被称为props)然后返回React元素来描述屏幕上应该出现什么。

函数式和类式组件

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

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

这个函数是一个有效的React组件因为它接受一个props对象作为参数然后返回一个React元素。我们把这样的叫做函数式组件因为他们就是字面意思上js函数。

你也可以使用ES6的class来定义一个组件:

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

从React的角度来看,以上两种方式定义的组件是一样的。

类定义这种方法有一些额外的特性我们在下一章节会讨论。在此之前,我们会使用函数来定义组件因为这样比较简洁。

渲染一个组件

先前,我们只遇到React元素代表DOM标签的情况:

const element = <div />;

然而,React元素也可以代表用户自定义组件:

const element = <Welcome name="Sara" />;

当React认为一个元素代表用户自定义组件时,它通过单个对象传递JSX属性到这个组件。我们叫这个对象为“props”。

举个例子,这段代码渲染“Hello, Sara”到页面上:

function Welcome(props) {return <h1>Hello, {props.name}</h1>;
}const element = <Welcome name="Sara" />;
ReactDOM.render(element,document.getElementById('root')
);

在CodePen中试一试

让我们概括一下在这个例子中到底发生了什么:

  1. 我们调用了ReactDOM.render()来渲染<Welcome name="Sara"/>元素。
  2. React调用Welcome组件并将{name: 'Sara'}这个对象作为props传入。
  3. Welcome组件返回了一个<h1>Hello, Sara</h1>元素作为结果。
  4. React DOM高效地更新了DOM来匹配<h1>Hello, Sara</h1>。

附加说明:

总是将组件名的首字母大写。

举个例子,<div/>代表一个DOM标签,但是<Welcome />代表一个一个组件并且需要Welcome定义或引入。

组合组件

组件可以在它的输出中引用其他组件。这样我们可以使用同一个组件抽象出任意等级的细节。一个按钮,一个表单,一个目录,一个对话框,整个屏幕内容:在React应用中,所有这些都同样表示为组件。

举个例子,我们创建一个渲染Welcome组件多次的App组件:

function Welcome(props) {return <h1>Hello, {props.name}</h1>;
}function App() {return (<div><Welcome name="Sara" /><Welcome name="Cahal" /><Welcome name="Edite" /></div>
  );
}ReactDOM.render(<App />,document.getElementById('root')
);

在CodePen中试一试

通常,新的React应用有一个单独的App组件在最顶端。然而,如果你整合React到一个已经存在的应用里,也许你会从底开始通过小组件类似Button逐渐替换一直到最高级别。

附加说明:

组件必须返回一个单个的根元素。这就是为什么我们添加了一个<div>去包含所有<Welcome />元素。

提取组件

不要害怕将组件分割成更小的组件。

举个例子,看看这个Comment组件:

function Comment(props) {return (<div className="Comment"><div className="UserInfo"><img className="Avatar"src={props.author.avatarUrl}alt={props.author.name}/><div className="UserInfo-name">{props.author.name}</div></div><div className="Comment-text">{props.text}</div><div className="Comment-date">{formatDate(props.date)}</div></div>
  );
}

在CodePen里试一试

Comment组件接受了author(一个对象),text(一个字符串)和date(一个日期对象)作为属性,它在一个社会媒体网站上描述一段评论。

这个组件可以被简化因为嵌套的东西太多,它很难被复用。让我们从这里提取出一些组件。

首先,我们将提取Avatar:

function Avatar(props) {return (<img className="Avatar"src={props.user.avatarUrl}alt={props.user.name}/>
  );
}

Avatar组件不需要知道自己将要被渲染到Comment内部。这就是为什么我们给他的属性一个更通用的名字:user而不是author。

建议在命名属性名的时候从组件自己的角度来命名而不要从使用时的上下文环境来命名。

现在可以将Comment组件简化为更小的部分:

function Comment(props) {return (<div className="Comment"><div className="UserInfo"><Avatar user={props.author} /><div className="UserInfo-name">{props.author.name}</div></div><div className="Comment-text">{props.text}</div><div className="Comment-date">{formatDate(props.date)}</div></div>
  );
}
接下来,我们将提取UserInfo组件,它内部渲染了一个Avatar旁边的用户名:
function UserInfo(props) {return (<div className="UserInfo"><Avatar user={props.user} /><div className="UserInfo-name">{props.user.name}</div></div>
  );
}

这允许我们更进一步地简化Comment:

function Comment(props) {return (<div className="Comment"><UserInfo user={props.author} /><div className="Comment-text">{props.text}</div><div className="Comment-date">{formatDate(props.date)}</div></div>
  );
}

在CodePen中试一试

提取组件也许看起来像很枯燥的工作,但是拥有一系列可复用的组件会在大型应用中起到很好的效果。有一个很好的经验法则就是如果有一部分UI已经被使用多次(如Button,Panel,Avatar),或者组件本身已经足够复杂(如APP,FeedStory,Comment),那么使它成为一个可复用的组件会更合适。

props是只读的

如果你声明了一个组件使用函数或者类,那么它永远不能修改它自己的props。看看这个sum函数:

function sum(a, b) {return a + b;
}

这样的函数被称为“纯函数”因为它们不尝试改变它们的输入,而且在输入同样的情况下一直返回一样的结果。

相比之下,这个函数就不是纯函数因为它改变了输入:

function withdraw(account, amount) {account.total -= amount;
}
React是很灵活的但是它有一个严格的规定:
所有React组件必须是纯粹的函数不能改变props。
当然,应用的UI是随着时间动态变化的。在下一章节,我们会介绍一个新的概念叫做“state”。state允许React组件随着时间变化去改变他们的输出作为对用户动作的响应,网络的响应或者其他东西。state并没有违反这个规定。

转载于:https://www.cnblogs.com/hahazexia/p/6381054.html

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/396794.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Windows 应用容器化

背景 在这个时间点&#xff0c;我们可能已经对 Linux 容器使用已经达到熟练掌握的程度&#xff0c;因为 Docker 与 Kubernetes 都是最早为 Linux 平台设计。当我们从容器这项技术中体会到种种收益&#xff0c;对于我们的 windows 的应用是否也能利用容器技术简化我们的开发运维…

python安装函数库pip网址_批量安装python库函数---pip

android Sqlite小记 1.android.database.sqlite.SQLiteException: near "": syntax error (code 1): 语法错误,如果你的报了这个错误 ... win8 VB6打开提示MSCOMCTL&period;ocx未注册 从xp上复制相应的文件到win8相应的位置,如果是不可以,win8中反注册此控件,再注…

关于OC中的block自己的一些理解(二)

一、block延伸&#xff1a;页面间反向传值 1&#xff09;first页面的代码 - (void)viewDidLoad {[super viewDidLoad];[self setupBtn];self.view.backgroundColor [UIColor whiteColor];} - (void)setupBtn {UIButton * btn [[UIButton alloc]init];[btn addTarget:self act…

C语言多项式乘法模拟,急!!!!c语言:求n次多项式的加法和乘法

该楼层疑似违规已被系统折叠 隐藏此楼查看此楼if(s->data.coef!0.0){s->data.expnp->data.expn;r->nexts;rs;}pp->next;qq->next;break;case 1:s->data.coefq->data.coef;s->data.expnq->data.expn;r->nexts;rs;qq->next;break;}//switch}…

opengl 安装_如何使得支持 OpenGL 的 Flatpak 应用和游戏在专有 Nvidia 图形驱动下工作 | Linux 中国...

一些支持 OpenGL 并打包为 Flatpak 的应用和游戏无法使用专有 Nvidia 驱动启动。本文将介绍如何在不安装开源驱动(Nouveau)的情况下启动这些 Flatpak 应用或游戏。-- Logix这有个例子。我在我的 Ubuntu 18.04 桌面上使用专有的 Nvidia 驱动程序 (nvidia-driver-390)&#xff0c…

laravel -admin 禁止某一行删除

$grid->actions(function (Grid\Displayers\Actions $actions) {if ($actions->getKey() 1) {$actions->disableDelete();} });转载于:https://www.cnblogs.com/vinzen/p/9675823.html

thinkphp-where-数组条件-普通查询

语法Db::table(表名)->where(条件)->select();示例$map[name] thinkphp; $map[status] 1;// 把查询条件传入查询方法 Db::table(think_user)->where($map)->select();对应原始sqlSELECT * FROM think_user WHERE namethinkphp AND status1转载于:https://blog.51…

RequireJS入门(一)

RequireJS由James Burke创建&#xff0c;他也是AMD规范的创始人。 RequireJS会让你以不同于往常的方式去写JavaScript。你将不再使用script标签在HTML中引入JS文件&#xff0c;以及不用通过script标签顺序去管理依赖关系。 当然也不会有阻塞&#xff08;blocking&#xff09;的…

Oracle数据库中游标的游标的使用

本人不喜欢说概念啥的&#xff0c;就直接说明使用方法吧 案例1&#xff1a; 1 DECALRE2 --声明游标3 CURSOR C_USER(C_ID NUMBER) IS4 SELECT NAME FROM USER WHERE TYPEID C_ID;5 V_NAME C_USER%rowtype; --定义游标变量6 BEGIN7 OPEN C_USER(变量值); …

eclipse占用内存过大_idea被评最好用java开发工具,为什么用eclipse的人更多?

从事java开发一般都需要使用到一些开发工具&#xff0c;记得以前刚接触java的时候还用过MyEclipse。idea被评为最好用java开发工具&#xff0c;为什么用eclipse的人更多?下面一起来了解下吧&#xff01;IDEA毕竟不便宜啊&#xff0c;很多企业都买不起只能用Eclipse了&#xff…

Asp.net mvc 知多少(六)

本系列主要翻译自《ASP.NET MVC Interview Questions and Answers 》- By Shailendra Chauhan&#xff0c;想看英文原版的可访问http://www.dotnettricks.com/free-ebooks自行下载。该书主要分为两部分&#xff0c;ASP.NET MVC 5、ASP.NET WEB API2。本书最大的特点是以面试问答…

数据结构c语言版总结,数据结构:C语言常见算法总结

【1】求最大值与最小值.#includevoid main(){int num[5],max,min,i;printf(\"请输入5个数字:\")for(i0;i<5;i)scanf(\"%d\",&num)maxnum[0];minnum[0];for(i1;i<5;i){if(maxmaxnum;if(min>num)minnum;}printf(\"最大值为:%d\",max)…

selenium选错弹出层的下拉框

要先选中这个弹出层的form元素&#xff0c;再找下拉框 public void downSelectBox(){driver.get("https://www.imooc.com/user/setprofile");driver.findElement(By.className("pull-right")).click();try {Thread.sleep(2000);} catch (InterruptedExcept…

python面向过程是基于面向对象的_Python5.1-面向对象与面向过程

面向对象&#xff1a; 将数据与函数绑定在一起&#xff0c;进行封装&#xff0c; 这样能够更快速的开发程序&#xff0c;减少了重复 代码的重写过程。 优点&#xff1a; 易维护、易复用、易扩展&#xff0c;由于面向对象有封装、继承、多态性的特性&#xff0c;可以设 计出低耦…

C语言 1A gt $20,C语言输出 1到20 的阶乘之和

除了调用库&#xff0c;绝对找不到比这更精简的代码了.#include#includelong long getdata(long long n){long long sum 1;while(n){sum*n--;}return sum;}int main(){long long sum 0;long long nums 20;while(nums){sumgetdata(nums--);}printf("%lld",sum);}【…

PHP设计模式——策略模式

<?php /*** 策略模式* 策略模式帮助构建的对象不必自身包含逻辑&#xff0c;而是能够根据需要利用其他对象中的算法* * 在能够创建基于对象的&#xff0c;由自包含算法组成的可互换对象时&#xff0c;最佳的做法是使用策略模式 */ interface Math{function calc($op1,$op2)…

自动化收益评估

1.自动化测试实施成本&#xff1a;自动化实施成本 前期开发成本 后期维护成本 2.自动化测试收益 自动化测试的运行次数 3.自动化测试实施成本比&#xff1a;怕 k*n/&#xff08;cic2&#xff09; k--手工执行自动化用例所花费的时间成本&#xff0c;n--自动化测试用例执行的次…

32位PLSQL Developer无法登录Oracle 11g 64位

问题&#xff1a; Windows10 64位下装Oracle 11g 64位&#xff0c;PLSQL Developer使用出现以下问题&#xff1a; 1、Database下拉框为空&#xff1a; 2、强制输入用户名、密码及Database&#xff0c;登录弹出&#xff1a; 说明PLSQL Developer并不支持Oracle 64位客户端连接。…

python快速排序函数_python算法-快速排序

快速排序&#xff1a; 学习快速排序&#xff0c;要先复习下递归&#xff1a; 递归的2个条件&#xff1a; 1. 函数自己调用自己 2.有一个退出的条件 练习&#xff1a;基于递归下一个函数&#xff0c;计算n&#xff01;并且求出当n等于10的值。 n&#xff01;n * n-1*…..*1 #enc…

c语言课程结束,【计算机】程序设计——C语言基础秋季学期课程圆满结束

2019年10月22日11&#xff1a;40&#xff0c;在同学们发自内心的掌声中&#xff0c;课外培养中心开办的程序设计——C语言基础课程圆满落幕。本次课程由计算机中心的陶媛老师予以指导&#xff0c;在短短五次课的时间里&#xff0c;同学们对学习C语言都有了更深的体悟。对于大部…