React初学者教程

1 React 简介
2 创建第一个 React 应用
3 React 中的组件
4 在 React 中设置样式
5 创建复杂的组件
6 传递属性
7 深入JSX
- 7.1 一、JSX背后发生了什么？
- 7.2 二、要记住的 JSX 怪癖
8 处理状态
9 从数据到 UI
10 React 中的事件
11 组件生命周期
12 用 React Router 创建单页应用
13 用 React 常见一个简单的 Todo List 应用
14 在 React 中访问 DOM 元素
15 设置 React 开发环境

React 简介

老式的多页设计

如果你几年前做过这种应用程序，可能会采用包含多个单页面的方式。

在多页设计方式下，对于大多数改变页面显示的行为，Web 应用会导航到一个完全不同的页面。用户会看到原页面被销毁，然后出来一个新页面，这种用户体验很不尽人意。

新派的单页应用

现代的应用程序趋向于采用一种称为单页应用（SPA）的模式。这种模式下，我们不需要导航到不同的页面，甚至不需要重新加载一个页面。应用的不同视图被加载和卸载到同一页面上。

用来创建真正可组合 UI 的 API

React 鼓励我们将视觉元素分为更小的组件，而不是一整大块。

http://www.w3cplus.com/sites/default/files/blogs/2016/1611/react_components_composable_72.png

完全在 JavaScript 中定义 UI

虽然这听起来有点不可理喻，（我们知道，在　Web 标准年代，崇尚的是结构、表现形式和行为分离，也就是 UI 的结构、表现形式和行为部分分别分离到 HTML、CSS 和 JavaScript 三个文件中。完全在 JavaScript 中定义 UI，岂不是跟 Web 标准背道而驰么？）。但是且听我说完。如果像过去一样采用 HTML 模板的方式定义 UI，除了古怪的语法外，还有另一个主要问题。在模板中，除了只是显示数据，我们被限制做很多事情。例如，如果你想根据特定条件，选择显示哪一块 UI，就不得不在应用中到处写 JavaScript，或者用一些古怪的框架特有的模板语法，才能让它起作用。

而 React 实现的方式就很优雅。UI 完全在 JavaScript 中定义，我们可以利用 JavaScript 提供的强大功能在模板内做各种事情。我们受到的限制只是 JavaScript 支持不支持，而不是模板框架的限制。

创建第一个 React 应用

React 的学习曲线相当陡峭，里面大大小小的障碍不少。

处理 JSX

除了标准的 HTML、CSS 和 JavaScript 外，很多 React 代码都会用 JSX 编写。JSX 是一门可以让我们很容易混合 JavaScript 和类似 HTML 的标记，来定义用户界面元素以及其功能的语言。这听起来很酷，但是问题是：浏览器是不知道如何处理 JSX的。

要用 React 创建 Web 应用，我们需要一种方式采用 JSX，并将它转换为浏览器可以理解的标准 JavaScript，如果不这么做，React 应用就无法运行。目前将 JSX 转换为 JavaScript 有两种解决方案：

围绕 Node 以及一些构建工具（比如 Webpack）来设置开发环境。
让浏览器在运行时自动将 JSX 转换为 JavaScript。

在 React 入门阶段，我们打算用第二种方案。那么为什么我们不一直用第二种方案呢？原因是，浏览器每次要花时间把 JSX 翻译为 JS，这对性能是有影响的。在学习如何使用 React 时，这是完全可以接受的，但是在部署应用程序实际使用时，这肯定是完全不能接受的。所以后面我们会在已经熟悉了 React 后，再用第一解决方案，即设置开发环境。

上手 React

首先，我们需要一个空白 HTML 页面作为起点。

<!DOCTYPE html>
<html>
<head><title>React! React! React!</title>
    <script src="https://unpkg.com/react@15.3.2/dist/react.js"></script>
    <script src="https://unpkg.com/react-dom@15.3.2/dist/react-dom.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23/browser.min.js"></script>
</head>
<body>
<script></script>
</body>
</html>

第一行引入核心 React 库，第二行引入 React DOM 库。如果没有这两个库，我们是没法创建 React 应用的。然后，我们还需要在两个 script 标记下添加对 Babel JavaScript 编译器的引用。

现在如果马上预览页面，我们会注意到页面是空的，什么都看不到。没关系，下面我们就要让它显示点什么。

显示你的姓名

你要做的第一件事情就是在屏幕上显示你的姓名。

ReactDOM.render(
    <h1>Sherlock Holmes</h1>,
    document.body
);

此时，不要担心这几行代码到底是什么意思。我们的目标是先在屏幕上显示点什么，不久之后我们就会搞清楚这几行代码到底在做什么。现在，在预览页面看看发生了什么之前，我们需要给这个 script 块标注一下，这样 babel 才能可以发挥其魔力。实现方法是将 script 标记的 type 属性设置为 text/babel。

之后，我们就可以在浏览器预览了。我们会看到单词 'Sherlock Holmes' 在屏幕上用很大的字符打印出来。恭喜！你刚用 React 创建一个 APP。

改变输出的目标

我们要做的第一件事情是改变 JSX 输出的目标。用 JavaScript 将输出直接放在 body 元素上肯定不是一个好主意。有时候会出错，特别是如果你将 React 与其它 JS 库和框架混合在一起用时。推荐的路径是专门创建一个元素作为新的根元素，让这个新元素作为 render 方法要用的目标。OK，我们回到 HTML，添加一个 id 值为 container 的 div 元素。

var destination = document.querySelector("#container");
ReactDOM.render(
    <h1>Sherlock Holmes</h1>,
    destination
);

完整示例

你的 React 应用的看起来应该是这个样子，最终结果依然 100% 的 HTML、CSS 和 JavaScript：

<!DOCTYPE html>
<html>
<head><title>React! React! React!</title>
    <script src="https://unpkg.com/react@15.3.2/dist/react.js"></script>
    <script src="https://unpkg.com/react-dom@15.3.2/dist/react-dom.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23/browser.min.js"></script>
</head>
<body>
<div id="container"></div>
<script type="text/babel">
    var destination = document.querySelector("#container");
    ReactDOM.render(
            <h1>Sherlock Holmes</h1>,
            destination
    );
</script>
</body>
</html>

我们可以看到，这里连一点 React 类似代码的痕迹都看不到。

