{"parents":["4b6e5d06cfd4d31ba7a18bb0a9924ff9c6382ec6"],"body":"add 08.1-more-about-refs.zh-CN.md","files":[{"path":"docs\/docs\/08-working-with-the-browser.zh-CN.md","previousPath":"docs\/docs\/08-working-with-the-browser-zh-CN.md","status":"R100"},{"path":"docs\/docs\/08.1-more-about-refs.zh-CN.md","status":"A"}],"patch":"diff --git a\/docs\/docs\/08-working-with-the-browser-zh-CN.md b\/docs\/docs\/08-working-with-the-browser.zh-CN.md\nsimilarity index 100%\nrename from docs\/docs\/08-working-with-the-browser-zh-CN.md\nrename to docs\/docs\/08-working-with-the-browser.zh-CN.md\ndiff --git a\/docs\/docs\/08.1-more-about-refs.zh-CN.md b\/docs\/docs\/08.1-more-about-refs.zh-CN.md\nnew file mode 100644\nindex 0000000000..5091143c2d\n--- \/dev\/null\n+++ b\/docs\/docs\/08.1-more-about-refs.zh-CN.md\n@@ -0,0 +1,174 @@\n+---\n+id: more-about-refs-zh-CN\n+title: 关于Refs的更多内容\n+permalink: more-about-refs-zh-CN.html\n+prev: working-with-the-browser-zh-CN.html\n+next: tooling-integration-zh-CN.html\n+---\n+从render方法返回你的UI结构以后，你也许发现自己想“接触”并且调用从 `render()`返回的组件实例上的方法。通常，这样做对于让数据流过你的应用并不是必须的，因为Reactive的数据流总是确保最新的`props` 被发送到 `render()`输出的每个子级。然而，有一些情况下它仍旧是必要或者有益的。\n+\n+考虑这样一种场景，当你想要告诉一个`` 元素（存在于你的实例的子层级）在你更新他的值为空字符串后获得焦点。\n+\n+```javascript\n+ var App = React.createClass({\n+ getInitialState: function() {\n+ return {userInput: ''};\n+ },\n+ handleChange: function(e) {\n+ this.setState({userInput: e.target.value});\n+ },\n+ clearAndFocusInput: function() {\n+ this.setState({userInput: ''}); \/\/ Clear the input\n+ \/\/ We wish to focus the now!\n+ },\n+ render: function() {\n+ return (\n+

\n+

\n+ Click to Focus and Reset\n+ <\/div>\n+ \n+ <\/div>\n+ );\n+ }\n+ });\n+```\n+\n+\n+注意，在这个例子中，我们想 \"告诉\" input 一些东西 - 那些最后它不能从他的props推断出来的东西。在这个场景中我们想 \"告诉\" 它，它应该转为获得焦点。然而，有一些挑战。从`render()` 返回的东西不是你实际的 \"子\" 组件的组合，而是一个在某刻特定实例的子组件的 *描述* - 一个快照。 \n+\n+> 注意:\n+>\n+> 记住，从 `render()`返回的东西不是你的 *实际的* 被渲染出的子组件实例。从 `render()` 返回的东西仅仅是一个在特定时间你的组件的子层级中的子实例的 *描述*。 \n+\n+\n+这意味着你万万不要把你从`render()`返回的东西 \"抓住不放\" 然后期望它变成任何有意义的东西。\n+\n+```javascript\n+ \/\/ 反面模式: 这行不通.\n+ render: function() {\n+ var myInput = ; \/\/ I'm going to try to call methods on this\n+ this.rememberThisInput = myInput; \/\/ input at some point in the future! YAY!\n+ return (\n+

\n+

...<\/div>\n+ {myInput}\n+ <\/div>\n+ );\n+ }\n+```\n+\n+在这个例子中，`` 仅仅是一个`` 的 *描述*。这个描述被用于为``创建一个 *真实的* **支持实例(backing instance)** \n+\n+所以我们如何与input的 *真实的*支持实例对话？\n+\n+## ref String 属性\n+\n+React支持一种非常特殊的属性，你可以附加到任何从`render()`输出的组件上。这个特殊的属性允许你引用任何从`render()`返回的东西的对应 **支持实例(backing instance)** 。它总是保证是适当的实例，在任何时点上。\n+\n+就是这么简单:\n+\n+1. 赋值`ref`属性为任何从`render` 返回的东西，比如：\n+\n+ ```html\n+ \n+ ```\n+\n+2. 在其他一些代码中（典型的事件处理代码），通过`this.refs`访问 **支持实例(backing instance)**，如：\n+\n+ ```javascript\n+ this.refs.myInput\n+ ```\n+\n+ 你可以直接通过调用`React.findDOMNode(this.refs.myInput)` 访问组件的DOM node。\n+\n+\n+## ref 回调属性\n+\n+`ref` 属性可以是一个回调函数而不是名字。这个回调函数将会在组件挂载以后立即执行。被引用的组件将被作为参数传递，并且回调函数可以立即使用组件，或者保存引用将来使用（或两者都是）。\n+\n+通过使用ES6的箭头函数，它像添加一个`ref`属性到任何从`render`返回的东西一样简单。\n+\n+```html\n+ render: function() {\n+ return this._input = c} \/>;\n+ },\n+ componentDidMount: function() {\n+ this._input.focus();\n+ },\n+```\n+\n+或者\n+\n+```html\n+ render: function() {\n+ return (\n+ \n+ );\n+ },\n+```\n+\n+注意当被引用的组件卸载和每当ref变动，旧的ref将会被以`null`做参数调用。这阻止了在实例被保存的情况下的内存泄露，如第一个例子。注意当像在这里的例子，使用内联函数表达式写refs，React在每次更新都看到不同的函数对象，ref将会被以`null` 立即调用在它被以组件实例调用前。\n+\n+\n+## 完成的示例\n+\n+```javascript\n+ var App = React.createClass({\n+ getInitialState: function() {\n+ return {userInput: ''};\n+ },\n+ handleChange: function(e) {\n+ this.setState({userInput: e.target.value});\n+ },\n+ clearAndFocusInput: function() {\n+ \/\/ Clear the input\n+ this.setState({userInput: ''}, function() {\n+ \/\/ This code executes after the component is re-rendered\n+ React.findDOMNode(this.refs.theInput).focus(); \/\/ Boom! Focused!\n+ });\n+ },\n+ render: function() {\n+ return (\n+

\n+

\n+ Click to Focus and Reset\n+ <\/div>\n+ \n+ <\/div>\n+ );\n+ }\n+ });\n+```\n+\n+在这个例子中，我们的render函数返回一个 `` 实例的描述。但是真正的实例通过 `this.refs.theInput` 访问。只要带有`ref=\"theInput\"`的子组件从 `render`被返回，`this.refs.theInput` 就可以访问正确的实例。这甚至在更高层(non-DOM)的组件上生效，比如``。\n+\n+\n+## 总结\n+\n+Refs是一种很好的发送消息给特定子实例(通过流式的Reactive `props` 和 `state`来做会不方便)的方式。它们应该，不论怎样，不是你数据流通你的应用的首选。默认方式，使用Reactive数据流并为本身不是reactive的用例保存`ref`。\n+\n+### 优点:\n+\n+- 你可以在你的组件类里定义任何的公开方法（比如在一个Typeahead的重置方法）然后通过refs调用那些公开方法（比如`this.refs.myTypeahead.reset()`）。\n+- 实行DOM测量几乎总是需要接触到\"原生\" 组件比如 `` 并且`React.findDOMNode(this.refs.myInput)`通过访问它的底层DOM 节点。 Refs 是唯一一个可靠的完成这件事的实际方式。\n+- Refs 是为你自动管理的！如果子级被销毁了，它的ref也同样为你销毁了。这里不用担心内存（除非你做了一些疯狂的事情来自己保持一份引用）。\n+\n+### 注意事项:\n+\n+- *绝不* 在任何组件的 render 方法中访问 refs - 或者当任何组件的render方法还在调用栈上的任何地方运行时。\n+- 如果你想要保留Google Closure Compiler Crushing resilience，务必不要把指明为字符串的以属性来访问。这意味这你必须用`this.refs['myRefString']`访问，如果你的ref被定义为`ref=\"myRefString\"`。\n+- 如果你没有用React写过数个程序，你的第一反应通常是打算试着用refs来在你的应用里\"让事情发生\"。如果是这样，花一些时间并且更精密的思考`state`应该属于组件层级的哪个位置。常常，这会变得清晰：正确的\"拥有\"那个属性的地方应该在层级的更高层上。把state放在那里往往消除了任何使用`ref`来 \"让事情发生\"的渴望 - 作为替代，数据流通常将完成你的目录。\n+\n","commit":{"authoredAt":"2015-09-25T03:10:14+08:00","shortRevision":"3fd7686d22","revision":"3fd7686d221ca0c26283da1fc51d729adbcb4f33","authorName":"iamchenxin","subject":"[docs] Update zh-CN docs.","authorEmail":"iamchenxin@gmail.com"}}

dillon1000/react

Files changed