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

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

Design Principles

我们写了这篇文档，以至于你可以有一个更好的想法关于我们怎么决定，React 做什么，React 不做什么以及我们的开发理念是什么。虽然我们很高兴看到社区贡献，但是我们不希望选择一个破坏一个或多个这些规则的路径。

Note：
这篇文档假设对React 深入的了解。它描述了React 自身的设计规则，而不是React component 或应用。
作为一个对React 的介绍，查看Thinking in React替代。

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

Implementation Notes

这部分是stack reconciler 实现笔记集合。

这是非常技术性的，并且呈现对React 公共API 的强烈理解，以及如何划分为核心（core），渲染器（renderer）以及reconciler。如果你对React 代码库不是非常了解，首先阅读the codebase overview。

目前stack reconciler 是所有React 生产代码中最有效的。它位于src/renderers/shared/stack/reconciler 并且被React DOM 和React Native 使用。

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

Codebase Overview

本节将概要介绍React 代码库的组织，约定已经实现。

如果你想要contribute to React， 我们希望这个指南能够帮你更舒服地改变。

我们不一定推荐React 应用中的任何约定。它们中的多数是由于历史原因存在，可能会随着事件而改变。

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

How to Contribute

React 是Facebook 的第一个开源项目，它正在积极发展并且在迁移代码到facebook.com 任何位置。我们仍然正在解决节点（kinkes）去是贡献这个项目尽可能的容易和透明，但是我们还没有达到。希望这篇文档能够使贡献清晰并且能够回答你可能遇到的一些问题。

此文章是翻译Two-way Binding Helpers这篇React（版本v15.4.0）官方文档。

Two-way Binding Helpers

注意：LinkedStateMixin 在React v15 被废弃掉了。建议明确地设置value 以及更改句柄，而是不是用LinkedStateMixin。

Importing

1
2
3

import LinkedStateMixin  from 'react-addons-linked-state-mixin' // ES6
var LinkedStateMixin = require('react-addons-linked-state-mixin') // ES5 with npm
var LinkedStateMixin = React.addons.LinkedStateMixin; // ES5 with react-with-addons.js

Overview

LinkedStateMixin 是表达React 的双向绑定的一种简单方法。

在React 中，数据流是单向的：从拥有者到孩子。这是因为在the Von Neumann model of computing 中数据只能向一个方向流动。你可以认为它是“单向绑定的”。

然而，需要引诱需要你去读取数据并将其返回到你的程序中。例如，当开发表单时，当你收到用户的输入，你需要更新React 的state。或者可能你想要在JavaScript 中执行布局去对DOM element 大小的改变做出响应。

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

Shallow Compare

注意：shallowCompare 是一个历史遗留的add-on。请使用React.PureComponent来替代。

Importing

1
2
3

import shallowCompare from 'react-addons-shallow-compare' // ES6
var shallowCompare = require('react-addons-shallow-compare') // ES5 with npm
var shallowCompare = React.addons.shallowCompare; // ES5 with react-with-addon.js

Overview

在React.PureComponent被提出之前，ShallowCompare通常被用来实现同PureRenderMixin相关的功能，在React 中使用ES6 class 时。

如果你的React component 的渲染函数是“纯的（pure）”（换句话说，给定同样的props 和state 返回相同的结果），在某些情况下，你可以使用这个帮助函数提升性能。

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

PureRenderMixin

Note：
PureRenderMixin 混合早于React.PureComponent 。这篇参考文章是由于历史遗留问题提供的，你应该考虑使用React.PureComponent 来替代。

如果你的React component 的渲染函数给定相同的props 和state 返回同一个结果，在某些情况下为了提示性能你应该使用混合。

例子：

1
2
3
4
5
6
7
8

var PureRenderMixin = require('react-addons-pure-render-mixin');
React.createClass({
  mixins: [PureRenderMixin],

  render: function(){
    return <div className={this.props.className}>foo</div>
  }
})

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

Immutability Helpers

注意：update 是历史遗留的add-ons。使用kolodny/Immutability-helper来替代。

Importing

1
2
3

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

Overview

React 让你使用你想要的任何数据管理类型，包括变化。然而，如果你在你应用的性能关键的地方使用不可变的数据，它很容易实现一个快速的shouldComponentUpdate()方法去显著地加速你的应用。

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

Keyed Fragments

Importing

1
2
3

import createFragment from 'react-addons-create-fragment' // ES6
var createFragment = require('react-addons-create-fragment') // ES5 with npm
var createFragment = React.addons.createFragment; // ES5 with react-with-addons.js

Overview

在大多数情况下，你使用key 属性去配置你从render 中返回的每一个element 上的key。然而，在一种情况下会被破坏：如果你有两套子节点需要重新排序，在不添加包裹器element 的情况下，没有办法在每一个上去设置key。

也就是说，你有这样的一个component：

1
2
3
4
5
6
7
8
9

function Swapper(props) {
  let children;
  if (props.swapped) {
    children = [props.rightChildren, props.leftChildren];
  } else {
    children = [props.leftChildren, props.rightChildren];
  }
  return <div>{children}</div>;
}

当你改变swapped 属性时，孩子节点将会被卸载然后再重新加载，因为因为这里没有任何key 标志在这两套孩子节点上。

为了解决这个问题，你可以使用createFragment add-ons 去给每一套孩子节点设置key。

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

Animation Add-Ons

ReactTransitionGroup add-on component 是低级的动画API，ReactCSSTransitionGroup 是一个简单显示基本CSS 动画和变形的add-on component。