React 中的组件

组件是让 React 变得美好的事情之一，它是定义人们在使用应用程序时所看到的视觉和交互的主要方式之一。

JSX 问题：输出多个元素

现在，我们让应用打印出几个超级英雄的姓名：

var destination = document.querySelector("#container");
ReactDOM.render(
        <div>
            <h1>Batman</h1>
            <h1>Iron Man</h1>
            <h1>Nicolas Cage</h1>
            <h1>Mega Man</h1>
        </div>,
        destination
);

这里要呼出一个重要的 JSX 细节。包含 h1 元素的 div 应该去掉，是因为这看起来像个好主意。但是在 JSX 和 JavaScript 之间的邪恶联盟眼里，它是无效的。这貌似是一个可怕的限制，但是应变方式很简单。虽然我们只能输入一个元素，但是一个元素可以有很多子节点。

创建一个 “Hello, World!” 组件

var HelloWorld = React.createClass({
    render: function () {
        return (
                <p>Hello, world!</p>
        );
    }
});
 
ReactDOM.render(
        <div>
            <HelloWorld/>
            <HelloWorld/>
            <HelloWorld/>
            <HelloWorld/>
            <HelloWorld/>
            <HelloWorld/>
        </div>,
        document.querySelector("#container")
);

指定属性

var HelloWorld = React.createClass({
    render: function () {
        return (
                <p>Hello, {this.props.greetTarget}!</p>
        );
    }
});
 
ReactDOM.render(
        <div>
            <HelloWorld greetTarget="Batman"/>
            <HelloWorld greetTarget="Iron Man"/>
            <HelloWorld greetTarget="Nicolas Cage"/>
            <HelloWorld greetTarget="Mega Man"/>
            <HelloWorld greetTarget="Bono"/>
            <HelloWorld greetTarget="Catwoman"/>
        </div>,
        document.querySelector("#container")
);

处理子元素

var button = document.querySelector("#button");
 
var Buttonify = React.createClass({
    render: function () {
        return (
                <div>
                    <button type={this.props.behavior}>{this.props.children}</button>
                </div>
        );
    }
});
 
ReactDOM.render(
        <div>
            <Buttonify behavior="Submit">SEND DATA</Buttonify>
        </div>,
        button
);

总结

如果你想用 React 创建应用，如果不用组件你不会走的太远。不用组件来创建 React 应用，就像不用函数来创建基于 JavaScript 的应用程序一样。

在 React 中设置样式

如何格式化 HTML 元素？样式应该放在哪里？你可能猜到我们会在哪里处理这点。如果把样式放在另一个地方，我们就没法有一个自包含的 UI 块。这就是为什么 React 鼓励我们把样式与 HTML 和 JavaScript 放在一起的原因。在本教程中，我们将学习这种神秘的，可能是骇人听闻的格式化内容的方法。

var destination = document.querySelector("#container");
 
var Letter = React.createClass({
    render: function () {
        var letterStyle = {
            padding: 10,
            margin: 10,
            backgroundColor: this.props.bgcolor,
            color: "#333",
            display: "inline-block",
            fontFamily: "monospace",
            fontSize: "32",
            textAlign: "center"
        };
 
        return (
                <div style={letterStyle}>
                    {this.props.children}
                </div>
        );
    }
});
 
ReactDOM.render(
        <div>
            <Letter bgcolor="#58B3FF">A</Letter>
            <Letter bgcolor="#FF605F">E</Letter>
            <Letter bgcolor="#FFD52E">I</Letter>
            <Letter bgcolor="#49DD8E">O</Letter>
            <Letter bgcolor="#AE99FF">U</Letter>
        </div>,
        destination
);

我们刚才所做的，是用普通 CSS 很难实现的。后面我们在学习那些内容会根据状态或者用户交互而改变的组件时，我们会看到更多的这样用 React 方式格式化内容的示例有更多好的优点。

创建复杂的组件

从界面到组件

迄今为止我们所看到的几个例子是很基础的。对于突出技术概念来说，这几个例子还不错，但是对于要为真实世界做准备来说，它们就一般般了。

在真实世界中，你要用 React 实现的肯定不会是像一个姓名列表，一个彩色元音字母块这么简单了。我们面对的往往是一些复杂用户界面的视觉。

现在，我们要做一个简单的调色板卡。

1. 识别主要的视觉元素

第一个步骤是识别我们要处理的所有视觉元素。即使是最小的视觉元素也不能省略。

2. 识别组件

我们需要搞清楚我们识别出来的视觉元素中哪些需要变成组件，哪些不需要。通用的规则是我们的组件应该只做一件事情。如果你发现你可能的组件将会做太多事情，可能就要将组件拆分成多个组件。另一方面，如果潜在的组件做的事情太少，可能就要完全略过让这个视觉元素成为一个组件。

创建组件

我们就要开始定义我们的三个组件了。这三个组件的名字将是 Card、Label 和 Square。

var destination = document.querySelector("#container");
 
var Card = React.createClass({
    render: function () {
        var cardStyle = {
            height: 200,
            width: 150,
            padding: 0,
            backgroundColor: "#FFF",
            WebkitFilter: "drop-shadow(0px 0px 5px #666)",
            filter: "drop-shadow(0px 0px 5px #666)"
        };
 
        return (
                <div style={cardStyle}>
                    <Square/>
                    <Label/>
                </div>
        );
    }
});
 
var Square = React.createClass({
    render: function () {
        var squareStyle = {
            height: 150,
            backgroundColor: "#FF6663"
        };
 
        return (
                <div style={squareStyle}>
 
                </div>
        );
    }
});
 
var Label = React.createClass({
    render: function () {
        var labelStyle = {
            fontFamily: "sans-serif",
            fontWeight: "bold",
            padding: 13,
            margin: 0
        };
 
        return (
                <p style={labelStyle}>#FF6663</p>
        );
    }
});
 
ReactDOM.render(
        <div>
            <Card/>
        </div>,
        destination
);

再次传递属性！

在当前示例中，我们把 Squar 和 Label 组件用的颜色值硬编码了。这是件奇怪的事情，可能会也可能不会故意地这样做以得到戏剧性的效果，但是修复它是很简单的。只需要指定一个属性名，并且通过this.props 方法该属性名就可以了。我们在前面已经这样做过了。不同的是这次我们将不得不多次这样做。

