From d23d35d15a64b3fccaa51c62ae4669391bfde293 Mon Sep 17 00:00:00 2001 From: Travis CI Date: Tue, 10 May 2016 01:29:04 +0000 Subject: [PATCH] Rebuild website --- docs/displaying-data-ru-RU.html | 580 ++++++++++++++++++ docs/displaying-data.html | 62 +- docs/interactivity-and-dynamic-uis-ru-RU.html | 540 ++++++++++++++++ docs/interactivity-and-dynamic-uis.html | 57 +- docs/why-react-ru-RU.html | 2 +- docs/why-react-zh-TW.html | 498 +++++++++++++++ docs/why-react.html | 26 +- 7 files changed, 1691 insertions(+), 74 deletions(-) create mode 100644 docs/displaying-data-ru-RU.html create mode 100644 docs/interactivity-and-dynamic-uis-ru-RU.html create mode 100644 docs/why-react-zh-TW.html diff --git a/docs/displaying-data-ru-RU.html b/docs/displaying-data-ru-RU.html new file mode 100644 index 0000000000..88e7d25926 --- /dev/null +++ b/docs/displaying-data-ru-RU.html @@ -0,0 +1,580 @@ + + + + + + + Отображение данных | React + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ +
+
+ + + React + + + + +
+
+ + + +
+
+ + +
+

Quick Start

+ +
+ +
+

Community Resources

+ +
+ +
+

Guides

+ +
+ +
+

Reference

+ +
+ +
+

Flux

+ +
+ + + + +
+

Tips

+ +
+ +
+ + +
+ Edit on GitHub +

+ Отображение данных +

+
+ +

Главная задача интерфейса — это отображать данные. React делает это легко и обновляет интерфейс сразу, как только изменятся данные.

+

Начало #

+

Давайте рассмотрим простой пример. Создайте файл hello-react.html со следующим текстом:

+
<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="UTF-8" />
+    <title>Hello React</title>
+    <script src="https://fb.me/react-15.0.2.js"></script>
+    <script src="https://fb.me/react-dom-15.0.2.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23/browser.min.js"></script>
+  </head>
+  <body>
+    <div id="example"></div>
+    <script type="text/babel">
+
+      // ** Ваш код будет здесь! **
+
+    </script>
+  </body>
+</html>
+
+

Добавим в этот шаблон немного JavaScript. Замените комментарий на следующий JSX-код:

+
var HelloWorld = React.createClass({
+  render: function() {
+    return (
+      <p>
+        Hello, <input type="text" placeholder="Your name here" />!
+        It is {this.props.date.toTimeString()}
+      </p>
+    );
+  }
+});
+
+setInterval(function() {
+  ReactDOM.render(
+    <HelloWorld date={new Date()} />,
+    document.getElementById('example')
+  );
+}, 500);
+

Реактивные обновления #

+

Откройте hello-react.html в браузере и введите в текстовое поле свое имя. Что происходит со страницей? Каждые полсекунды обновляется время, остальные же части страницы остаются без изменений. Обратите внимание, что мы не написали ни строчки кода, чтобы управлять этим поведением. React сам отлично понимает что надо делать и обновляет элементы на странице по мере необходимости.

+ +

Суть в том, что React не меняет DOM-дерево до тех пор, пока это не потребуется. Чтобы отразить изменения, React использует быстрое внутреннее представление DOM-дерева и просчитывает как его изменить наиболее эффективно.

+ +

Передаваемые в компонент данные называются props — сокращенно от "properties". В JSX коде они передаются как атрибуты компонента. Считайте, что компонент получает props только для чтения. Никогда не перезаписывайте значения this.props внутри компонента.

+

Компоненты как функции #

+

Компоненты React — довольно простые сущности. Можно считать их обыкновенными функциями, которые принимают на входе props и state (см. далее) и возвращают HTML. Если помнить об этом, то компоненты становятся простыми для понимания.

+ +
+

Замечание:

+ +

Есть одно ограничение: Компоненты React умеют возвращать только один узел. Если вам надо вернуть сразу несколько, они должны быть обернуты в один корневой узел.

+
+

Синтаксис JSX #

+

Мы убеждены, что компоненты — самый подходящий способ разделения ответственностей, гораздо более удобный чем "шаблоны" и "вынесение логики на страницу". Мы считаем, что разметка и код, который её генерирует, неотделимы друг от друга. Плюс, логика на странице часто бывает запутанной, и использование шаблонизаторов, чтобы описать её, только затрудняет работу.

+ +

Мы решили, что лучшим вариантом будет генерировать HTML и деревья компонентов прямо из JS кода. Так вы сможете зайдействовать всю выразительную мощь современного языка программирования для создания интерфейсов.

+ +

