学习React.js比你想象的要简单

例 7：一个 React 元素是一个可以通过 {} 使用的表达式

上述 MaybeError 组件只会在有 errorMessage 传入或者另外有一个空的 div 才会显示 ErrorDisplay 组件。React 认为 {true}、 {false}

{undefined} 和 {null} 是有效元素，不呈现任何内容。

我们也可以在 JSX 中使用所有的 JavaScript 的集合方法（map、reduce 、filter、 concat 等）。因为他们返回的也是表达式：

const Doubler = ({value=[1, 2, 3]}) => 

 {value.map(e => e * 2)}
 
;
// 使用下面内容 
ReactDOM.render(, mountNode);复制代码

例 8：在 {} 中使用数组

请注意我是如何给出上述 value 属性的默认值的，因为这全部都只是 JavaScript。注意我只是在 div 中输出一个数组表达式。React 是完全可以的。它只会在文本节点中放置每一个加倍的值。

4 你可以使用 JavaScript 类写 React 组件

简单的函数组件非常适合简单的需求，但是有的时候我们需要的更多。React 也支持通过使用 JavaScript 类来创建组件。这里 Button 组件（在例 1 中）就是使用类的语法编写的。

class Button extends React.Component {
 render() { return {this.props.label};
 }
}// 使用（相同的语法）ReactDOM.render(, mountNode);复制代码

例 9：使用 JavaScript 类创建组件

类的语法是非常简单的：定义一个扩展的 React.Component 类（另一个你需要学习的 React 的顶级 API）。该类定义了一个单一的实例函数 —— render()，并使函数返回虚拟 DOM 对象。每一次我们使用基于类的 Button 组件（例如，通过 ）,React 将从这个基于类的组件中实例化对象，并在 DOM 树中使用该对象。

这就是为什么上面的例子中我们可以在 JSX 中使用 this.props.label 渲染输出的原因，因为每一个组件都有一个特殊的称为 props 的 实例 属性，这让所有的值传递给该组件时被实例化。

由于我们有一个与组件的单个使用相关联的实例，所以我们可以按照自己的意愿定制该实例。例如，我们可以通过使用常规 JavaScript 构造函数来构造它：

class Button extends React.Component {
 constructor(props) { super(props); this.id = Date.now();
 }
 render() { return {this.props.label}

;  } }// 使用ReactDOM.render(, mountNode);复制代码

例 10：自定义组件实例

我们也可以定义类的原型并且在任何我们希望的地方使用，包括在返回的 JSX 输出的内部：

class Button extends React.Component {
 clickCounter = 0;
 handleClick = () => {
 console.log(`Clicked: ${++this.clickCounter}`);
 };
 render() { return (
 
 {this.props.label}
 
 );
 }
}// 使用ReactDOM.render(, mountNode);复制代码

例 11：使用类的属性（通过单击保存按钮进行测试）

注意上述例 11 中的几件事情

• handleClick 函数使用 JavaScript 新提出的 class-field syntax 语法。这仍然是 stage-2，但是这是访问组件安装实例（感谢箭头函数）最好的选择（因为很多原因）。然而，你需要使用类似 Babel 的编译器解码为 stage-2（或者仅仅是类字段语法）来让上述代码工作。 jsComplete REPL 有预编译功能。

// 错误：onClick={this.handleClick()}// 正确：onClick={this.handleClick}复制代码

5 React 中的事件：两个重要的区别

当处理 React 元素中的事件时，我们与 DOM API 的处理方式有两个非常重要的区别：

• 所有 React 元素属性（包括事件）都使用 camelCase 命名，而不是 lowercase。例如是 onClick 而不是 onclick。

• 我们将实际的 JavaScript 函数引用传递给事件处理程序，而不是字符串。例如是 onClick={handleClick} 而不是 onClick="handleClick"。