var destination = document.querySelector("#container");
 
var Card = React.createClass({
    render: function () {
        var cardStyle = {
            height: 200,
            width: 150,
            padding: 0,
            backgroundColor: "#FFF",
            WebkitFilter: "drop-shadow(0px 0px 5px #666)",
            filter: "drop-shadow(0px 0px 5px #666)"
        };
 
        return (
                <div style={cardStyle}>
                    <Square color={this.props.color}/>
                    <Label color={this.props.color}/>
                </div>
        );
    }
});
 
var Square = React.createClass({
    render: function () {
        var squareStyle = {
            height: 150,
            backgroundColor: this.props.color
        };
 
        return (
                <div style={squareStyle}>
 
                </div>
        );
    }
});
 
var Label = React.createClass({
    render: function () {
        var labelStyle = {
            fontFamily: "sans-serif",
            fontWeight: "bold",
            padding: 13,
            margin: 0
        };
 
        return (
                <p style={labelStyle}>{this.props.color}</p>
        );
    }
});
 
ReactDOM.render(
        <div>
            <Card color="#FFA737"/>
        </div>,
        destination
);

尽管 color 属性只被 Square 和 Label 组件所用，但是父组件 Card 负责传递该属性给它们。对于更深层次的嵌套，你会需要更多的中间组件负责传递属性。这就变得更糟糕。当你有多个属性想沿着多级组件传递时，你所做的打字（或者复制/粘贴）数量也会增加很多。有方法可以缓解，我们会在后面的教程中更详细地了解这些缓解措施。

传递属性

处理属性有令人沮丧的一面，在前一个教程中我们已经看到了一点。在只处理一层组件时，将属性从一个组件传递到另一个很简单。但是如果你想将一个属性在多层组件之间传递，事情就开始变得复杂了。

事情变得复杂从来不是一件好事情，所以在本教程中，我们来看看我们怎么做才能让在多层组件之间传递属性变得容易。

问题概述

React 强制一个命令链，在链中，属性必须从父组件向下流动到直接的子组件。也就是说，在传递一个属性时，你不能跳过子层。这还意味着你的子组件不能把一个属性传回到父组件。所有的通讯是从父到子单向的。

如果我们想发送三个属性又该怎么办？或者四个呢？

我们很快会看到这种方法既没有可扩展性，也没有可维护性。对于需要通讯的每个附加的属性，我们将不得不为它添加一个入口作为每个组件声明的一部分。如果在某个时间我们决定重新命名属性，就不得不确保该属性的每个实例也被重新命名。如果删除一个属性，我们需要从依赖该属性的每个组件中删除该属性。总的来说，这是我们在编写代码时，应该努力避免的一种情况。那么我们可以怎么做呢？

遇见扩展运算符

所有这些问题的解决方案在于一个 JavaScript 新概念：扩展运算符（Spread Operator）。如果没有上下文，要解释扩展运算符有点难度，所以这里我们先看一个示例，然后再看扩展运算符的定义。

printStuff(...items);

扩展运算符是在 items 数组前的 '…' 字符，使用 '…items' 等于分别调用 items[0], item[1], item[2]。

正确传递属性

var destination = document.querySelector("#container");
 
var Display = React.createClass({
    render: function () {
        return (
                <div>
                    <p>{this.props.color}</p>
                    <p>{this.props.num}</p>
                    <p>{this.props.size}</p>
                </div>
        );
    }
});
 
var Label = React.createClass({
    render: function () {
        return (
                <Display {...this.props}/>
        );
    }
});
 
var Shirt = React.createClass({
    render: function () {
        return (
                <div>
                    <Label {...this.props}/>
                </div>
        );
    }
});
 
ReactDOM.render(
        <div>
            <Shirt color="steelblue" num="3.145" size="medium"/>
        </div>,
        destination
);

总结

ES6/ES2015 委员会设计扩展运算符时，只设计把它用在数组上。它能在对象字面量（例如我们的 props 对象）上使用，归功于 React 扩展了标准。到目前为止，还没有浏览器支持在对象字面量上使用扩展运算符。我们的示例能够运行是因为有 Babel。除了将所有 JSX 转变为浏览器能理解的语言外， Babel 还会将前沿以及实验功能转变成跨浏览器友好的东西。

深入JSX

一、JSX背后发生了什么？

return React.createElement(
    "div",
    {style: cardStyle},
    React.createElement(Square, {color: this.props.color}),
    React.createElement(Label, {color: this.props.color})
);

由Babel完全在浏览器中执行 JSX => JS 的转换，被转变成JavaScript。

二、要记住的 JSX 怪癖

1. 只能返回一个根节点

如果是有多个根元素，就会破坏函数返回值以及 createElement的机制。

2. 不能指定 inline CSS

3. 保留关键字和 className

ReactDOM.render(
    <div className="slideIn">
        <p className="emphasis">Gabagool!</p>
        <Label/>
    </div>,
    document.querySelector("#container")
);

4. 注释

如果你指定一个注释作为一个标记的子节点，那么你必须用 {和 } 把注释包起来，以确保它被解析为一个表达式：

ReactDOM.render(
  <div class="slideIn">
    <p class="emphasis">Gabagool!</p>
    {/* I am a child comment */}
    <Label/>
  </div>,
  document.querySelector("#container")
);

如果完全在一个标记内部指定注释，那么就不需要用大括号把单行或者多行注释括起来：

ReactDOM.render(
  <div class="slideIn">
    <p class="emphasis">Gabagool!</p>
    <Label
      /* This comment
         goes across
         multiple lines */
         className="colorCard" // end of line
    />
  </div>,
  document.querySelector("#container")
);

5. 大小写、HTML 元素和组件

大小写很重要。如果大小写出错，React 将不会正确渲染内容。

要表示 HTML 元素，必须确保 HTML 标记是小写字母。当表示组件时，组件的名称必须是大写。

6. JSX 可以出现在任何地方

在很多情况下，JSX 并不是像我们前面看到的示例一样，整齐地排列在一个 render 或者 return 函数内。看看如下示例：

var swatchComponent = <Swatch color="#2F004F"></Swatch>;
 
ReactDOM.render(
  <div>
    {swatchComponent}
  </div>,
  document.querySelector("#container")
);

