React 的几个需要注意的地方
1.写组件时,最好将一个大的组件分解成多个小的组件。
通过React写组件时,应当尽可能地将组件分为更小的更多的组件,然后再复合组件。
比如下面的评论组件就是一个组件,一个庞大的组件,这时我们还没有将之分解,更没有复合:
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>
);
}
这个组件要接受一个author(对象)、一个text(字符串)和一个data(data对象)作为props。
因为这样的复杂嵌套关系导致如果我们需要修改这个组件变得非常棘手,并且在这种情况下,我们很难能够重用其中的小的组件,因此,这时候我们就需要将这个大的组件分解为几个小的组件,这样对于大的app,我们的工作就会变得越来越容易。
我们将之分解如下:
function formatDate(date) {
return date.toLocaleDateString();
} function Avatar(props) {
return (
<img className="Avatar"
src={props.user.avatarUrl}
alt={props.user.name} />
);
} function UserInfo(props) {
return (
<div className="UserInfo">
<Avatar user={props.user} />
<div className="UserInfo-name">
{props.user.name}
</div>
</div>
);
} 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>
);
} const comment = {
date: new Date(),
text: 'I hope you enjoy learning React!',
author: {
name: 'Hello Kitty',
avatarUrl: 'http://placekitten.com/g/64/64'
}
};
ReactDOM.render(
<Comment
date={comment.date}
text={comment.text}
author={comment.author} />,
document.getElementById('root')
);
这样,我们就把一个大的组件分解成了几个小的组件并且组合起来,这样更有利于代码的重用以及后期的维护。
2. 组件的props是只读的。
当我们使用函数的方法定义一个组件的时候,我们是不能修改它的 props的。
看下面这个函数:
function sum(a, b) {
return a + b;
}
这种类型的函数我们称为“pure”, 因为它没有尝试着去改变它的Input,并且对于同样的输入总是返回同样的结果。
对比之下,下面的这种函数就是"impure"的,因为它改变了自己的输入:
function withdraw(account, amount) {
account.total -= amount;
}
React是非常灵活的,但是它有自己严格的规则;
所有的React组件关于它们的props都必须表现得像 “pure” 函数。
3.修改组件的state
虽然说props是只读的,但是state却是可以修改的,可也不能随意修改,如下就是错的方式:
// Wrong
this.state.comment = 'Hello';
相反,我们需要使用setState(),如下所示:
// Correct
this.setState({comment: 'Hello'});
并且如果我们使用es6的class创建组件,设置state初始值的唯一方式就是在constructor中设置(具体可以在mdn中学习es6)。
React 的几个需要注意的地方的更多相关文章
- React和vue的差异和相似地方
React 单向绑定(加插件后,还是可以双向绑定) Vue 双向绑定 组件化 1. React,需要编写render函数, 2. 当React状态的状态state改变是render就会重新被调用, 重 ...
- React不同版本之间需要注意的地方
React Fiber react fiber指的是react16.0机器之后的版本,相对于之前的版本来说,这一个版本的更新做了很多的优化,所以和之前的版本中的用法可能会发生不同,所以,平常开发中,主 ...
- Vue.js 2.0 和 React、Augular等其他框架的全方位对比
引言 这个页面无疑是最难编写的,但也是非常重要的.或许你遇到了一些问题并且先前用其他的框架解决了.来这里的目的是看看Vue是否有更好的解决方案.那么你就来对了. 客观来说,作为核心团队成员,显然我们会 ...
- 初探React,将我们的View标签化
前言 我之前喜欢玩一款游戏:全民飞机大战,而且有点痴迷其中,如果你想站在游戏的第一阶梯,便需要不断的练技术练装备,但是腾讯的游戏一般而言是有点恶心的,他会不断的出新飞机.新装备.新宠物,所以,很多时候 ...
- 入门React和Webpack
最近在学习React.js,之前都是直接用最原生的方式去写React代码,发现组织起来特别麻烦,之前听人说用Webpack组织React组件得心应手,就花了点时间学习了一下,收获颇丰 说说React ...
- 轻松入门React和Webpack
最近在学习React.js,之前都是直接用最原生的方式去写React代码,发现组织起来特别麻烦,之前听人说用Webpack组织React组件得心应手,就花了点时间学习了一下,收获颇丰 <!-- ...
- Facebook React完全解析
2004年,对于前端社区来说,是里程碑式的一年.Gmail横空出世,它带来基于前端渲染的原生应用级别的体验,相对于之前的服务端渲染网页可谓提升了一个时代,触动了用户的G点.自此,前端渲染的网站成为无数 ...
- Vue.js 2.0 和 React、Augular
Vue.js 2.0 和 React.Augular 引言 这个页面无疑是最难编写的,但也是非常重要的.或许你遇到了一些问题并且先前用其他的框架解决了.来这里的目的是看看Vue是否有更好的解决方案.那 ...
- 探索React生态圈
原文地址:http://www.csdn.net/article/2015-08-04/2825370-react 2004年,对于前端社区来说,是里程碑式的一年.Gmail横空出世,它带来基于前端渲 ...
随机推荐
- Hadoop中Writable类之三
1.BytesWritable <1>定义 ByteWritable是对二进制数据组的封装.它的序列化格式为一个用于指定后面数据字节数的整数域(4个字节),后跟字节本身. 举个例子,假如有 ...
- swift - 动态计算文本高度
func heightOfCell(text : String) -> CGFloat { let attributes = [NSFontAttributeName:UI ...
- 洛谷P4556 [Vani有约会]雨天的尾巴(线段树合并)
题目背景 深绘里一直很讨厌雨天. 灼热的天气穿透了前半个夏天,后来一场大雨和随之而来的洪水,浇灭了一切. 虽然深绘里家乡的小村落对洪水有着顽固的抵抗力,但也倒了几座老房子,几棵老树被连根拔起,以及田地 ...
- oracle 批量删除触发器
--生成删除触发器的语句 select 'drop trigger "'||trigger_name||'";' from all_triggers where TRIGGER_ ...
- 疑难杂症--在Windows Server 2008 R2上运行SQL Server 2008情况下,CPU过多导致的问题
64位的Windows7和Windows Server 2008 R2为了能够在一台机器上,支持超过64个逻辑CPU, 引入了Processor Group这个概念.Processor Group会把 ...
- Solr 使用自定义 Query Parser(短语查询,精准查询)
原文出处:http://blog.chenlb.com/2010/08/solr-use-custom-query-parser.html 由于 Solr 默认的 Query Parser 生成的 Q ...
- PyQt4 QListWidget 使用教程
转自:http://blog.csdn.net/seeground/article/details/49177387?locationNum=3&fps=1 listWidget = QLis ...
- ASP.net 居中
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs& ...
- 回去看linux的指令
SYNC CL : MSM8953 @ CL#:12212299 PROJECT PATH : // Platform / N / NILE / COMBINATION / MSM8953 Cross ...
- Java容器中的元素输出
1.容器不同于数组,容器若是想输出全部元素,可以直接利用System.out.println(collection) public class TestCollectionArrayPrint { p ...