于一__

React拥有功能强大的组合模式，我们推荐使用组合而非继承来实现代码的复用。 在本章中，我们将要讨论几个React新手经常会遇到的关于继承的问题并展示我们如何使用组合解决它们。 某些组件不能预先知道它的子元素是怎样的，这对于类似于SideBar或Dialog这类容器组件来说是十…

很多情况下我们使用的多个组件需要对同一个数据做出对应的反应。在这里我们推荐把这个共享的状态提升到距离这些组件最近的祖先组件。现在让我们来看看这是怎么工作的。 在本章中，我们将会创建一个温度计算器来计算在给定温度下水是否会沸腾。 首先我们现创建一个BoilingVerdict组件…

React中表单元素与其他元素的有些不同，因为表单元素本身就是带有状态的。现在让我们来看看下面这段代码： 这个表单带有HTML自带的默认行为：当用户点击submit时，浏览器进入一个新的页面。在React中，表单是默认带有这一行为的。但在大多数情况下，我们需要一个JavaScr…

首先让我们来回顾以下怎么在JavaScript中转换列表。 在下面的代码中，我们使用map()函数让数组中的每一个数字乘2。在这之后我们将通过map()返回的新数组赋值给doubled并将其打印出来： 打印出来的是[2, 4, 6, 8, 10]。 在React中，将数组转换成…

React中的条件渲染与JavaScript一致。使用JavaScript运算符（如if或条件运算符）来创建代表当前状态的元素，之后让React更新UI以匹配它们。 现在我们来创建一个Greeting组件来根据用户是否已经登录展现上面两个组件之一。 上面的例子根据isLogge…

处理React元素的事件与处理DOM元素上的事件十分相似，它们仅有一些语法上的区别。 React上的另一个不同之处在于你不能返回false去阻止默认行为，必须显示地调用preventDefault才能阻止默认行为。 在这里，e是一个合成事件。React根据W3C规范来定义这些合…

我们来看看上节中编写的计时器。目前我们只学习了一种方式来更新UI，那就是调用ReactDOM.render()来改变渲染输出。 在本节中，我们将学习如何封装Clock组件并使其能够被复用。并且Clock组件将会设置自己的计时器并且每秒更新一次。 首先，我们可以封装Clock组件…

概念上来说，组件就好像是JavaScript里的函数。它们能够接受任意的入参（称作props）并返回描述屏幕展示UI的React元素。 定义组件最简单的方法就是写一个JavaScript函数。 不用担心，这是一个可使用的组件，因为它接收了一个带有数据的props（也可以用pro…

不想浏览器的DOM元素，React元素是便于构建的普通对象。React DOM负责更新DOM以匹配React元素。 因为在标签内部的所有元素都由React DOM管理，所以我们将这个<div>标签称作根节点。 使用React构建的应用通常有一个单独的根DOM节点。但如果您要在现…