我们有一个 swatchComponent 变量，该变量被初始化为一行 JSX。当 swatchComponent 变量放在 render 函数内时，Swatch 组件就被初始化。这一切都是有效的，并且在将来当我们学习如何用 JavaScript 生成和操作 JSX 时，我们将会做更多这种事情。

处理状态

到目前为止，我们已经创建的组件都是无状态的（stateless）。它们有从它们的父组件传递进来的属性（亦称 props），一旦属性被设置了，就被当作是不可修变的（immutable）。对于很多交互场景来说，你肯定不想这样子。在一些用户交互发生，或者一些数据从服务器或者其它地方返回过来时，你想能改变组件的外观。

我们所要的是另一种超越属性的在组件上存储数据的方式，即存储可以修改的数据。我们所需要的是称为状态（state）的东西。

我们要创建一个简单的雷击计数示例：

https://www.w3cplus.com/sites/default/files/blogs/2016/1611/lightningCounter_144.png

var LightningCounter = React.createClass({
    getInitialState: function () {
        return {strikes: 0};
    },
    render: function () {
        return (
                <h1>{this.state.strikes}</h1>
        );
    }
});
 
var LightningCounterDisplay = React.createClass({
    render: function () {
        var divStyle = {
            width: 250,
            textAlign: "center",
            backgroundColor: "black",
            padding: 40,
            fontFamily: "sans-serif",
            color: "#999",
            borderRadius: 10
        };
        return (
                <div style={divStyle}>
                    <LightningCounter/>
                </div>
        );
    }
});
 
ReactDOM.render(
        <LightningCounterDisplay/>,
        document.querySelector("#container")
);

让计数器跑起来

现在我们已经完成了基础代码，我们可以开始规划下一步了。 counter 工作的方式很简单。我们打算用 setInterval 函数每 1000ms（即 1s）调用一段代码。这段代码每被调用一次，就让一个值增 100。看起来很简单，对吧？

要让这些都可以工作起来，我们打算依赖于 React 组件暴露的三个 API：

componentDidMount：该方法在组件渲染后被调用(or mounted as React calls it).。
getInitialState：该方法在组件挂载之前运行，并允许你修改组件的 state 对象。
setState：该方法允许你修改 state 对象的值。

设置初始状态值

我们要做的是在 getInitialState 方法内初始化 strikes 。

启动定时器并设置状态

下一步是让定时器运行起来，增加 strikes 属性。像我们前面提到的一样，我们将用 setInterval 函数每秒钟增加 strikes 属性 100。我们打算在组件被渲染后用内置的 componentDidMount 方法立即做所有这事。

启动定时器的代码如下：

var LightningCounter = React.createClass({
  getInitialState: function() {
    return {
      strikes: 0
    };
  },
  timerTick: function () {
    this.setState({strikes: this.state.strikes + 100});
  },
  componentDidMount: function() {
    setInterval(this.timerTick, 1000);
  },
  render: function() {
    return (
      <h1>{this.state.strikes}</h1>
    );
  }
});

一旦组件被渲染了，componentDidMount 方法就被调用，在该方法内，setInterval 方法每 1000ms调用 timerTick 函数一次。

渲染状态改变

如果在浏览器中预览，你会看到 strikes 值每秒钟增100。这种更新是因为 React 的机制：只要你调用 setState 并更新了 state 对象中一些东西，那么组件的 render 方法就会自动被调用。

完整的代码

var LightningCounter = React.createClass({
    getInitialState: function () {
        return {
            strikes: 0
        };
    },
    timerTick: function () {
        this.setState({
            strikes: this.state.strikes + 100
        });
    },
    componentDidMount: function () {
        setInterval(this.timerTick, 1000);
    },
    render: function () {
        var counterStyle = {
            color: "#66FFFF",
            fontSize: 50
        };
 
        var count = this.state.strikes.toLocaleString();
 
        return (
                <h1 style={counterStyle}>{count}</h1>
        );
    }
});
 
var LightningCounterDisplay = React.createClass({
    render: function () {
        var commonStyle = {
            margin: 0,
            padding: 0
        };
 
        var divStyle = {
            width: 250,
            textAlign: "center",
            backgroundColor: "#020202",
            padding: 40,
            fontFamily: "sans-serif",
            color: "#999999",
            borderRadius: 10
        };
 
        var textStyles = {
            emphasis: {
                fontSize: 38,
                ...commonStyle
            },
            smallEmphasis: {
                ...commonStyle
            },
            small: {
                fontSize: 17,
                opacity: 0.5,
                ...commonStyle
            }
        };
 
        return (
                <div style={divStyle}>
                    <LightningCounter/>
                    <h2 style={textStyles.smallEmphasis}>LIGHTNING STRIKES</h2>
                    <h2 style={textStyles.emphasis}>WORLDWIDE</h2>
                    <p style={textStyles.small}>(since you loaded this example)</p>
                </div>
        );
    }
});
 
ReactDOM.render(
        <LightningCounterDisplay/>,
        document.querySelector("#container")
);

总结

我们只是肤浅地研究了如何创建有状态的组件。虽然用定时器来更新 state 对象很酷，但是实际行为是在我们开始将用户交互与状态组合时才发生的。迄今为止，我们回避了大量的鼠标、触摸、键盘以及组件将会接触到的其它相关事情。在下一个教程中，我们将解决这个问题。沿着这条路，你会看到我们把我们已经看到的有关状态的技术带到一个全新的层次！如果这还不能让你激动，那么我不知道什么可以 :p

从数据到 UI

示例

var Circle = React.createClass({
    render: function () {
        var circleStyle = {
            padding: 10,
            margin: 20,
            display: "inline-block",
            backgroundColor: this.props.bgColor,
            borderRadius: "50%",
            width: 100,
            height: 100,
        };
        return ( <div style={circleStyle}></div> );
    }
});
 
var destination = document.querySelector("#container");
 
ReactDOM.render(
        <div>
            <Circle bgcolor="#F9C240"/>
        </div>,
        destination
);

https://www.w3cplus.com/sites/default/files/blogs/2016/1611/one_yellow_circle.png

JSX 可以在任何地方

function showCircle() {
    var colors = ["#393E41", "#E94F37", "#1C89BF", "#A1D363"];
    var ran = Math.floor(Math.random() * colors.length);
 
    return <Circle bgColor={colors[ran]}/>;
}
 