React 用自己的对象包装 DOM 对象事件以优化事件处理的性能，但是在事件处理程序内部，我们仍然可以访问 DOM 对象上所有可以访问的方法。React 将经过包装的事件对象传递给每个调用函数。例如，为了防止表单提交默认提交操作，你可以这样做：

class Form extends React.Component {
 handleSubmit = (event) => {
 event.preventDefault();
 console.log('Form submitted');
 };
 render() { return (
 
 Submit
 
 );
 }
}// 使用ReactDOM.render(, mountNode);复制代码

例 12：使用包装过的对象

6 每一个 React 组件都有一个故事：第 1 部分

以下仅适用于类组件（扩展 React.Component）。函数组件有一个稍微不同的故事。

1. 首先，我们定义了一个模板来创建组件中的元素。

2. 然后，我们在某处使用 React。例如，在 render 内部调用其他的组件，或者直接使用 ReactDOM.render。

3. 然后，React 实例化一个对象然后给它设置 props 然后我们可以通过 this.props 访问。这些属性都是我们在第 2 步传入的。

4. 因为这些全部都是 JavaScript，constructor 方法将会被调用（如果定义的话）。这是我们称之为的第一个：组件生命周期方法。

5. 接下来 React 计算渲染之后的输出方法（虚拟 DOM 节点）。

6. 因为这是 React 第一次渲染元素，React 将会与浏览器连通（代表我们使用 DOM API）来显示元素。这整个过程称为 mounting。

7. 接下来 React 调用另一个生命周期函数，称为 componentDidMount。我们可以这样使用这个方法，例如：在 DOM 上做一些我们现在知道的在浏览器中存在的东西。在此生命周期方法之前，我们使用的 DOM 都是虚拟的。

8. 一些组件的故事到此结束，其他组件得到卸载浏览器 DOM 中的各种原因。在后一种情况发生时，会调用另一个生命周期的方法，componentWillUnmount。

9. 任何 mounted 的元素的状态都可能会改变。该元素的父级可能会重新渲染。无论哪种情况，mounted 的元素都可能接收到不同的属性集。React 的魔力就是这儿，我们实际上需要的正是 React 的这一点！在这一点之前，说实话，我们并不需要 React。

10. 组价的故事还在继续，但是在此之前，我们需要理解我所说的这种状态。

7 React 组件可以具有私有状态

以下只适用于类组件。我有没有提到有人叫表象而已的部件 dumb？

状态类是任何 React 类组件中的一个特殊字段。React 检测每一个组件状态的变化，但是为了 React 更加有效，我们必须通过 React 的另一个 API 改变状态字段，这就是我们要学习的另一个 API —— this.setState：

class CounterButton extends React.Component {
 state = { clickCounter: 0, currentTimestamp: new Date(),
 };
 handleClick = () => { this.setState((prevState) => { return { clickCounter: prevState.clickCounter + 1 };
 });
 };
 componentDidMount() {
 setInterval(() => { this.setState({ currentTimestamp: new Date() })
 }, 1000);
 }
 render() { return ( 

 Click
 
Clicked: {this.state.clickCounter}
 
Time: {this.state.currentTimestamp.toLocaleString()}
 
 );
 }
}// 使用ReactDOM.render(, mountNode);复制代码

例 13：setState 的 API

这可能是最重要的一个例子因为这将是你完全理解 React 基础知识的方式。这个例子之后，还有一些小事情需要学习，但从那时起主要是你和你的 JavaScript 技能。

让我们来看一下例 13，从类开始，总共有两个，一个是一个初始化的有初始值为 0 的 clickCounter 对象和一个从 new Date() 开始的 currentTimestamp。

另一个类是 handleClick 函数，在渲染方法中我们给按钮元素传入 onClick 事件。通过使用 setState 的 handleClick 方法修改了组件的实例状态。要注意到这一点。

另一个我们修改状态的地方是在一个内部的定时器，开始在内部的 componentDidMount 生命周期方法。它每秒钟调用一次并且执行另一个函数调用 this.setState。

在渲染方法中，我们使用具有正常读语法的状态上的两个属性（没有专门的 API）。

