{"body":"","patch":"diff --git a\/docs\/docs\/11-advanced-performance.zh-CN.md b\/docs\/docs\/11-advanced-performance.zh-CN.md\nnew file mode 100644\nindex 0000000000..77e770522c\n--- \/dev\/null\n+++ b\/docs\/docs\/11-advanced-performance.zh-CN.md\n@@ -0,0 +1,212 @@\n+---\n+id: advanced-performance-zh-CN\n+title: 提高性能\n+permalink: docs\/advanced-performance-zh-CN.html\n+prev: shallow-compare-zh-CN.html\n+next: context-zh-CN.html\n+---\n+\n+当人们考虑将React应用到自己的系统里时，都会想知道React是否可以和非React的应用一样可以快速的响应各种用户的操作。改变组件的state时，它会重新渲染组件的所有子节点，有人会怀疑这种重新渲染会带来很大的性能开销。但是React使用很多技术来最小化的减少DOM操作的开销达到更新UI的效果。\n+\n+## 使用生产构建版本\n+\n+如果你在开发React应用中，遇到了一些性能上的问题，你可以使用了[minified production build](\/react\/downloads.html)进行测试。这个开发构建版本包括了额外的一些警告信息，可以帮助你更好的调试你的应用。由于它做了很多额外的开销，所以它运行起来会相对要慢一点。\n+\n+## 避免调整真实DOM树\n+\n+React利用*虚拟DOM*,来描述在浏览器上显示的真实DOM树。这种并行的表示方法，可以让React避免直接去操作DOM节点，毕竟操作DOM节点的开销要远远大于直接去操作Javascript的对象。当组件的state或者props更新的时候，React会根据新生成的虚拟DOM和之前的虚拟DOM进行比较，来判断是否需要去更新真实DOM上的内容。只有在前后虚拟DOM不相等的情况下，React才会去[调整](\/react\/docs\/reconciliation.html)真实DOM的结构。\n+\n+在此之上，React提供了一个组件生命周期函数`shouldComponentUpdate`,它会在组件进行重渲染过程开始的时候（虚拟DOM和真实DOM进行对比）进行调用。让开发者可以短接这个过程。该函数默认会返回`true`，让React去执行更新。\n+\n+```javascript\n+shouldComponentUpdate: function(nextProps, nextState) {\n+ return true;\n+}\n+```\n+\n+记住一点，在React中，这个函数调用的非常频繁，所以里面的操作不能太复杂，一定要快。\n+\n+你有几个聊天对话的消息应用程序。假设只有一个对话改变了。如果你在`ChatThread`组件中实现了`shouldComponentUpdate`函数，React可以跳过对其他线程的重渲染的步骤。\n+\n+```javascript\n+shouldComponentUpdate: function(nextProps, nextState) {\n+ \/\/ TODO: return whether or not current chat thread is\n+ \/\/ different to former one.\n+}\n+```\n+\n+所以，总而言之，React可以让开发者使用`shouldComponentUpdate`函数来减少对DOM子树的调整，对于那些需要更新的组件，再进行虚拟DOMs的对比。\n+\n+## shouldComponentUpdate 实战\n+\n+这个一个组件的子树的结构。每一个节点表示`shouldComponentUpdate` return了什么，以及是否虚拟DOMs是相等的。最后，圆的颜色代表这个节点是否需要被重新调整。\n+\n+

dillon1000/react

Files changed