ReactDOM.render(
        <div>
            {showCircle()}
        </div>,
        destination
);

处理数组

var colors = ["#393E41", "#E94F37", "#1C89BF", "#A1D363", "#85FFC7", "#297373", "#FF8552", "#A40E4C"];
var renderData = [];
 
for (var i = 0; i < colors.length; i++) {
    renderData.push(<Circle bgColor={colors[i]}/>);
}
 
ReactDOM.render(
        <div>
            {renderData}
        </div>,
        destination
);

总结

在本文中你所看到的所有诀窍都可能是由一个东西造成：JSX 就是 Javascript。这就是为什么 JavaScript 出现的地方都可以用 JSX 的原因。对于我们来说，下面这样的代码看起来是相当怪异的：

for (var i = 0; i < colors.length; i++) {
  var color = colors[i];
  renderData.push(<Circle key={i + color} bgColor={color}/>);
}

尽管我们把一些 JSX 判断压到一个数组中，像变戏法一样，当 renderData 在 render 方法内被求值时，所有代码都能正常运行。我讨厌听起来像坏唱片一样，但是这是因为我们的浏览器最终看起来像这样子：

for (var i = 0; i < colors.length; i++) {
  var color = colors[i];
 
  renderData.push(React.createElement(Circle, 
    { 
      key: i + color,
      bgColor: color 
    }));
}

当 JSX 被转换为纯 JS 时，一切又变得有意义。这就是为什么我们可以将 JSX 和数据一起放在各种不舒服的条件下，但是依然可以得到我们想要的最终结果的原因。因为，最终，都是 JavaScript。

React 中的事件

迄今为止，我们所有的示例都是只在页面加载时执行。你可能会猜到，这是不正常的。在很多应用中，特别是重 UI 类型的应用中，应用程序要做的很多事情只是对某种事情的响应。这里，某种事情可能是被鼠标点击、按键、窗口缩放、或者其它手势操作以及交互。而让所有这一切变得可能的粘合剂是事件。

React 处理事件的方式有点不同，如果没有密切关注的话，这些不同之处会以不同的方式让你吃惊。

监听和响应事件

学习 React 事件最简单的方式就是用它。这里我们先做一个简单的示例，每次点击按钮后，计数器增一：

https://www.w3cplus.com/sites/default/files/blogs/2016/1611/event_ex_final.png

每次点击 + 按钮，计数器就增加 1。点击几次按钮后，就是这样子的。

起点

var destination = document.querySelector("#container"); var Counter = React.createClass({
    render: function () {
        var textStyle = {
            fontSize: 72,
            fontFamily: "sans-serif",
            color: "#333",
            fontWeight: "bold"
        };
 
        return (
                <div style={textStyle}> {this.props.display} </div>
        );
    }
});
 
var CounterParent = React.createClass({
    getInitialState: function () {
        return {
            count: 0
        };
    },
    render: function () {
        var backgroundStyle = {
            padding: 50,
            backgroundColor: "#FFC53A",
            width: 250,
            height: 100,
            borderRadius: 10,
            textAlign: "center"
        };
 
        var buttonStyle = {
            fontSize: "1em",
            width: 30,
            height: 30,
            fontFamily: "sans-serif",
            color: "#333",
            fontWeight: "bold",
            lineHeight: "3px"
        };
 
        return (
                <div style={backgroundStyle}>
                    <Counter display={this.state.count}/>
                    <button style={buttonStyle}>+</button>
                </div>
        );
    }
});
 
ReactDOM.render(
        <div><CounterParent/></div>,
        destination
);

完成这段代码后，在浏览器中预览一下，看看代码是否正确。然后，花几分钟看看这些代码是干嘛的。这些代码都是我们前面学习过的，所有代码看起来都不应该是陌生的。当然，唯一古怪的事情是点击按钮什么都不会发生，下面我们马上来解决这个问题。

让按钮点击做点事情

每次点击加号按钮，我们想让计数器的值增一。我们要做的事情大致是这样的：

监听按钮上的点击事件。
当点击事件被监听到时，指定处理该事件的事件处理器。
实现事件处理器，增加 this.state.count 属性的值。

increase: function (e) {
    this.setState({
        count: this.state.count + 1
    });
},
render: function () {
    ...
 
    return (
            <div style={backgroundStyle}>
                <Counter display={this.state.count}/>
                <button onClick={this.increase} style={buttonStyle}>+</button>
            </div>
    );
}

合成事件

在 React 中，如果像在 onClick 中所做的那样在 JSX 中指定事件时，是不能直接处理常规的 DOM 事件的，而是处理 React 特定的事件类型 SyntheticEvent。你的事件处理器不能得到原生的事件参数类型 MouseEvent、KeyboardEvent 等等，而是总是得到封装了浏览器的原生事件的事件参数类型 SyntheticEvent。那么这对我们代码有什么影响呢？令人吃惊的是完全没有影响。

当使用合成事件及其属性时，不要参考传统 DOM 事件文档。因为 SyntheticEvent 包含了原生 DOM 事件，事件及其属性并不一定是一对一映射的。有些 DOM 事件在 React 甚至是不存在的。要避免遇到任何问题，如果你想知道一个合成事件或者任何其属性，应该参考 React 事件系统文档。https://reactjs.org/docs/events.html

用事件属性干活

现在，你可能已经看到比你可能喜欢的更多的有关 DOM 和合成事件。我们开始写一些代码，将新发现的知识放在一起很好的使用。现在，我们的计数器通过每次点击加号按钮加一。我们想做的是当用鼠标点击加号按钮同时按着 Shift 键，让计数器加十。

我们打算在用鼠标时，用 SyntheticEvent 的 shiftKey 属性完成这件事情。

increase: function (e) {
    var currentCount = this.state.count;
 
    if (e.shiftKey) {
        currentCount += 10;
    } else {
        currentCount += 1;
    }
 
    this.setState({
        count: currentCount
    });
},

不能直接在组件上监听事件

原因是，组件是 DOM 元素的包装器。要监听一个组件上的事件到底是什么意思？一旦组件被展开到 DOM 元素中，你要监听的事件是放到外层 HTML 元素上吗？它是一些其它元素吗？在监听一个事件与声明你要监听的一个 prop 之间你如何区分？

