first do it, then do it right, then do it better.

此文章是翻译React Top-Level API这篇React（版本v15.4.0）官方文档。

React Top-Level API

React 是React 库的入口。如果你用script 标签来使用React，这些顶级API 都在React 这个全局变量上。如果你在npm 下使用ES6，你可以这样写import React from 'react'。如果你在npm 下使用ES5，你可以这样写var React = require('react')。

此文章是翻译Web Components这篇React（版本v15.4.0）官方文档。

Web Components

React 和Web Component分别用来构建解决不同的问题。Web Component 提供了强大的可复用component 的封装，React 提供了一个声明式库来保持DOM 和你的数据的同步。这两个目标是互补的。作为一个开发者，你可以自由的在你的Web Components 中使用React，或者在React 中使用Web Components，后者两者同时使用。

大多数使用React 的人不使用Web Component，但是如果你想要，尤其是使用Web Components 写的第三方UI components。

此文章是翻译Context这篇React（版本v15.4.0）官方文档。

Context

在React 中，很容易追踪数据通过你的React components 的流动。但你察看一个comopnent 时，你可以看到那一个props 被传入，这使得你的应用很容易推理。

在一些情况下，你希望通过传递数据给component 树，而不需要在每一级手动通过props 进行传递。你可以在React 中直接使用强大的“context”API。

此文章是翻译Reconciliation这篇React（版本v15.4.0）官方文档。

Reconciliation

React 提供声明式（declarative）API 所以你不必担心每次更新的变化。这使得写应用更加容易，但它可能并不明显是如何在React 中实现的。本文解释了我们在React 的比较算法（“diffing”algorithm ）如何使component 的更新变得可预见，以及足够快到高性能应用。

此文章是翻译React Without JSX这篇React（版本v15.4.0）官方文档。

React Without JSX

JSX 对使用React 不是必须的。当你不想在你的构建环境中设置编译，使用不带JSX 的React 是非常方便的。

每一个JSX element 只是调用React.createElement(component, props, ...children) 的语法糖（syntactic sugar）。所以，任何你使用JSX 可以做的事情都可以使用纯JavaScript 来实现。

此文章是翻译Performance Tools这篇React（版本v15.4.0）官方文档。

Performance Tools

Importing

1
2
3

import Perf from 'react-addons-perf' // ES6
var Perf = require('react-addons-perf') // ES5 with npm
var Perf = React.addons.Perf // ES5 with react-with-addons.js

Overview

React 在沙盒中是非常快的。然而，在你需要压缩你的应用的每一盎司性能，它提供了一个shouldComponentUpdate() 钩子，你可以添加优化提示到React的比较算法（diff algorithm）。

除了给你一个你的应用整体性能概括，Perf 是一个分析工具，准确地告诉你，你需要在哪里添加这些钩子（hooks）。

参考Benchling Enginering Team 深入介绍性能工具的文章：

• “Performance Engineering with React”
• “A Deep Dive into React Perf Debugging”

此文章是翻译React Without ES6这篇React（版本v15.4.0）官方文档。

React Without ES6

通常你可以使用一个纯JavaScript class 去定义一个React component：

1
2
3
4
5

class Greeting extends Component {
  render(){
    return <h1>Hello, {this.props.name}</h1>
  }
}

如果你不使用ES6，你也可以使用React.createClass 来代替：

1
2
3
4
5

var Greeting = React.createClass({
  render: function(){
    return <h1>Hello, {this.props.name}</h1>
  }
})

ES6 class API 的使用除了几个例外和React.createClass 非常相似。

此文章是翻译Optimizing Performance这篇React（版本v15.4.0）官方文档。

Optimizing Performance

在内部，React 使用一些聪明的技术去减少更新UI 操作所需要花费的昂贵的DOM 操作数量。对于许多应用，使用React 产生一个开始的用户操作而不需要做大量的专门优化性能的操作。不过，这里仍有集中方式去加速你的应用。

此文章是翻译Uncontrolled Components)这篇React（版本v15.4.0）官方文档。

Uncontrolled Components

在大多数情况下，我们建议使用controlled component 去实现forms。在一个controlled component 中，form 数据被React component 控制。这个uncontrolled components 替代方案中，form 数据被DOM 自身控制。

写一个uncontrolled component 而不是为每一个state 更新写一个事件句柄（event handler），你可以使用ref 从DOM 中获取值。

此文章是翻译Refs and the DOM这篇React（版本v15.4.0）官方文档。

Refs and the DOM

在典型的React 数据流（dataflow）中， props 是父component 同子节点进行交流的唯一方式。为了修改一个子节点，你需要用新的props 进行重新渲染。然而，还有集中需要你在典型的数据流之外进行命令式修改一个子节点。这个被修改的子节点可能是一个React comoponent 实例，也有可能是一个DOM element。对于上述两种情况，React 提供了一种应急方案（an escape hatch）.