Skip to content

Commit

Permalink
Merge pull request #5126 from bhamodi/white-space
Browse files Browse the repository at this point in the history
File Cleanup.
(cherry picked from commit 5dc2858)
  • Loading branch information
zpao committed Oct 12, 2015
1 parent e4300d9 commit 60e30f1
Show file tree
Hide file tree
Showing 35 changed files with 86 additions and 86 deletions.
2 changes: 1 addition & 1 deletion docs/docs/02.1-jsx-in-depth.ja-JP.md
Original file line number Diff line number Diff line change
Expand Up @@ -216,4 +216,4 @@ var content = (
```

> 注意:
> JSXはHTMLに似ていますが、全く同じではありません。いくつかのキーの違いについては[JSXの理解](/react/docs/jsx-gotchas.html) をご覧ください。
> JSXはHTMLに似ていますが、全く同じではありません。いくつかのキーの違いについては[JSXの理解](/react/docs/jsx-gotchas.html) をご覧ください。
4 changes: 2 additions & 2 deletions docs/docs/02.1-jsx-in-depth.zh-CN.md
Original file line number Diff line number Diff line change
Expand Up @@ -99,7 +99,7 @@ var Nav = React.createClass({displayName: "Nav", });
如果你正在构建一个有很多子组件的组件,比如表单,你也许会最终得到许多的变量声明。

```javascript
// 尴尬的变量声明块
// 尴尬的变量声明块
var Form = MyFormComponent;
var FormRow = Form.Row;
var FormLabel = Form.Label;
Expand Down Expand Up @@ -221,5 +221,5 @@ var content = (
```

> 注意:
>
>
> JSX 类似于 HTML,但不完全一样。参考 [JSX 陷阱](/react/docs/jsx-gotchas-zh-CN.html) 了解主要不同。
4 changes: 2 additions & 2 deletions docs/docs/03-interactivity-and-dynamic-uis.ja-JP.md
Original file line number Diff line number Diff line change
Expand Up @@ -78,7 +78,7 @@ Reactがデータの変更を通知する共通な方法は `setState(data, call

`this.state` UIのstateを表す必要がある最小限の量のデータだけを保持するべきです。このような点で以下のようなものは保持するべきではありません。

* **計算されたデータ:**
* **計算されたデータ:**
stateに基づく事前に計算された値について心配は要りません。 `render()` を用いて、全ての計算を行って、UIの一貫性を保証するよりも簡単です。例えば、stateにリスト化されたアイテムの配列を持っていて、文字列としてその数をレンダリングしたいとして、それらをstateに保持するよりも `render()` メソッドに `this.state.listItems.length + ' list items'` を単純にレンダリングすれば良いのです。
* **Reactのコンポーネント:** 隠れたpropsとstateに基づいて `render()` でそれらをビルドしてください。
* **propsからコピーしたデータ:** 可能であれば、propsを真のソースとして使ってみてください。propsは時とともに変化し得るので、正しくstateにpropsを保持する使い方は、以前の値を知っていることになり得ます。
* **propsからコピーしたデータ:** 可能であれば、propsを真のソースとして使ってみてください。propsは時とともに変化し得るので、正しくstateにpropsを保持する使い方は、以前の値を知っていることになり得ます。
4 changes: 2 additions & 2 deletions docs/docs/04-multiple-components.zh-CN.md
Original file line number Diff line number Diff line change
Expand Up @@ -168,7 +168,7 @@ var MyComponent = React.createClass({
});
```

也可以传递ReactFragment 对象 来做有 key 的子级。详见[Keyed Fragments](create-fragment.html)
也可以传递ReactFragment 对象 来做有 key 的子级。详见[Keyed Fragments](create-fragment.html)

## 数据流

Expand All @@ -182,5 +182,5 @@ React 里,数据通过上面介绍过的 `props` 从拥有者流向归属者
但是,有时候需要做细粒度的性能控制。这种情况下,可以重写 `shouldComponentUpdate()` 方法返回 false 来让 React 跳过对子树的处理。参考 [React reference docs](/react/docs/component-specs.html) 了解更多。

> 注意:
>
>
> 如果在数据变化时让 `shouldComponentUpdate()` 返回 false,React 就不能保证用户界面同步。当使用它的时候一定确保你清楚到底做了什么,并且只在遇到明显性能问题的时候才使用它。不要低估 JavaScript 的速度,DOM 操作通常才是慢的原因。
2 changes: 1 addition & 1 deletion docs/docs/05-reusable-components.ja-JP.md
Original file line number Diff line number Diff line change
Expand Up @@ -227,4 +227,4 @@ Counter.defaultProps = { initialCount: 0 };

### ミックスインはありません

不幸なことに、ES6はミックスインのサポートを行いません。それゆえ、ReactをES6のクラスと一緒に使う際にはミックスインのサポートはありません。代わりに、ミックスインに頼ることなくそれらのユースケースをサポートするのが簡単になるよう努力しています。
不幸なことに、ES6はミックスインのサポートを行いません。それゆえ、ReactをES6のクラスと一緒に使う際にはミックスインのサポートはありません。代わりに、ミックスインに頼ることなくそれらのユースケースをサポートするのが簡単になるよう努力しています。
2 changes: 1 addition & 1 deletion docs/docs/05-reusable-components.md
Original file line number Diff line number Diff line change
Expand Up @@ -257,7 +257,7 @@ ReactDOM.render(<HelloMessage name="Sebastian" />, mountNode);
This simplified component API is intended for components that are pure functions of their props. These components must not retain internal state, do not have backing instances, and do not have the component lifecycle methods. They are pure functional transforms of their input, with zero boilerplate.

> NOTE:
>
>
> Because stateless functions don't have a backing instance, you can't attach a ref to a stateless function component. Normally this isn't an issue, since stateless functions do not provide an imperative API. Without an imperative API, there isn't much you could do with an instance anyway. However, if a user wants to find the DOM node of a stateless function component, they must wrap the component in a stateful component (eg. ES6 class component) and attach the ref to the stateful wrapper component.
In an ideal world, most of your components would be stateless functions because these stateless components can follow a faster code path within the React core. This is the recommended pattern, when possible.
Expand Down
2 changes: 1 addition & 1 deletion docs/docs/06-transferring-props.ko-KR.md
Original file line number Diff line number Diff line change
Expand Up @@ -50,7 +50,7 @@ ReactDOM.render(
## JSX에서 `...`를 사용해 전달하기

> 주의:
>
>
> 아래의 예제에서는 실험적인 ES7 문법이 사용되었기 때문에 `--harmony ` 플래그가 필요합니다. 브라우저에서 JSX 변환기를 사용 중이라면, `<script type="text/jsx;harmony=true">`를 사용해 스크립트를 작성하세요. 자세히 알아보려면 아래의 [잔여 프로퍼티와 스프레드 프로퍼티 ...](/react/docs/transferring-props-ko-KR.html#rest-and-spread-properties-...)를 확인하세요.
때로는 모든 프로퍼티를 일일이 전달 하는것은 지루하고 덧없는 작업입니다. 이 경우 [구조 해체 할당(destructuring assignment)](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment)을 다른 프로퍼티를 함께 사용해 미상의 프로퍼티를 추출할 수 있습니다.
Expand Down
4 changes: 2 additions & 2 deletions docs/docs/06-transferring-props.zh-CN.md
Original file line number Diff line number Diff line change
Expand Up @@ -83,7 +83,7 @@ ReactDOM.render(
```

> 注意:
>
>
> 上面例子中,`checked` 属性也是一个有效的 DOM 属性。如果你没有使用解构赋值,那么可能无意中把它传下去。
在传递这些未知的 `other` 属性时,要经常使用解构赋值模式。
Expand Down Expand Up @@ -126,7 +126,7 @@ var FancyCheckbox = React.createClass({
```

> 注意:
>
>
> 顺序很重要,把 `{...other}` 放到 JSX props 前面会使它不被覆盖。上面例子中我们可以保证 input 的 type 是 `"checkbox"`

Expand Down
36 changes: 18 additions & 18 deletions docs/docs/07-forms.zh-CN.md
Original file line number Diff line number Diff line change
Expand Up @@ -7,33 +7,33 @@ next: working-with-the-browser-zh-CN.html
---

诸如 `<input>``<textarea>``<option>` 这样的表单组件不同于其他组件,因为他们可以通过用户交互发生变化。这些组件提供的界面使响应用户交互的表单数据处理更加容易。

关于 `<form>` 事件详情请查看 [表单事件](/react/docs/events-zh-CN.html#form-events)

## 交互属性
## 交互属性

表单组件支持几个受用户交互影响的属性:

* `value`,用于 `<input>``<textarea>` 组件。
* `checked`,用于类型为 `checkbox` 或者 `radio``<input>` 组件。
* `selected`,用于 `<option>` 组件。

在 HTML 中,`<textarea>` 的值通过子节点设置;在 React 中则应该使用 `value` 代替。
在 HTML 中,`<textarea>` 的值通过子节点设置;在 React 中则应该使用 `value` 代替。

表单组件可以通过 `onChange` 回调函数来监听组件变化。当用户做出以下交互时,`onChange` 执行并通过浏览器做出响应:

* `<input>``<textarea>``value` 发生变化时。
* `<input>``checked` 状态改变时。
* `<option>``selected` 状态改变时。
和所有 DOM 事件一样,所有的 HTML 原生组件都支持 `onChange` 属性,而且可以用来监听冒泡的 `change` 事件。

和所有 DOM 事件一样,所有的 HTML 原生组件都支持 `onChange` 属性,而且可以用来监听冒泡的 `change` 事件。

> 注意:
>
> 对于 `<input>` and `<textarea>``onChange` 替代 — 一般应该用来替代 — the DOM's 内建的 [`oninput`](https://developer.mozilla.org/en-US/docs/Web/API/GlobalEventHandlers/oninput) 事件处理。
## 受限组件

## 受限组件

设置了 `value``<input>` 是一个*受限*组件。 对于受限的 `<input>`,渲染出来的 HTML 元素始终保持 `value` 属性的值。例如:

Expand All @@ -42,7 +42,7 @@ next: working-with-the-browser-zh-CN.html
return <input type="text" value="Hello!" />;
}
```

上面的代码将渲染出一个值为 `Hello!` 的 input 元素。用户在渲染出来的元素里输入任何值都不起作用,因为 React 已经赋值为 `Hello!`。如果想响应更新用户输入的值,就得使用 `onChange` 事件:

```javascript
Expand Down Expand Up @@ -72,7 +72,7 @@ next: working-with-the-browser-zh-CN.html

当心,在力图标准化复选框与单选按钮的变换处理中,React使用`click` 事件代替 `change` 事件。在大多数情况下它们表现的如同预期,除了在`change` handler中调用`preventDefault``preventDefault` 阻止了浏览器视觉上更新输入,即使`checked`被触发。变通的方式是要么移除`preventDefault`的调用,要么把`checked` 的触发放在一个`setTimeout`里。


## 不受限组件

没有设置 `value`(或者设为 `null`) 的 `<input>` 组件是一个*不受限*组件。对于不受限的 `<input>` 组件,渲染出来的元素直接反应用户输入。例如:
Expand Down Expand Up @@ -102,14 +102,14 @@ next: working-with-the-browser-zh-CN.html
> 注意:
>
> `defaultValue``defaultChecked` props 只能在内部渲染时被使用。 如果你需要在随后的渲染更新值, 你需要使用 [受限组件](#受限组件).

## 高级主题


### 为什么使用受限组件?

在 React 中使用诸如 `<input>` 的表单组件时,遇到了一个在传统 HTML 中没有的挑战。比如下面的代码:
在 React 中使用诸如 `<input>` 的表单组件时,遇到了一个在传统 HTML 中没有的挑战。比如下面的代码:

```html
<input type="text" name="title" value="Untitled" />
Expand All @@ -136,7 +136,7 @@ next: working-with-the-browser-zh-CN.html
<!-- 反例:在 React 中不要这样使用! -->
<textarea name="description">This is the description.</textarea>
```

对 HTML 而言,让开发者设置多行的值很容易。但是,React 是 JavaScript,没有字符限制,可以使用 `\n` 实现换行。简言之,React 已经有 `value``defaultValue` 属性,`</textarea>` 组件的子节点扮演什么角色就有点模棱两可了。基于此, 设置 `<textarea>` 值时不应该使用子节点:

```javascript
Expand All @@ -146,7 +146,7 @@ next: working-with-the-browser-zh-CN.html
如果 *非要* 使用子节点,效果和使用 `defaultValue` 一样。


### 为什么 `<select>` 使用 `value` 属性
### 为什么 `<select>` 使用 `value` 属性

HTML 中 `<select>` 通常使用 `<option>``selected` 属性设置选中状态;React 为了更方面的控制组件,采用以下方式代替:

Expand Down
2 changes: 1 addition & 1 deletion docs/docs/08-working-with-the-browser.ja-JP.md
Original file line number Diff line number Diff line change
Expand Up @@ -32,7 +32,7 @@ var MyComponent = React.createClass({
ReactDOM.findDOMNode(this.refs.myTextInput).focus();
},
render: function() {
// この参照属性はコンポーネントがマウントされた時に、
// この参照属性はコンポーネントがマウントされた時に、
// this.refs のコンポーネントへの参照を追加します。
return (
<div>
Expand Down
2 changes: 1 addition & 1 deletion docs/docs/08-working-with-the-browser.ko-KR.md
Original file line number Diff line number Diff line change
Expand Up @@ -137,7 +137,7 @@ _마운트된_ 합성 컴포넌트들은 다음과 같은 메소드를 지원합

### 크로스 브라우징 이슈

React가 브라우저별 차이점을 썩 잘 추상화하긴 했지만 일부는 한정적이거나 우리가 발견하지 못한 이상한(quirky) 동작을 보여주기도 합니다.
React가 브라우저별 차이점을 썩 잘 추상화하긴 했지만 일부는 한정적이거나 우리가 발견하지 못한 이상한(quirky) 동작을 보여주기도 합니다.


#### IE8에서의 onScroll 이벤트
Expand Down
12 changes: 6 additions & 6 deletions docs/docs/08-working-with-the-browser.zh-CN.md
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@ next: more-about-refs-zh-CN.html
React提供了强大的抽象机制使你在大多数情况下免于直接接触DOM,但有时你仅仅只需要访问底层API,也许是为了与第三方库或者已有的代码协作。


## 虚拟DOM
## 虚拟DOM

React如此快速是因为它从不直接操作DOM。React维持了一个快速的内存中的DOM表示。`render()` 方法返回一个DOM的*描述*,然后React能根据内存中的描述diff此描述来计算出最快速的方法更新浏览器。

Expand Down Expand Up @@ -76,14 +76,14 @@ React提供生命周期方法,以便你可以指定钩挂到这个过程上。
### 挂载

* `getInitialState(): object` 在组件挂载前被调用. 有状态组件(Stateful components) 应该实现此函数并返回初始state的数据。
* `componentWillMount()` 在挂载发生前被立即调用。
* `componentDidMount()` 在挂载发生后被立即调用。 需要DOM node的初始化应该放在这里。
* `componentWillMount()` 在挂载发生前被立即调用。
* `componentDidMount()` 在挂载发生后被立即调用。 需要DOM node的初始化应该放在这里。


### 更新

* `componentWillReceiveProps(object nextProps)` 当挂载的组件接收到新的props时被调用。此方法应该被用于比较`this.props``nextProps`以用于使用`this.setState()`执行状态转换。
* `shouldComponentUpdate(object nextProps, object nextState): boolean` 当组件决定任何改变是否要更新到DOM时被调用。作为一个优化实现比较`this.props``nextProps``this.state``nextState` ,如果React应该跳过更新,返回`false`
* `shouldComponentUpdate(object nextProps, object nextState): boolean` 当组件决定任何改变是否要更新到DOM时被调用。作为一个优化实现比较`this.props``nextProps``this.state``nextState` ,如果React应该跳过更新,返回`false`
* `componentWillUpdate(object nextProps, object nextState)` 在更新发生前被立即调用。你不能在此调用`this.setState()`
* `componentDidUpdate(object prevProps, object prevState)` 在更新发生后被立即调用。

Expand All @@ -108,7 +108,7 @@ _Mounted_ 复合组件同样支持以下方法:
除了这种哲学外,我们也采用了这样的立场,我们,作为一个JS库的作者,不应该把polyfills作为我们库的一部分。如果所有的库这样做,就有很大的机会发送同样的polyfill多次,这可能是一个相当大的无用代码。如果你的产品需要支援老的浏览器,你很有可能已经在使用某些东西比如[es5-shim](https://github.com/es-shims/es5-shim)


### 需要用来支持旧浏览器的Polyfills
### 需要用来支持旧浏览器的Polyfills

来自 [kriskowal's es5-shim](https://github.com/es-shims/es5-shim)`es5-shim.js` 提供了如下React需要的东西:

Expand All @@ -135,7 +135,7 @@ _Mounted_ 复合组件同样支持以下方法:
当在IE8里使用HTML5元素,包括`<section>`, `<article>`, `<nav>`, `<header>`, 和 `<footer>`, 同样必须包含[html5shiv](https://github.com/aFarkas/html5shiv) 或者类似的脚本。


### 跨浏览器问题
### 跨浏览器问题

尽管React在抽象浏览器不同时做的相当好,但一些浏览器被限制或者表现出怪异的行为,我们没能找到变通的方案解决。

Expand Down
8 changes: 4 additions & 4 deletions docs/docs/08.1-more-about-ref-zh-CN.md
Original file line number Diff line number Diff line change
Expand Up @@ -49,7 +49,7 @@ next: tooling-integration-zh-CN.html
```javascript
// 反模式:不能工作.
render: function() {
var myInput = <input />; // 我打算在这个上调用这个方法
var myInput = <input />; // 我打算在这个上调用这个方法
this.rememberThisInput = myInput; // input在未来的某个时间点上!YAY!
return (
<div>
Expand Down Expand Up @@ -165,10 +165,10 @@ React 假设你可以向任何的从`render()` 中返回的组件附加一个特

- 执行 DOM操作,总是要求诸如`<input />` 这样的一个“原生”组件,并通过`this.refs.myInput` 来访问她的低层的MOD 节点。Refs是可以做成这个事的唯一的实践可行的方法。

- Refs自动管理!如果孩子被销毁了,它的ref也被销毁。在这里不用担心内存(除非你做了一些疯狂的事情来自己保持一个引用)。
- Refs自动管理!如果孩子被销毁了,它的ref也被销毁。在这里不用担心内存(除非你做了一些疯狂的事情来自己保持一个引用)。

### 小心:

- *绝对不要* 在组件的render方法内部- 获 当任何组件的render方法还在调用栈中执行的时候,访问refs 。
- *绝对不要* 在组件的render方法内部- 获 当任何组件的render方法还在调用栈中执行的时候,访问refs 。
- 如果你想要保护Google 闭包编译器崩溃的内力,确保绝不作为访问一个被特别的设置为一个字符串的属性。这就意味着,如果你用`ref="myRefString"` 来定义你的ref的话,你必须使用`this.refs['myRefsString']` 来访问。
- 如果你不是用React做服务器编程的,在你的程序中,你首先的倾向是用refs来“让事情发生“。如果这是正是你的情况的话,花点时间,仔细的想想`state` 在这个组件的结构层次中应在在哪里使用。通常,正确的"拥有" 状态的地方是结构层次的高层。把状态放在那些地方通常可以消除使用`ref` 来”让事情发生” 的渴望 - 相反的,数据流通常能完成你的目标。
- 如果你不是用React做服务器编程的,在你的程序中,你首先的倾向是用refs来“让事情发生“。如果这是正是你的情况的话,花点时间,仔细的想想`state` 在这个组件的结构层次中应在在哪里使用。通常,正确的"拥有" 状态的地方是结构层次的高层。把状态放在那些地方通常可以消除使用`ref` 来”让事情发生” 的渴望 - 相反的,数据流通常能完成你的目标。

0 comments on commit 60e30f1

Please sign in to comment.