这些问题都没有清晰的答案。过份点说，解决方案是要么就不监听组件上的事件。幸运的是，有一个变通方案，就是将事件处理器当作是一个 prop，并将它传递给组件。然后在组件内，我们可以把事件赋值给一个 DOM 元素，并将事件处理器设置为我们刚传进来的 prop 的值。我们来看一个示例。

var CounterParent = React.createClass({
    .
    .
    .
  render: function() {
    return (
      <div>
        <Counter display={this.state.count}/>
        <PlusButton clickHandler={this.increase}/>
      </div>
    );
  }
});

在本例中，我们创建一个属性 clickHandler，该属性的值是 increase 事件处理器。然后，在 PlusButton 组件内，我们可以像这样做：

var PlusButton = React.createClass({
  render: function() {
      return (
        <button onClick={this.props.clickHandler}>
          +
        </button>
      );
    }
});

在 button 元素上，我们指定了 onClick 事件，并将它的值设置为 clickHandler prop。在运行时，这个 prop 被求值为 increase 函数，并且点击加号按钮确保 increase 函数被调用。这就解决了我们的问题，同时还让组件全程参与了。

事件处理器中 this 的含义

通常来说，事件处理器中 this 的值引用的是触发该事件的元素。而在 React 世界中，事件处理器中的 this 引用的总是事件处理器所处的组件。

React...为什么？为什么？！

就今天就到这儿之前，我们来谈谈为什么 React 决定背离我们过去处理事件的方式。有两个原因：

1. 浏览器兼容性

事件处理在现代浏览器中是可以一致工作的事情之一，但是如果回到旧的浏览器版本，事情就会马上变得很糟糕。通过将所有本地事件封装为一个 SyntheticEvent 类型的对象，React 让我们从处理最终不得不处理的事件处理怪癖中解脱出来。

2. 提升性能

在复杂的 UI 中，事件处理器越多，应用程序占用的内存就越多。虽然手动处理这并不难，但是这有点枯燥，因为你得设法将事件组织到一个共同的父之下。有时，这是不可能的。有时，麻烦超过了好处。而 React 就做的很聪明。

React 从不会将事件处理器直接绑定到 DOM 元素。它在文档的根部使用一个事件处理器，来负责监听所有事件，并按需调用合适的事件处理器。

组件生命周期

为帮助做这些事情，React 给我们提供了一些生命周期方法。生命周期方法是组件正常运转时自动调用的特殊方法。它们告知我们组件生命中重要的里程碑，我们可以用这些通知来只是注意，或者改变组件要做的事情。

初识生命周期方法

生命周期方法不是很复杂。我们可以把它们当作是在组件生命中的不同的点被调用的美化的事件处理器，并且就像事件处理器一样，我们可以在这些不同的点编写代码做一些事情。在深入之前，我们先来快速了解一下生命周期方法。

componentWillMount
componentDidMount
componentWillUnmount
componentWillUpdate
componentDidUpdate
shouldComponentUpdate
componentWillReceiveProps

还有三个方法严格上讲并非生命周期方法，但是我们仍要把它们跟生命周期方法混在一起。

getInitialState
getDefaultProps
render

这些方法中，有些名称可能看起来是熟悉，有些可能是第一次看到。不要着急。在本教程结束后，你对所有这些方法都很熟悉。我们打算要做的是从不同角度看看这些生命周期方法。我们还是以代码开始！

看看生命周期方法起作用

var destination = document.querySelector("#container");
 
var Counter = React.createClass({
    render: function () {
        var textStyle = {
            fontSize: 72,
            fontFamily: "sans-serif",
            color: "#333",
            fontWeight: "bold"
        };
 
        return (
                <div style={textStyle}> {this.props.display} </div>
        );
    }
});
 
var CounterParent = React.createClass({
    getDefaultProps: function () {
        console.log("getDefaultProps: Default prop time!");
        return {};
    },
    getInitialState: function () {
        console.log("getInitialState: Default state time!");
        return {count: 0};
    },
    increase: function () {
        this.setState({count: this.state.count + 1});
    },
    componentWillUpdate: function (newProps, newState) {
        console.log("componentWillUpdate: Component is about to update!");
    },
    componentDidUpdate: function (currentProps, currentState) {
        console.log("componentDidUpdate: Component just updated!");
    },
    componentWillMount: function () {
        console.log("componentWillMount: Component is about to mount!");
    },
    componentDidMount: function () {
        console.log("componentDidMount: Component just mounted!");
    },
    componentWillUnmount: function () {
        console.log("componentWillUnmount: Component is about to be removed from the DOM!");
    },
    shouldComponentUpdate: function (newProps, newState) {
        console.log("shouldComponentUpdate: Should component update?");
        if (newState.count < 5) {
            console.log("shouldComponentUpdate: Component should update!");
            return true;
        } else {
            ReactDOM.unmountComponentAtNode(destination);
            console.log("shouldComponentUpdate: Component should not update!");
            return false;
        }
    },
    componentWillReceiveProps: function (newProps) {
        console.log("componentWillReceiveProps: Component will get new props!");
    },
    render: function () {
        var backgroundStyle = {
            padding: 50, border: "#333 2px dotted", width: 250, height: 100, borderRadius: 10, textAlign: "center"
        };
 
        return (
                <div style={backgroundStyle}>
                    <Counter display={this.state.count}/>
                    <button onClick={this.increase}> +</button>
                </div>
        );
    }
});
 
ReactDOM.render(
        <div><CounterParent/></div>,
        destination
);

初始渲染阶段

https://www.w3cplus.com/sites/default/files/blogs/2016/1611/render_144.png

除了 render 方法外，所有这些生命周期方法只能触发一次。这与我们下面要看到的方法有很大不同。

更新阶段

https://www.w3cplus.com/sites/default/files/blogs/2016/1611/statechange_144.png

shouldComponentUpdate 有时，当一个状态发生改变时，你不想让组件更新。这个方法可以让我们控制更新行为。如果你使用该方法，并返回一个 true 值，组件就会被更新。如果返回一个 false 值，该组件就不会更新。

如下是一个简单的示例：

shouldComponentUpdate: function(newProps, newState) {
  if (newState.id <= 2) {
    console.log("Component should update!");
    return true;
  } else {
    console.log("Component should not update!");
    return false;
  }
}

该方法带有两个参数：newProps 和 newState。

处理 prop 改变

https://www.w3cplus.com/sites/default/files/blogs/2016/1611/propschange_144.png