А чтобы упростить создание узлов дерева, мы ввели опциональный HTML-подобный синтаксис.

+ +

JSX позволяет вам создавать JavaScript объекты используя синтаксис HTML. Для генерации ссылки в React вы напишете на чистом JavaScript:

+ +

React.createElement('a', {href: 'https://facebook.github.io/react/'}, 'Hello!')

+ +

С JSX это станет:

+ +

<a href="https://facebook.github.io/react/">Hello!</a>

+ +

Мы установили, что с JSX создавать React приложения проще, и дизайнеров как правило устраивает его синтаксис. Но у разных людей разные предпочтения, поэтому стоит сказать, что JSX необязателен при работе с React.

+ +

JSX сам по себе очень прост. Чтобы узнать о нем больше, почитайте подробно про JSX. Или можете попробовать его в Babel REPL.

+ +

JSX похож на HTML, но но имеет существенные отличия. Почитайте про подводные камни JSX, чтобы понять их ключевые различия.

+ +

Babel предлагает несколько способов начать работу с JSX, от консольных утилит до интеграций с Ruby on Rails. Выберите тот инструмент, который лучше всего вам подходит.

+

React без использования JSX #

+

JSX полностью опционален; вам совсем необязательно использовать его вместе с React. Вы можете создавать React-элементы на чистом JavaScript используя функцию React.createElement, которая принимает имя тега или компонента, объект со свойствами, и набор необязательных дочерних элементов.

+
var child1 = React.createElement('li', null, 'First Text Content');
+var child2 = React.createElement('li', null, 'Second Text Content');
+var root = React.createElement('ul', { className: 'my-list' }, child1, child2);
+ReactDOM.render(root, document.getElementById('example'));
+
+

Для удобства, вы можете создать сокращенные фабричные функции, чтобы создавать React-элементы из ваших собственных компонентов.

+
var Factory = React.createFactory(ComponentClass);
+...
+var root = Factory({ custom: 'prop' });
+ReactDOM.render(root, document.getElementById('example'));
+
+

А для базовых HTML тегов в React уже есть встроенные фабрики:

+
var root = React.DOM.ul({ className: 'my-list' },
+             React.DOM.li(null, 'Text Content')
+           );
+
+ +
+ + ← Prev + + + Next → + +
+
+
+ + +
+
+ A Facebook & Instagram collaboration.
+ Acknowledgements +
+
+ © 2013–2016 Facebook Inc.
+ Documentation licensed under CC BY 4.0. +
+
+
+
+ + + + diff --git a/docs/displaying-data.html b/docs/displaying-data.html index 075c8ae1b7..3f7864bfad 100644 --- a/docs/displaying-data.html +++ b/docs/displaying-data.html @@ -4,9 +4,9 @@ - Отображение данных | React + Displaying Data | React - + @@ -426,15 +426,15 @@
- Edit on GitHub + Edit on GitHub

- Отображение данных + Displaying Data

-

Главная задача интерфейса — это отображать данные. React делает это легко и обновляет интерфейс сразу, как только изменятся данные.

-

Начало #

-

Давайте рассмотрим простой пример. Создайте файл hello-react.html со следующим текстом:

+

The most basic thing you can do with a UI is display some data. React makes it easy to display data and automatically keeps the interface up-to-date when the data changes.

+

Getting Started #

+

Let's look at a really simple example. Create a hello-react.html file with the following code:

<!DOCTYPE html>
 <html>
   <head>
@@ -448,13 +448,13 @@
     <div id="example"></div>
     <script type="text/babel">
 
-      // ** Ваш код будет здесь! **
+      // ** Your code goes here! **
 
     </script>
   </body>
 </html>
-

Добавим в этот шаблон немного JavaScript. Замените комментарий на следующий JSX-код:

+

For the rest of the documentation, we'll just focus on the JavaScript code and assume it's inserted into a template like the one above. Replace the placeholder comment above with the following JSX:

