From 5e9df47e04b3a429399ed57603dc4906ef65ffe3 Mon Sep 17 00:00:00 2001 From: iamchenxin Date: Thu, 24 Sep 2015 22:48:20 +0800 Subject: [PATCH] [docs] Sync up zh-CN docs Sync up with current en docs. --- docs/02.2-jsx-spread.zh-CN.md | 2 +- docs/02.3-jsx-gotchas.zh-CN.md | 4 +- .../03-interactivity-and-dynamic-uis.zh-CN.md | 2 +- docs/04-multiple-components.zh-CN.md | 26 ++-------- docs/05-reusable-components.zh-CN.md | 51 ++++++++++++++++++- docs/06-transferring-props.zh-CN.md | 10 ++-- docs/07-forms.zh-CN.md | 47 ++++++++--------- 7 files changed, 85 insertions(+), 57 deletions(-) diff --git a/docs/02.2-jsx-spread.zh-CN.md b/docs/02.2-jsx-spread.zh-CN.md index 13d2eb97..ac4dd957 100644 --- a/docs/02.2-jsx-spread.zh-CN.md +++ b/docs/02.2-jsx-spread.zh-CN.md @@ -25,7 +25,7 @@ next: jsx-gotchas-zh-CN.html 这样是反模式，因为 React 不能帮你检查属性类型（propTypes）。这样即使你的 属性类型有错误也不能得到清晰的错误提示。 -Props 应该被当作禁止修改的。修改 props 对象可能会导致预料之外的结果，所以最好不要去修改 props 对象。 +Props 应该被认为是不可变的。在别处修改 props 对象可能会导致预料之外的结果，所以原则上这将是一个冻结的对象。 ## 展开属性（Spread Attributes） diff --git a/docs/02.3-jsx-gotchas.zh-CN.md b/docs/02.3-jsx-gotchas.zh-CN.md index a086cb37..61da0c0c 100644 --- a/docs/02.3-jsx-gotchas.zh-CN.md +++ b/docs/02.3-jsx-gotchas.zh-CN.md @@ -46,7 +46,7 @@ HTML 实体可以插入到 JSX 的文本中。
{['First ', ·, ' Second']}
``` -万不得已，可以直接使用原始 HTML。 +万不得已，可以直接[插入原始HTML](/react/tips/dangerously-set-inner-html.html)。 ```javascript
@@ -60,7 +60,7 @@ HTML 实体可以插入到 JSX 的文本中。
``` -以 `aria-` 开头的 [网络无障碍] 属性可以正常使用。 +以 `aria-` 开头的 [网络无障碍](http://www.w3.org/WAI/intro/aria) 属性可以正常使用。 ```javascript
diff --git a/docs/03-interactivity-and-dynamic-uis.zh-CN.md b/docs/03-interactivity-and-dynamic-uis.zh-CN.md index 812a51b6..8d747596 100644 --- a/docs/03-interactivity-and-dynamic-uis.zh-CN.md +++ b/docs/03-interactivity-and-dynamic-uis.zh-CN.md @@ -44,7 +44,7 @@ React 里只需把事件处理器（event handler）以骆峰命名（camelCased 在幕后，React 做了一些操作来让代码高效运行且易于理解。 -**Autobinding:** 在 JavaScript 里创建回调的时候，为了保证 `this` 的正确性，一般都需要显式地绑定方法到它的实例上。有了 React，所有方法被自动绑定到了它的组件实例上。React 还缓存这些绑定方法，所以 CPU 和内存都是非常高效。而且还能减少打字！ +**Autobinding:** 在 JavaScript 里创建回调的时候，为了保证 `this` 的正确性，一般都需要显式地绑定方法到它的实例上。在 React，所有方法被自动绑定到了它的组件实例上（除非使用ES6的class符号）。React 还缓存这些绑定方法，所以 CPU 和内存都是非常高效。而且还能减少打字！ **事件代理 ：** React 实际并没有把事件处理器绑定到节点本身。当 React 启动的时候，它在最外层使用唯一一个事件监听器处理所有事件。当组件被加载和卸载时，只是在内部映射里添加或删除事件处理器。当事件触发，React 根据映射来决定如何分发。当映射里处理器时，会当作空操作处理。参考 [David Walsh 很棒的文章](http://davidwalsh.name/event-delegate) 了解这样做高效的原因。 diff --git a/docs/04-multiple-components.zh-CN.md b/docs/04-multiple-components.zh-CN.md index 7684b6ee..2e717ff5 100644 --- a/docs/04-multiple-components.zh-CN.md +++ b/docs/04-multiple-components.zh-CN.md @@ -57,7 +57,7 @@ React.render( ## 从属关系 上面例子中，`Avatar` 拥有 `ProfilePic` 和 `ProfileLink` 的实例。`拥有者` 就是给其它组件设置 `props` 的那个组件。更正式地说， -如果组件 `Y` 在 `render()` 方法是创建了组件 `X`，那么 `Y` 就拥有 `X`。上面讲过，组件不能修改自身的 `props` - 它们总是与它们拥有者设置的保持一致。这是保持用户界面一致性的关键性原则。 +如果组件 `Y` 在 `render()` 方法是创建了组件 `X`，那么 `Y` 就拥有 `X`。上面讲过，组件不能修改自身的 `props` - 它们总是与它们拥有者设置的保持一致。这是保持用户界面一致性的基本不变量。 把从属关系与父子关系加以区别至关重要。从属关系是 React 特有的，而父子关系简单来讲就是DOM 里的标签的关系。在上一个例子中，`Avatar` 拥有 `div`、`ProfilePic` 和 `ProfileLink` 实例，`div` 是 `ProfilePic` 和 `ProfileLink` 实例的**父级**（但不是拥有者）。 @@ -147,7 +147,8 @@ var MyComponent = React.createClass({ ); } }); - +``` +```javascript // 正确 :) var ListItemWrapper = React.createClass({ render: function() { @@ -167,26 +168,7 @@ var MyComponent = React.createClass({ }); ``` -也可以传递 object 来做有 key 的子级。object 的 key 会被当作每个组件的 `key`。但是一定要牢记 JavaScript 并不总是保证属性的顺序会被保留。实际情况下浏览器一般会保留属性的顺序，**除了** 使用 32位无符号数字做为 key 的属性。数字型属性会按大小排序并且排在其它属性前面。一旦发生这种情况，React 渲染组件的顺序就是混乱。可能在 key 前面加一个字符串前缀来避免： - -```javascript - render: function() { - var items = {}; - - this.props.results.forEach(function(result) { - // 如果 result.id 看起来是一个数字（比如短哈希），那么 - // 对象字面量的顺序就得不到保证。这种情况下，需要添加前缀 - // 来确保 key 是字符串。 - items['result-' + result.id] =
  • {result.text}
    • ; - }); - - return ( -
      - {items} -
    - ); - } -``` +也可以传递ReactFragment 对象 来做有 key 的子级。详见[Keyed Fragments](create-fragment.html) ## 数据流 diff --git a/docs/05-reusable-components.zh-CN.md b/docs/05-reusable-components.zh-CN.md index 986f9d74..b84b6371 100644 --- a/docs/05-reusable-components.zh-CN.md +++ b/docs/05-reusable-components.zh-CN.md @@ -26,7 +26,7 @@ React.createClass({ optionalString: React.PropTypes.string, // 所有可以被渲染的对象：数字， - // 字符串，DOM 元素或包含这些类型的数组。 + // 字符串，DOM 元素或包含这些类型的数组(or fragment) 。 optionalNode: React.PropTypes.node, // React 元素 @@ -150,7 +150,7 @@ var SetIntervalMixin = { this.intervals.push(setInterval.apply(null, arguments)); }, componentWillUnmount: function() { - this.intervals.map(clearInterval); + this.intervals.forEach(clearInterval); } }; @@ -181,3 +181,50 @@ React.render( ``` 关于 mixin 值得一提的优点是，如果一个组件使用了多个 mixin，并用有多个 mixin 定义了同样的生命周期方法（如：多个 mixin 都需要在组件销毁时做资源清理操作），所有这些生命周期方法都保证会被执行到。方法执行顺序是：首先按 mixin 引入顺序执行 mixin 里方法，最后执行组件内定义的方法。 + +## ES6 Classes + +你也可以以一个简单的JavaScript 类来定义你的React classes。使用ES6 class的例子: + +```javascript +class HelloMessage extends React.Component { + render() { + return
    Hello {this.props.name}
    ; + } +} +React.render(, mountNode); +``` + +API近似于 `React.createClass` 除了 `getInitialState`。 你应该在构造函数里设置你的`state`，而不是提供一个单独的 `getInitialState` 方法。 + +另一个不同是 `propTypes` 和 `defaultProps` 在构造函数而不是class body里被定义为属性。 + +```javascript +export class Counter extends React.Component { + constructor(props) { + super(props); + this.state = {count: props.initialCount}; + } + tick() { + this.setState({count: this.state.count + 1}); + } + render() { + return ( +
    + Clicks: {this.state.count} +
    + ); + } +} +Counter.propTypes = { initialCount: React.PropTypes.number }; +Counter.defaultProps = { initialCount: 0 }; +``` + +### 无自动绑定 + +方法遵循正式的ES6 class的语义，意味着它们不会自动绑定`this`到实例上。你必须显示的使用`.bind(this)` or [箭头函数](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Functions/Arrow_functions) `=>`. + +### 没有 Mixins + +不幸的是ES6的发布没有任何mixin的支持。因此，当你在ES6 classes下使用React时不支持mixins。作为替代，我们正在努力使它更容易支持这些用例不依靠mixins。 + diff --git a/docs/06-transferring-props.zh-CN.md b/docs/06-transferring-props.zh-CN.md index d9087d7c..08ceebf6 100644 --- a/docs/06-transferring-props.zh-CN.md +++ b/docs/06-transferring-props.zh-CN.md @@ -11,18 +11,17 @@ React 里有一个非常常用的模式就是对组件做一层抽象。组件 可以使用 [JSX 展开属性](/react/docs/jsx-spread-zh-CN.html) 来合并现有的 props 和其它值： ```javascript -return ; + ``` 如果不使用 JSX，可以使用一些对象辅助方法如 ES6 的 `Object.assign` 或 Underscore `_.extend`。 ```javascript -return Component(Object.assign({}, this.props, { more: 'values' })); +React.createElement(Component, Object.assign({}, this.props, { more: 'values' })); ``` 下面的教程介绍一些最佳实践。使用了 JSX 和 ES7 的还在试验阶段的特性。 - ## 手动传递 大部分情况下你应该显式地向下传递 props。这样可以确保只公开你认为是安全的内部 API 的子集。 @@ -48,9 +47,12 @@ React.render( 但 `name` 这个属性怎么办？还有 `title`、`onMouseOver` 这些 props？ - ## 在 JSX 里使用 `...` 传递 +> 注意: +> +> 在下面的例子中，`--harmony ` 标志是必须的因为这个语法是ES7的实验性语法。如果用浏览器中的JSX转换器，以 `