现在，注意我们更新状态使用两种不同的方式：

1. 通过传入一个函数然后返回一个对象。我们在 handleClick 函数内部这样做。

2. 通过传入一个正则对象，我们在在区间回调中这样做。

这两种方式都是可以接受的，但是当你同时读写状态时，第一种方法是首选的（我们这样做）。在区间回调中，我们只向状态写入而不读它。当有问题时，总是使用第一个函数作为参数语法。伴随着竞争条件这更安全，因为 setstate 实际上是一个异步方法。

我们应该怎样更新状态呢？我们返回一个有我们想要更新的的值的对象。注意，在调用 setState 时，我们全部都从状态中传入一个属性或者全都不。这完全是可以的因为 setState 实际上 合并 了你通过它（返回值的函数参数）与现有的状态，所以，没有指定一个属性在调用 setState 时意味着我们不希望改变属性（但不删除它）。

8 React 将要反应

React 的名字是从状态改变的反应中得来的（虽然没有反应，但也是在一个时间表中）。这里有一个笑话，React 应该被命名为Schedule！

然而，当任何组件的状态被更新时，我们用肉眼观察到的是对该更新的反应，并自动反映了浏览器 DOM 中的更新（如果需要的话）。

将渲染函数的输入视为两种：

• 通过父元素传入的属性

• 以及可以随时更新的内部私有状态

当渲染函数的输入改变时，输出可能也会改变。

React 保存了渲染的历史记录，当它看到一个渲染与前一个不同时，它将计算它们之间的差异，并将其有效地转换为在 DOM 中执行的实际 DOM 操作。

9 React 是你的代码

您可以将 React 看作是我们用来与浏览器通信的代理。以上面的当前时间戳显示为例。取代每一秒我们都需要手动去浏览器调用 DOM API 操作来查找和更新 p#timestamp 元素，我们仅仅改变组件的状态属性，React 做的工作代表我们与浏览器的通信。我相信这就是为什么 React 这么受欢迎的真正原因；我们只是不喜欢和浏览器先生谈话（以及它所说的 DOM 语言的很多方言），并且 React 自愿传递给我们，免费的！

10 每一个 React 组件都有一个故事：第 2 部分

现在我们知道了一个组件的状态，当该状态发生变化的时候，我们来了解一下关于这个过程的最后几个概念。

1. 当组件的状态被更新时，或者它的父进程决定更改它传递给组件的属性时，组件可能需要重新渲染。

2. 如果后者发生，React 会调用另一个生命周期方法：componentWillReceiveProps。

3. 如果状态对象或传递的属性改变了，React 有一个重要的决定要做：组件是否应该在 DOM 中更新？这就是为什么它调用另一个重要的生命周期方法 shouldComponentUpdate 的原因 。此方法是一个实际问题，因此，如果需要自行定制或优化渲染过程，则必须通过返回 true 或 false 来回答这个问题。

4. 如果没有自定义 shouldComponentUpdate，React 的默认事件在大多数情况下都能处理的很好。

5. 首先，这个时候会调用另一生命周期的方法：componentWillUpdate。然后，React 将计算新渲染过的输出，并将其与最后渲染的输出进行对比。

6. 如果渲染过的输出和之前的相同，React 不进行处理（不需要和浏览器先生对话）。

7. 如果有不同的地方，React 将不同传达给浏览器，像我们之前看到的那样。

8. 在任何情况下，一旦一个更新程序发生了，无论以何种方式（即使有相同的输出），React 会调用最后的生命周期方法：componentDidUpdate。

生命周期方法是逃生舱口。如果你没有做什么特别的事情，你可以在没有它们的情况下创建完整的应用程序。它们非常方便地分析应用程序中正在发生的事情，并进一步优化 React 更新的性能。

感谢阅读。如果您觉得这篇文章有帮助，请点击下面的 。请关注我的更多关于 React.js 和 JavaScript 的文章。