var HelloWorld = React.createClass({
   render: function() {
     return (
@@ -472,56 +472,56 @@
     document.getElementById('example')
   );
 }, 500);
-

Реактивные обновления #

-

Откройте hello-react.html в браузере и введите в текстовое поле свое имя. Что происходит со страницей? Каждые полсекунды обновляется время, остальные же части страницы остаются без изменений. Обратите внимание, что мы не написали ни строчки кода, чтобы управлять этим поведением. React сам отлично понимает что надо делать и обновляет элементы на странице по мере необходимости.

+

Reactive Updates #

+

Open hello-react.html in a web browser and type your name into the text field. Notice that React is only changing the time string in the UI — any input you put in the text field remains, even though you haven't written any code to manage this behavior. React figures it out for you and does the right thing.

-

Суть в том, что React не меняет DOM-дерево до тех пор, пока это не потребуется. Чтобы отразить изменения, React использует быстрое внутреннее представление DOM-дерева и просчитывает как его изменить наиболее эффективно.

+

The way we are able to figure this out is that React does not manipulate the DOM unless it needs to. It uses a fast, internal mock DOM to perform diffs and computes the most efficient DOM mutation for you.

-

Передаваемые в компонент данные называются props — сокращенно от "properties". В JSX коде они передаются как атрибуты компонента. Считайте, что компонент получает props только для чтения. Никогда не перезаписывайте значения this.props внутри компонента.

-

Компоненты как функции #

-

Компоненты React — довольно простые сущности. Можно считать их обыкновенными функциями, которые принимают на входе props и state (см. далее) и возвращают HTML. Если помнить об этом, то компоненты становятся простыми для понимания.

+

The inputs to this component are called props — short for "properties". They're passed as attributes in JSX syntax. You should think of these as immutable within the component, that is, never write to this.props.

+

Components are Just Like Functions #

+

React components are very simple. You can think of them as simple functions that take in props and state (discussed later) and render HTML. With this in mind, components are easy to reason about.

-

Замечание:

+

Note:

-

Есть одно ограничение: Компоненты React умеют возвращать только один узел. Если вам надо вернуть сразу несколько, они должны быть обернуты в один корневой узел.

+

One limitation: React components can only render a single root node. If you want to return multiple nodes they must be wrapped in a single root.

-

Синтаксис JSX #

-

Мы убеждены, что компоненты — самый подходящий способ разделения ответственностей, гораздо более удобный чем "шаблоны" и "вынесение логики на страницу". Мы считаем, что разметка и код, который её генерирует, неотделимы друг от друга. Плюс, логика на странице часто бывает запутанной, и использование шаблонизаторов, чтобы описать её, только затрудняет работу.

+

JSX Syntax #

+

We strongly believe that components are the right way to separate concerns rather than "templates" and "display logic." We think that markup and the code that generates it are intimately tied together. Additionally, display logic is often very complex and using template languages to express it becomes cumbersome.

-

Мы решили, что лучшим вариантом будет генерировать HTML и деревья компонентов прямо из JS кода. Так вы сможете зайдействовать всю выразительную мощь современного языка программирования для создания интерфейсов.

+

We've found that the best solution for this problem is to generate HTML and component trees directly from the JavaScript code such that you can use all of the expressive power of a real programming language to build UIs.

-

А чтобы упростить создание узлов дерева, мы ввели опциональный HTML-подобный синтаксис.

+

In order to make this easier, we've added a very simple, optional HTML-like syntax to create these React tree nodes.

-

JSX позволяет вам создавать JavaScript объекты используя синтаксис HTML. Для генерации ссылки в React вы напишете на чистом JavaScript:

+

JSX lets you create JavaScript objects using HTML syntax. To generate a link in React using pure JavaScript you'd write:

React.createElement('a', {href: 'https://facebook.github.io/react/'}, 'Hello!')

-

С JSX это станет:

+

With JSX this becomes:

<a href="https://facebook.github.io/react/">Hello!</a>

-

Мы установили, что с JSX создавать React приложения проще, и дизайнеров как правило устраивает его синтаксис. Но у разных людей разные предпочтения, поэтому стоит сказать, что JSX необязателен при работе с React.

+

We've found this has made building React apps easier and designers tend to prefer the syntax, but everyone has their own workflow, so JSX is not required to use React.

-

JSX сам по себе очень прост. Чтобы узнать о нем больше, почитайте подробно про JSX. Или можете попробовать его в Babel REPL.

+

JSX is very small. To learn more about it, see JSX in depth. Or see the transform in action in the Babel REPL.

-

JSX похож на HTML, но но имеет существенные отличия. Почитайте про подводные камни JSX, чтобы понять их ключевые различия.

+

JSX is similar to HTML, but not exactly the same. See JSX gotchas for some key differences.

-

Babel предлагает несколько способов начать работу с JSX, от консольных утилит до интеграций с Ruby on Rails. Выберите тот инструмент, который лучше всего вам подходит.

-

React без использования JSX #

-

JSX полностью опционален; вам совсем необязательно использовать его вместе с React. Вы можете создавать React-элементы на чистом JavaScript используя функцию React.createElement, которая принимает имя тега или компонента, объект со свойствами, и набор необязательных дочерних элементов.

+

Babel exposes a number of ways to get started using JSX, ranging from command line tools to Ruby on Rails integrations. Choose the tool that works best for you.

+

React without JSX #

+

JSX is completely optional; you don't have to use JSX with React. You can create React elements in plain JavaScript using React.createElement, which takes a tag name or component, a properties object, and variable number of optional child arguments.

var child1 = React.createElement('li', null, 'First Text Content');
 var child2 = React.createElement('li', null, 'Second Text Content');
 var root = React.createElement('ul', { className: 'my-list' }, child1, child2);
 ReactDOM.render(root, document.getElementById('example'));
-

Для удобства, вы можете создать сокращенные фабричные функции, чтобы создавать React-элементы из ваших собственных компонентов.

+

For convenience, you can create short-hand factory functions to create elements from custom components.

var Factory = React.createFactory(ComponentClass);
 ...
 var root = Factory({ custom: 'prop' });
 ReactDOM.render(root, document.getElementById('example'));
-

А для базовых HTML тегов в React уже есть встроенные фабрики:

+

React already has built-in factories for common HTML tags:

var root = React.DOM.ul({ className: 'my-list' },
              React.DOM.li(null, 'Text Content')
            );
diff --git a/docs/interactivity-and-dynamic-uis-ru-RU.html b/docs/interactivity-and-dynamic-uis-ru-RU.html
new file mode 100644
index 0000000000..ffd54f78ac
--- /dev/null
+++ b/docs/interactivity-and-dynamic-uis-ru-RU.html
@@ -0,0 +1,540 @@
+
+
+
+
+  
+  
+  Интерактивные и динамические интерфейсы | React
+  
+  
+  
+  
+  
+  
+  
+
+  
+  
+
+  
+  
+  
+  
+
+  
+  
+
+  
+  
+  
+  
+  
+  
+  
+  
+
+
+
+  

+
+    

+      

+        
+          
+          React
+        
+        
+
+        
+      

+    

+
+    
+
+    

+  

+  
+  
+    

+      
Quick Start

+      
+    

+  
+    

+      
Community Resources

+      
+    

+  
+    

+      
Guides

+      
+    

+  
+    

+      
Reference

+      
+    

+  
+    

+      
Flux

+      
+    

+  
+
+  
+  
+    

+      
Tips

+      
+    

+  
+

+
+
+  

+    Edit on GitHub
+    

+      Интерактивные и динамические интерфейсы
+    

+    

+
+    
Вы уже знаете как показывать данные с React. Теперь давайте добавим в наши интферфейсы немного интерактивности.

+
Простой пример #
var LikeButton = React.createClass({
+  getInitialState: function() {
+    return {liked: false};
+  },
+  handleClick: function(event) {
+    this.setState({liked: !this.state.liked});
+  },
+  render: function() {
+    var text = this.state.liked ? 'like' : 'haven\'t liked';
+    return (
+      <p onClick={this.handleClick}>
+        You {text} this. Click to toggle.
+      </p>
+    );
+  }
+});
+
+ReactDOM.render(
+  <LikeButton />,
+  document.getElementById('example')
+);
+
Обработка событий и синтетические события #

+
С React вы просто передаете функцию-обработчик нужного события как аргумент, почти так же, как делали это в HTML. Благодаря механизму синтетических событий React гарантирует, что все события будут вести себя одинаково во всех браузерах. Другими словами, React знает, как работает всплытие и перехват событий по спецификации. События, которые он передает в ваши обработчики, будут соответствовать спецификации W3C, несмотря на то, каким браузером вы пользуетесь.

+
Как это работает: автоматическое связывание и делегирование событий #

+
Чтобы ваш код был не только понятным, но и быстрым, React делает следующее:

+
+
Автоматическое связывание: Когда в JavaScript создаются функции обратного вызова, вам надо привязать метод к тому объекту, на котором он будет вызываться, чтобы значение this было корректным. С React привязка метода к компоненту происходит автоматически (кроме тех случаев, когда вы используете классы ES6). И делается это с минимальной нагрузкой на процессор и память.

+
+
Делегирование событий: На самом же деле, React добавляет обработчики событий не к узлам дерева. Сразу после запуска, React начинает прослушивать все события с самого верхнего уровня, используя единый слушатель. Когда добавляется новый компонент или удаляется старый, обработчики событий просто добавляются или удаляются из памяти React. И когда событие наступает, React уже заранее знает какому из обработчиков его передать. Когда в памяти больше не остается обработчиков, React перестает обрабатывать события. Если хотите узнать о том, почему эта механика так быстро работает, почитайте отличный пост в блоге David Walsh.

+
Компоненты как конечные автоматы #

+
React считает интерфейсы обыкновенными конечными автоматами. Работать с интерфейсом становится проще, если представлять его как конечный автомат, который меняет состояния и отрисовывает их.

+
+
В React вы просто обновляете состояние компонента, а потом выводите новый интерфейс уже с новыми данными. Все изменения в DOM-дереве React сделает сам, причем наиболее эффективным способом.

+
Как работает состояние #

+
Чтобы сообщить React о том, что данные изменились, вы вызываете метод setState(data, callback). В этом методе происходит обновление состояния this.state новыми данными из data, и компонент отрисуется заново. После этого вызывается функция callback. Но вы редко будете ей пользоваться, ведь React сам обновляет интерфейс.

+
В каких компонентах хранить состояние? #

+
Большинство компонентов должны просто брать данные из props и отрисовывать их. Но иногда вам надо реагировать на действия пользователя, делать запросы на сервер или просто сделать что-то по таймеру. В таких случаях используйте состояние.

+
+
Старайтесь делать компоненты без состояния. Следуя этому правилу, вы будете выносить работу с состоянием с уровня представления в другие, более подходящие места. Тем самым, вы снизите сложность приложения, упрощая его понимание.

+
+
Основной принцип такой: создаются несколько компонентов без состояния, которые формируют дерево. Они будут заниматься только отрисовкой данных. А все данные для них будут у родительского компонента, который будет на вершине этого дерева компонентов. Он и будет передавать данные дочерним узлам через props. Этот компонент с общим состоянием содержит в себе всю логику взаимодействия, а дочерние компоненты будут только отрисовывать данные, которые будут у них в props.

+
Какие данные надо помещать в состояние? #

+
Состояние должно содержать данные, которые нужны для обновления интерфейса. В реальных приложениях такие данные, как правило, незначительны по объему, и могут быть сериализованы в JSON. Когда вы создаете компонент с состоянием, старайтесь поместить в него минимум данных. А уже внутри метода render() вычисляйте остальные данные, используя значения из состояния. 
+Со временем вы увидите, что такой подход позволяет создавать более стройные и устойчивые к изменениям приложения. Добавление в состояние лишних данных требует от вас дополнительных затрат на их синхронизацию. Но этого можно избежать, если позволить React делать все эти вычисления за вас.

+
Какие данные не надо помещать в состояние? #

+
Состояние this.state должно содержать минимум данных, необходимых  для отображения интерфейса. Поэтому не стоит хранить в нем:

+
+
    
+
  • Вычисляемые данные: Не волнуйтесь о данных, которые можно вычислить из состояния. Согласованность данных проще обеспечить, если производить все вычисления в методе render(). Например, если в состоянии хранится список элементов, и вам надо вывести его размер в виде строки, напишите this.state.listItems.length + ' элементов' в методе render(). Это будет правильнее, чем хранить размер списка в состоянии.
    • 
+
  • Компоненты React: Создавайте их в методе render(), опираясь на данные из props и state.
    • 
+
  • Значения, повторяющие props: Старайтесь по мере возможности использовать props как единственный источник данных. Хранить значения props в состоянии допускается, только если вам надо где-то хранить их прошлые значения, ведь props могут измениться после отрисовки родительского компонента.
    • 
+

+
+
+    

+      
+        ← Prev
+      
+      
+        Next →
+      
+    

+  

+

+
+
+    

+      

+        A Facebook & Instagram collaboration.

+        Acknowledgements
+      

+      

+        © 2013–2016 Facebook Inc.

+        Documentation licensed under CC BY 4.0.
+      

+    

+  

+  

+
+  
+
+
diff --git a/docs/interactivity-and-dynamic-uis.html b/docs/interactivity-and-dynamic-uis.html
index 9eafbc1226..72bee00881 100644
--- a/docs/interactivity-and-dynamic-uis.html
+++ b/docs/interactivity-and-dynamic-uis.html
@@ -4,9 +4,9 @@
 
   
   
-  Интерактивные и динамические интерфейсы | React
+  Interactivity and Dynamic UIs | React
   
-  
+  
   
   
   
@@ -426,14 +426,14 @@
 
 
   

-    Edit on GitHub
+    Edit on GitHub
     

-      Интерактивные и динамические интерфейсы
+      Interactivity and Dynamic UIs
     

     

 
-    
Вы уже знаете как показывать данные с React. Теперь давайте добавим в наши интферфейсы немного интерактивности.

-
Простой пример #
var LikeButton = React.createClass({
+    
You've already learned how to display data with React. Now let's look at how to make our UIs interactive.

+
A Simple Example #
var LikeButton = React.createClass({
   getInitialState: function() {
     return {liked: false};
   },
@@ -454,36 +454,35 @@
   <LikeButton />,
   document.getElementById('example')
 );
-
Обработка событий и синтетические события #

-
С React вы просто передаете функцию-обработчик нужного события как аргумент, почти так же, как делали это в HTML. Благодаря механизму синтетических событий React гарантирует, что все события будут вести себя одинаково во всех браузерах. Другими словами, React знает, как работает всплытие и перехват событий по спецификации. События, которые он передает в ваши обработчики, будут соответствовать спецификации W3C, несмотря на то, каким браузером вы пользуетесь.

-
Как это работает: автоматическое связывание и делегирование событий #

-
Чтобы ваш код был не только понятным, но и быстрым, React делает следующее:

+
Event Handling and Synthetic Events #

+
With React you simply pass your event handler as a camelCased prop similar to how you'd do it in normal HTML. React ensures that all events behave similarly in all browsers by implementing a synthetic event system. That is, React knows how to bubble and capture events according to the spec, and the events passed to your event handler are guaranteed to be consistent with the W3C spec, regardless of which browser you're using.

+
Under the Hood: Autobinding and Event Delegation #

+
Under the hood, React does a few things to keep your code performant and easy to understand.

 
-
Автоматическое связывание: Когда в JavaScript создаются функции обратного вызова, вам надо привязать метод к тому объекту, на котором он будет вызываться, чтобы значение this было корректным. С React привязка метода к компоненту происходит автоматически (кроме тех случаев, когда вы используете классы ES6). И делается это с минимальной нагрузкой на процессор и память.

+
Autobinding: When creating callbacks in JavaScript, you usually need to explicitly bind a method to its instance such that the value of this is correct. With React, every method is automatically bound to its component instance (except when using ES6 class syntax). React caches the bound method such that it's extremely CPU and memory efficient. It's also less typing!

 
-
Делегирование событий: На самом же деле, React добавляет обработчики событий не к узлам дерева. Сразу после запуска, React начинает прослушивать все события с самого верхнего уровня, используя единый слушатель. Когда добавляется новый компонент или удаляется старый, обработчики событий просто добавляются или удаляются из памяти React. И когда событие наступает, React уже заранее знает какому из обработчиков его передать. Когда в памяти больше не остается обработчиков, React перестает обрабатывать события. Если хотите узнать о том, почему эта механика так быстро работает, почитайте отличный пост в блоге David Walsh.

-
Компоненты как конечные автоматы #

-
React считает интерфейсы обыкновенными конечными автоматами. Работать с интерфейсом становится проще, если представлять его как конечный автомат, который меняет состояния и отрисовывает их.

+
Event delegation: React doesn't actually attach event handlers to the nodes themselves. When React starts up, it starts listening for all events at the top level using a single event listener. When a component is mounted or unmounted, the event handlers are simply added or removed from an internal mapping. When an event occurs, React knows how to dispatch it using this mapping. When there are no event handlers left in the mapping, React's event handlers are simple no-ops. To learn more about why this is fast, see David Walsh's excellent blog post.

+
Components are Just State Machines #

+
React thinks of UIs as simple state machines. By thinking of a UI as being in various states and rendering those states, it's easy to keep your UI consistent.

 
-
В React вы просто обновляете состояние компонента, а потом выводите новый интерфейс уже с новыми данными. Все изменения в DOM-дереве React сделает сам, причем наиболее эффективным способом.

-
Как работает состояние #

-
Чтобы сообщить React о том, что данные изменились, вы вызываете метод setState(data, callback). В этом методе происходит обновление состояния this.state новыми данными из data, и компонент отрисуется заново. После этого вызывается функция callback. Но вы редко будете ей пользоваться, ведь React сам обновляет интерфейс.

-
В каких компонентах хранить состояние? #

-
Большинство компонентов должны просто брать данные из props и отрисовывать их. Но иногда вам надо реагировать на действия пользователя, делать запросы на сервер или просто сделать что-то по таймеру. В таких случаях используйте состояние.

+
In React, you simply update a component's state, and then render a new UI based on this new state. React takes care of updating the DOM for you in the most efficient way.

+
How State Works #

+
A common way to inform React of a data change is by calling setState(data, callback). This method merges data into this.state and re-renders the component. When the component finishes re-rendering, the optional callback is called. Most of the time you'll never need to provide a callback since React will take care of keeping your UI up-to-date for you.

+
What Components Should Have State? #

+
Most of your components should simply take some data from props and render it. However, sometimes you need to respond to user input, a server request or the passage of time. For this you use state.

 
-
Старайтесь делать компоненты без состояния. Следуя этому правилу, вы будете выносить работу с состоянием с уровня представления в другие, более подходящие места. Тем самым, вы снизите сложность приложения, упрощая его понимание.

+
Try to keep as many of your components as possible stateless. By doing this you'll isolate the state to its most logical place and minimize redundancy, making it easier to reason about your application.

 
-
Основной принцип такой: создаются несколько компонентов без состояния, которые формируют дерево. Они будут заниматься только отрисовкой данных. А все данные для них будут у родительского компонента, который будет на вершине этого дерева компонентов. Он и будет передавать данные дочерним узлам через props. Этот компонент с общим состоянием содержит в себе всю логику взаимодействия, а дочерние компоненты будут только отрисовывать данные, которые будут у них в props.

-
Какие данные надо помещать в состояние? #

-
Состояние должно содержать данные, которые нужны для обновления интерфейса. В реальных приложениях такие данные, как правило, незначительны по объему, и могут быть сериализованы в JSON. Когда вы создаете компонент с состоянием, старайтесь поместить в него минимум данных. А уже внутри метода render() вычисляйте остальные данные, используя значения из состояния. 
-Со временем вы увидите, что такой подход позволяет создавать более стройные и устойчивые к изменениям приложения. Добавление в состояние лишних данных требует от вас дополнительных затрат на их синхронизацию. Но этого можно избежать, если позволить React делать все эти вычисления за вас.

-
Какие данные не надо помещать в состояние? #

-
Состояние this.state должно содержать минимум данных, необходимых  для отображения интерфейса. Поэтому не стоит хранить в нем:

+
A common pattern is to create several stateless components that just render data, and have a stateful component above them in the hierarchy that passes its state to its children via props. The stateful component encapsulates all of the interaction logic, while the stateless components take care of rendering data in a declarative way.

+
What Should Go in State? #

+
State should contain data that a component's event handlers may change to trigger a UI update. In real apps this data tends to be very small and JSON-serializable. When building a stateful component, think about the minimal possible representation of its state, and only store those properties in this.state. Inside of render() simply compute any other information you need based on this state. You'll find that thinking about and writing applications in this way tends to lead to the most correct application, since adding redundant or computed values to state means that you need to explicitly keep them in sync rather than rely on React computing them for you.

+
What Shouldn't Go in State? #

+
this.state should only contain the minimal amount of data needed to represent your UI's state. As such, it should not contain:

 
 
    
-
  • Вычисляемые данные: Не волнуйтесь о данных, которые можно вычислить из состояния. Согласованность данных проще обеспечить, если производить все вычисления в методе render(). Например, если в состоянии хранится список элементов, и вам надо вывести его размер в виде строки, напишите this.state.listItems.length + ' элементов' в методе render(). Это будет правильнее, чем хранить размер списка в состоянии.
    • 
-
  • Компоненты React: Создавайте их в методе render(), опираясь на данные из props и state.
    • 
-
  • Значения, повторяющие props: Старайтесь по мере возможности использовать props как единственный источник данных. Хранить значения props в состоянии допускается, только если вам надо где-то хранить их прошлые значения, ведь props могут измениться после отрисовки родительского компонента.
    • 
+
  • Computed data: Don't worry about precomputing values based on state — it's easier to ensure that your UI is consistent if you do all computation within render(). For example, if you have an array of list items in state and you want to render the count as a string, simply render this.state.listItems.length + ' list items' in your render() method rather than storing it on state.
    • 
+
  • React components: Build them in render() based on underlying props and state.
    • 
+
  • Duplicated data from props: Try to use props as the source of truth where possible. One valid use to store props in state is to be able to know its previous values, because props may change as the result of a parent component re-rendering.
    • 
 

 
 
diff --git a/docs/why-react-ru-RU.html b/docs/why-react-ru-RU.html
index 2d68ede73f..35340339c5 100644
--- a/docs/why-react-ru-RU.html
+++ b/docs/why-react-ru-RU.html
@@ -124,7 +124,7 @@
       
    
         
           
  • 
-            Why React?
+            Why React?
             
           
    • 
         
diff --git a/docs/why-react-zh-TW.html b/docs/why-react-zh-TW.html
new file mode 100644
index 0000000000..f5a1203958
--- /dev/null
+++ b/docs/why-react-zh-TW.html
@@ -0,0 +1,498 @@
+
+
+
+
+  
+  
+  Why React? | React
+  
+  
+  
+  
+  
+  
+  
+
+  
+  
+
+  
+  
+  
+  
+
+  
+  
+
+  
+  
+  
+  
+  
+  
+  
+  
+
+
+
+  
    
+
+    
    
+      
    
+        
+          
+          React
+        
+        
+
+        
+      
    
+    
    
+
+    
+
+    
    
+  
    
+  
+  
+    
    
+      
    Quick Start
    
+      
+    
    
+  
+    
    
+      
    Community Resources
    
+      
+    
    
+  
+    
    
+      
    Guides
    
+      
+    
    
+  
+    
    
+      
    Reference
    
+      
+    
    
+  
+    
    
+      
    Flux
    
+      
+    
    
+  
+
+  
+  
+    
    
+      
    Tips
    
+      
+    
    
+  
+
    
+
+
+  
    
+    Edit on GitHub
+    
    
+      Why React?
+    
    
+    
    
+
+    
    React是Facebook和Instagram用來建立使用者介面的JavaScript函式庫. 很多人認為React就是處理 MVC架構中 V 的部份.
    
+
+
    我們建造React用來解決一個問題: 開發資料能隨時間頻繁更新的大型應用程式.
    
+
    簡單(Simple) #
    
+
    簡單意味著你所開發的應用程式外觀任何一部分都要能即時呈現, 並且當資料有所變動時React能自動管理所有UI的更新.
    
+
    陳述(Declarative) #
    
+
    當資料改變時, React概念上就像是點擊了 "刷新" 的按鈕, 並且知道只需更新有改變的部份.
    
+
    建立可組合的元件(Composable Components) #
    
+
    React就是在建造可重用的元件(Components). 事實上, 當你使用React時 唯一 在做的事就是建立元件(Components). 由於它們封裝性高,元件使得程式碼能夠易於重複使用, 測試, 並且容易做到讓關注點分離(separation of concerns easy).
    
+
    指引(Give It Five Minutes) #
    
+
    React挑戰了許多傳統的觀念, 第一次乍看之下這些構想可能看起來有點瘋狂. Give it five minutes 而當閱讀完這篇指引; 這些瘋狂的構想在Facebook和Instagram裡裡外外建立了數以千計的元件(components)之後被證明是可實行的.
    
+
    更多學習資源 #
    
+
    從這裡你能學習到更多建造React背後的動機 this blog post.
    
+
+
+    
    
+      
+      
+        Next →
+      
+    
    
+  
    
+
    
+
+
+    
    
+      
    
+        A Facebook & Instagram collaboration.
    
+        Acknowledgements
+      
    
+      
    
+        © 2013–2016 Facebook Inc.
    
+        Documentation licensed under CC BY 4.0.
+      
    
+    
    
+  
    
+  
    
+
+  
+
+
diff --git a/docs/why-react.html b/docs/why-react.html
index f6057e342c..421bf5b338 100644
--- a/docs/why-react.html
+++ b/docs/why-react.html
@@ -426,25 +426,25 @@
 
 
   
    
-    Edit on GitHub
+    Edit on GitHub
     
    
       Why React?
     
    
     
    
 
-    
    React是Facebook和Instagram用來建立使用者介面的JavaScript函式庫. 很多人認為React就是處理 MVC架構中 V 的部份.
    
+    
    React is a JavaScript library for creating user interfaces by Facebook and Instagram. Many people choose to think of React as the V in MVC.
    
 
-
    我們建造React用來解決一個問題: 開發資料能隨時間頻繁更新的大型應用程式.
    
-
    簡單(Simple) #
    
-
    簡單意味著你所開發的應用程式外觀任何一部分都要能即時呈現, 並且當資料有所變動時React能自動管理所有UI的更新.
    
-
    陳述(Declarative) #
    
-
    當資料改變時, React概念上就像是點擊了 "刷新" 的按鈕, 並且知道只需更新有改變的部份.
    
-
    建立可組合的元件(Composable Components) #
    
-
    React就是在建造可重用的元件(Components). 事實上, 當你使用React時 唯一 在做的事就是建立元件(Components). 由於它們封裝性高,元件使得程式碼能夠易於重複使用, 測試, 並且容易做到讓關注點分離(separation of concerns easy).
    
-
    指引(Give It Five Minutes) #
    
-
    React挑戰了許多傳統的觀念, 第一次乍看之下這些構想可能看起來有點瘋狂. Give it five minutes 而當閱讀完這篇指引; 這些瘋狂的構想在Facebook和Instagram裡裡外外建立了數以千計的元件(components)之後被證明是可實行的.
    
-
    更多學習資源 #
    
-
    從這裡你能學習到更多建造React背後的動機 this blog post.
    
+
    We built React to solve one problem: building large applications with data that changes over time.
    
+
    Simple #
    
+
    Simply express how your app should look at any given point in time, and React will automatically manage all UI updates when your underlying data changes.
    
+
    Declarative #
    
+
    When the data changes, React conceptually hits the "refresh" button, and knows to only update the changed parts.
    
+
    Build Composable Components #
    
+
    React is all about building reusable components. In fact, with React the only thing you do is build components. Since they're so encapsulated, components make code reuse, testing, and separation of concerns easy.
    
+
    Give It Five Minutes #
    
+
    React challenges a lot of conventional wisdom, and at first glance some of the ideas may seem crazy. Give it five minutes while reading this guide; those crazy ideas have worked for building thousands of components both inside and outside of Facebook and Instagram.
    
+
    Learn More #
    
+
    You can learn more about our motivations behind building React in this blog post.