当你调用setState()过程中，发生了什么？
当调用 setState 时，React会做的第一件事情是将传递给 setState 的对象合并到组件的当前状态。这将启动一个称为和解（reconciliation）的过程。和解（reconciliation）的最终目标是以最有效的方式，根据这个新的状态来更新UI。 为此，React将构建一个新的 React 元素tree（您可以将其视为 UI 的对象表示），一旦有了这个tree，为了弄清 UI 如何响应新的状态而改变，React 会将这个新树与上一个元素树相比较（ diff ）。通过这样做， React 将会知道发生的确切变化，并且通过了解发生什么变化，只需在绝对必要的情况下进行更新即可最小化 UI 的占用空间。如何看待react中的keys？
Keys 是 React 用于追踪哪些列表中元素被修改、被添加或者被移除的辅助标识。
每个 keys 在兄弟元素之间是独一无二的。我们已经谈过几次关于和解（reconciliation）的过程，而且这个和解过程（reconciliation）中的一部分正在执行一个新的元素树与最前一个的差异。keys 使处理列表时更加高效，因为 React 可以使用子元素上的 keys 快速知道元素是新的还是在比较树时才被移动。而且 keys 不仅使这个过程更有效率，而且没有 keys ，React 不知道哪个本地状态对应于移动中的哪个项目。所以当你 map 的时候，不要忽略了 keys 。react性能优化的方法
说起React的性能分析，还得从它的生命周期和渲染机制说起：缩短shouldComponentUpdate()方法的执行时间(或者不执行)。
没必要的渲染，shouldComponentUpdate()应该返回false。
实用工具检测性能：Perf 是react官方提供的性能分析工具。Perf最核心的方法莫过于Perf.printWasted(measurements)
了，该方法会列出那些没必要的组件渲染。很大程度上，React的性能优化就是干掉这些无谓的渲染。有童鞋开发了Chrome扩展程序“React Perf”（戳这里）。相比自己在代码中插入Perf方法进行分析，这个小工具更加灵活方便，墙裂推荐！针对列表遍历类型，遍历时候增加唯一 key 属性值，对子组件进行唯一性识别，准确知道要操作的子组件，提高 DOM Diff 的效率。
react 相关摘录
最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
- 文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
- 文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
- 文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
推荐阅读更多精彩内容
- 原教程内容详见精益 React 学习指南，这只是我在学习过程中的一些阅读笔记，个人觉得该教程讲解深入浅出，比目前大...
- 数月前，Facebook 对外宣布了正在开发的 React Native 框架，这个框架允许你使用 JavaScr...
- kmokidd ·3 天前 本篇为联合翻译，译者：寸志，范洪春，kmokidd，姜天意 数月前，Facebook ...