这里唯一的新方法是 componentWillReceiveProps。该方法只返回一个参数，并且该参数包含将要赋值的新 prop 值。

剩下的生命周期方法我们在前面查看状态改变时已经看过了，所以这里就不在重复了。在处理 prop 修改时，它们的行为是一致的。

卸载阶段

https://www.w3cplus.com/sites/default/files/blogs/2016/1611/unmount_144.png

这里唯一的生命周期方法是 componentWillUnmount。我们可以在这个方法中执行清理相关的任务，比如移除事件监听器、停止计数器等等。在该方法被调用后，组件就从 DOM 中移除，你可以对它说拜拜了。

总结

React 不断地在每次有兴趣的事情发生时候监视和通知组件。这都是通过生命周期方法实现的。现在，我想安慰你的是，知道每个生命周期方法做什么以及什么时候它被调用，是总有一天会派上用场的。你所学的一切并非仅是繁琐的知识，如果你能凭记忆描述所有生命周期方法，你的朋友们会被打动的。

用 React Router 创建单页应用

这是一个简单的 React 应用，该应用用 React Router 来提供所有的导航和视图加载。点击不同的链接，可以加载相关的内容，随便在浏览器窗口中打开这个页面，用后退和前进按钮来看看。

https://www.w3cplus.com/sites/default/files/blogs/2016/1611/router_highlight_link.png

创建应用

<!DOCTYPE html>
<html>
<head><title>router</title>
    <script src="https://unpkg.com/react@15.3.2/dist/react.js"></script>
    <script src="https://unpkg.com/react-dom@15.3.2/dist/react-dom.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23/browser.min.js"></script>
</head>
 
<style>
 
</style>
 
<body>
 
<div id="container"></div>
 
<script type="text/babel">
    var destination = document.querySelector("#container");
 
    ReactDOM.render(
            <div> Hello! </div>,
            destination
    );
</script>
 
</body>
</html>

因为 React Router 不是 React 本身的一部分，我们需要添加对它的引用。在标记中，找到已有的 script 引用，添加最后一行:

<script src="https://fb.me/react-15.0.0-rc.2.js"></script>
<script src="https://fb.me/react-dom-15.0.0-rc.2.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23/browser.min.js"></script>
<script src="https://npmcdn.com/react-router@2.4.0/umd/ReactRouter.min.js"></script>

通过添加最后一行，就能让 React Router 库与核心 React、ReactDOM 以及 Babel 库一起被加载。此时，我们就准备好爱是创建应用，并利用 React Router 带来的甜蜜功能了。

显示初始帧

当创建单页应用时，总会有一部分页面是保持静态的。这个静态的部分，也称为应用帧（APP frame），可以只是一个不可见的 HTML 元素，用来充当所有内容的容器；也可以包含其它视觉元素，比如标题、脚注、导航等等。在我们的案例中，应用帧将包含导航标题、以及一个要加载内容的空白区域。要显示它们显示出来，需要创建一个组件来负责此事。

避免 ReactRouter 前缀

在返回到正常编程进度之前，我们还有一件善后任务。你是否注意到，每一次我们调用由 React Router API 定义的事情时，都要用单词 ReactRouter 作为这件事情的前缀？

<ReactRouter.Router>
  <ReactRouter.Route path="/" component={App}>
 
  </ReactRouter.Route>
</ReactRouter.Router>

每次调用每个API 都要重复带上 ReactRouter 前缀，显然有点冗长。解决方法是用 ES6 新技巧手动指定哪些值可以自动获得前缀。在 <script> 标记的顶部，添加如下代码：

var { Router,
      Route,
      IndexRoute,
      IndexLink,
      Link } = ReactRouter;

添加了这段代码后，每次我们使用在大括号中定义的值时，在应用运行时前缀 ReactRouter 会自动添加。这意味着我们现在可以回到 ReactDOM.render 方法中，删掉 Router 和 Route 对象前的 ReactRouter 前缀：

ReactDOM.render(
  <Router>
    <Route path="/" component={App}>
 
    </Route>
  </Router>,
  destination
);

如果在浏览器中预览，最终结果前面的一样。唯一的不同之处是标记更为简洁点。

创建导航链接

var App = React.createClass({
  render: function() {
    return (
      <div>
        <h1>Simple SPA</h1>
        <ul className="header">
          <li><Link to="/">Home</Link></li>
          <li><Link to="/stuff">Stuff</Link></li>
          <li><Link to="/contact">Contact</Link></li>
        </ul>
        <div className="content">
          {this.props.children}
        </div>
      </div>
    )
  }
});

如果在预览一下应用，并点击链接（现在是可见的，因为它们的 CSS 开始生效了)，你不会看到任何新的显示。你只会看到 Home 的内容，是因为我们前面就是这么指定的。你还可以在地址栏上看到 URL 的更新。你会看到当前页面后面跟了一个 #/contact、#/stuff、或者 #/ 。这是进步！

添加 Stuff 和 Contact 视图

我们的应用慢慢有点像最终的样子了。下一步我们要做的是定义 Stuff 和 Contact 视图相关的组件。在 Home 组件下，添加如下代码：

var Contact = React.createClass({
  render: function() {
      return (
        <div>
          <h2>GOT QUESTIONS?</h2>
          <p>The easiest thing to do is post on
          our <a href="http://forum.kirupa.com">forums</a>.
          </p>
        </div>
      );
    }
});
 
var Stuff = React.createClass({
  render: function() {
      return (
        <div>
          <h2>STUFF</h2>
          <p>Mauris sem velit, vehicula eget sodales vitae,
          rhoncus eget sapien:</p>
          <ol>
            <li>Nulla pulvinar diam</li>
            <li>Facilisis bibendum</li>
            <li>Vestibulum vulputate</li>
            <li>Eget erat</li>
            <li>Id porttitor</li>
          </ol>
        </div>
      );
    }
});

上面代码我们只添加了 Stuff 和 Contact 组件，这两个组件目前只渲染出 HTML。剩下我们要做的是更新路由配置，来包含这两个组件，并在恰当的 URL 上显示它们。

在 ReactDOM.render 方法中，添加如下高亮度代码：

ReactDOM.render(
  <Router>
    <Route path="/" component={App}>
      <IndexRoute component={Home}/>
      <Route path="stuff" component={Stuff} />
      <Route path="contact" component={Contact} />
    </Route>
  </Router>,
  destination
);

