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 的几个需要注意的地方的更多相关文章

  1. React和vue的差异和相似地方

    React 单向绑定(加插件后,还是可以双向绑定) Vue 双向绑定 组件化 1. React,需要编写render函数, 2. 当React状态的状态state改变是render就会重新被调用, 重 ...

  2. React不同版本之间需要注意的地方

    React Fiber react fiber指的是react16.0机器之后的版本,相对于之前的版本来说,这一个版本的更新做了很多的优化,所以和之前的版本中的用法可能会发生不同,所以,平常开发中,主 ...

  3. Vue.js 2.0 和 React、Augular等其他框架的全方位对比

    引言 这个页面无疑是最难编写的,但也是非常重要的.或许你遇到了一些问题并且先前用其他的框架解决了.来这里的目的是看看Vue是否有更好的解决方案.那么你就来对了. 客观来说,作为核心团队成员,显然我们会 ...

  4. 初探React,将我们的View标签化

    前言 我之前喜欢玩一款游戏:全民飞机大战,而且有点痴迷其中,如果你想站在游戏的第一阶梯,便需要不断的练技术练装备,但是腾讯的游戏一般而言是有点恶心的,他会不断的出新飞机.新装备.新宠物,所以,很多时候 ...

  5. 入门React和Webpack

    最近在学习React.js,之前都是直接用最原生的方式去写React代码,发现组织起来特别麻烦,之前听人说用Webpack组织React组件得心应手,就花了点时间学习了一下,收获颇丰 说说React ...

  6. 轻松入门React和Webpack

    最近在学习React.js,之前都是直接用最原生的方式去写React代码,发现组织起来特别麻烦,之前听人说用Webpack组织React组件得心应手,就花了点时间学习了一下,收获颇丰 <!-- ...

  7. Facebook React完全解析

    2004年,对于前端社区来说,是里程碑式的一年.Gmail横空出世,它带来基于前端渲染的原生应用级别的体验,相对于之前的服务端渲染网页可谓提升了一个时代,触动了用户的G点.自此,前端渲染的网站成为无数 ...

  8. Vue.js 2.0 和 React、Augular

    Vue.js 2.0 和 React.Augular 引言 这个页面无疑是最难编写的,但也是非常重要的.或许你遇到了一些问题并且先前用其他的框架解决了.来这里的目的是看看Vue是否有更好的解决方案.那 ...

  9. 探索React生态圈

    原文地址:http://www.csdn.net/article/2015-08-04/2825370-react 2004年,对于前端社区来说,是里程碑式的一年.Gmail横空出世,它带来基于前端渲 ...

随机推荐

  1. UVa 506 System Dependencies (细节问题)

    题意:输入几种指令,让你进行模拟操作,指令如下: DEPEND item1 item2 (item3 ...) 安装item1需要先安装item2(.item3……) INSTALL item1 安装 ...

  2. Swift实现UIKit Dynamic动画

    iOS7引入了UIKit Dynamics,可以帮助开发者开发出更接近真实世界的动画效果.之前,用户如果要做出这样的效果,需要话很多的时间在物理计算和Core Animation上.现在,所有的一切都 ...

  3. 看图说说JVM GC收集算法

  4. Codeforces761B Dasha and friends 2017-02-05 23:34 162人阅读 评论(0) 收藏

    B. Dasha and friends time limit per test 2 seconds memory limit per test 256 megabytes input standar ...

  5. SDJZUOJ迷宫问题

    题目描述 小明置身于一个迷宫,请你帮小明找出从起点到终点的最短路程. 小明只能向上下左右四个方向移动. 输入格式 输入包含多组测试数据.输入的第一行是一个整数T,表示有T组测试数据. 每组输入的第一行 ...

  6. django drf unique_together和UniqueTogetherValidator

    联合唯一可以使用django中的unique_together,和DRF中的UniqueTogetherValidator->https://www.django-rest-framework. ...

  7. .NET Core调用WCF的最佳实践

    现在.NET Core貌似很火,与其他.NET开发者交流不说上几句.NET Core都感觉自己落伍了一样.但是冷静背后我们要也看到.NET Core目前还有太多不足,别的不多说,与自家的服务框架WCF ...

  8. artemplate模板

    artTemplate 介绍 最近使用了一款模板,学习成本比较低,性能也不错.觉得很好用,所以推荐给大家. artTemplate 是新一代 javascript 模板引擎,它采用预编译方式让性能有了 ...

  9. T-Sql之集合

    1.知识点 先了解一下集合概念,集合运算(UNION(并).EXCEPT(补).INTERSECT(交))是指表之间的垂直操作.区别联接(CROSS,INNER.OUTER)是指表之间的水平操作,基础 ...

  10. pageadmin 网站建设系统如何新建进程池并在站点中使用

    1.打开iis管理界面,右键应用程序池,点击添加应用程序池,添加界面如下图,注意pageadmin cms net版本选择4.0,托管模式建议选择集成模式. 2.添加完毕后,在网站中点击对应站点,点击 ...