关于路由匹配

看看如下的配置：

ReactDOM.render(
  <Router>
    <Route path="/" component={App}>
      <IndexRoute component={Home} />
      <Route path="stuff" component={Stuff}>
        <Route path="blah" component={MyBlah}/>
      </Route>
      <Route path="contact" component={Contact} />
    </Route>
  </Router>,
  destination
);

创建活动链接

我们要处理的最后一件事情是增加应用程序的可用性。根据当前显示的页面，用蓝色背景让活动链接高亮度显示。

在 React Router 中完成这件事情的方式是，在 Link 实例上设置一个 activeClassName 的属性，该属性的值是在该链接当前被激活时被设置的 CSS 类。

var App = React.createClass({
  render: function() {
    return (
      <div>
        <h1>Simple SPA</h1>
        <ul className="header">
          <li><Link to="/" activeClassName="active">Home</Link></li>
          <li><Link to="/stuff" activeClassName="active">Stuff</Link></li>
          <li><Link to="/contact" activeClassName="active">Contact</Link></li>
        </ul>
        <div className="content">
          {this.props.children}
        </div>
      </div>
    )
  }
});

我们指定 activeClassName 属性，并设置它为 active。这确保在链接被点击后（以及它的路径开始成为活动的），link 元素的 class 属性值在运行时被设置为 active。结果是如下样式规则被应用：

.active {
  background-color: #0099FF;
}

如果现在预览应用，点击任意链接。会发现活动链接显示的是蓝色背景。不过，我们还没完成呢。我们的 Home 链接一直是高亮度显示的，它应该是只有在我们加载主页或者显式导航到 Home 链接本身时才高亮度显示。要修正这个问题，需要修改链接到 Home 内容的方式。我们打算用 IndexLInk 元素替换 Link 元素，来指定 Home 的内容。

var App = React.createClass({
  render: function() {
    return (
      <div>
        <h1>Simple SPA</h1>
        <ul className="header">
          <li><IndexLink to="/" activeClassName="active">Home</IndexLink></li>
          <li><Link to="/stuff" activeClassName="active">Stuff</Link></li>
          <li><Link to="/contact" activeClassName="active">Contact</Link></li>
        </ul>
        <div className="content">
          {this.props.children}
        </div>
      </div>
    )
  }
});

一旦 Home 导航元素被 IndexLink 表示，而不是 Link，就再预览一下我们的应用。这次，当应用加载时，你会注意到你的 Home 链接默认是很酷的蓝色背景。当导航到 Stuff 或者 Contact 页面时，Home 链接不再是高亮度。有了这个，你的应用就算准备好了！

用 React 常见一个简单的 Todo List 应用

https://www.w3cplus.com/sites/default/files/blogs/2016/1611/example_todo_list_app.png

开始

<!DOCTYPE html> <html> <head><title>todo list</title>

   <script src="https://unpkg.com/react@15.3.2/dist/react.js"></script>
   <script src="https://unpkg.com/react-dom@15.3.2/dist/react-dom.js"></script>
   <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23/browser.min.js"></script>

</head>

<style>

</style>

<body>

   var destination = document.querySelector("#container");

   ReactDOM.render(

               Hello world!

,

           destination
   );

</script>

</body> </html>

创建 UI

创建功能

Todo List 应用功能的实际实现并不难。我们先对它如何工作做个概述。最重要的数据是在文本框中输入的文本。每次输入一些文本，然后提交表单时，该文本就会显示在列表中以前你提交的文本之下。

这一切只需要利用 React 的状态功能就可以实现。在 state 对象内，我们有一个数组负责存储输入的文本。

初始化 state 对象

填充 state 对象

注意，我们并非仅添加来自 input 元素的文本条目，而是添加一个由 text 和 key 属性组成的对象。text 属性存储 input 元素的文本值。key 属性存储当前时间。这听起来像要做古怪的事情，但是回忆一下在《在 React 中从数据到 UI 的旅行》这一章，目标是让这个 key 值对于每个被提交的条目是唯一的。这是很重要的，因为我们将在这个数组中使用数据，最终生成一些 UI 元素。这个 key 值会被 React 用来唯一识别每个生成的 UI 元素，所以，通过用 Date.now() 生成 key，我们就可以确保某种程度的唯一性。因为这是一个很重要的细节，所以我们将会在稍后会重访所有这些。

preventDefault 方法确保不会传播 onSubmit 事件超过此界限。我们这样做的原因有点难以理解，但是它确保：提交表单时所有想要做的是调用 addItem 方法。如果不中止事件传播，我们的应用将会在提交表单时会根据需要正确调用 addItem。它还会触发浏览器的默认 POST 行为 - 这显然是我们不想要的。通过阻止 onSubmit 事件跑到此界限以外，我们就得到了我们想要的行为，即调用 addItem 方法，而没有不想要的副作用，比如不需要的会刷新页面的 POST 动作。

显示任务

添加收尾工作

总结

Todo 应用的功能相当简单，但是通过从头开始创建它，我们几乎涵盖了 React 带来的每个有意思的细节。现在，我有一个简单的问题：本教程中我们已经做的一切都理解了吗？

如果本教程中我们做过的一切都理解了，那么你可以骄傲地告诉你的朋友和家人你差不多掌握 React 了！如果你发现还有困惑的地方，建议重读前面的内容。

在 React 中访问 DOM 元素

有时我们需要直接访问 HTML 元素上的属性和方法。在 React 的缤纷世界里，JSX 代表纯粹的标记，那么为什么你会想要直接处理可怕的 HTML 呢？因为你会发现，很多时候直接通过 JavaScript DOM API 处理 HTML 元素，比用 React 的方式更简单。

初始 refs

用 ES6 箭头函数进一步简化

总结

在本教程中，我们看到直接访问 DOM 是如何 “简单” 。React 过去提供了相当简单的方式引用元素，就是在元素上设置 refs 属性，并初始化它为一个字符串值：

<button refs="myButton">Click me!</button>

然后，在组件挂载之后，你就可以通过做点像 this.refs.myButton 这样的事情来访问该元素。但是先不要激动，这种基于字符串的方法已经被废弃了。在本文编写的时候还能用，但是谁知道以后能不能用呢？