文档介绍：深入浅出 React (一): React 的设计哲学- 简单之美编者按:自 2013 年 Facebook 发布以来, React 吸引了越来越多的开发者,基于它的衍生技术,如 React Native 、 React Canvas 等也层出不穷。 InfoQ 精心策划“深入浅出 React ”系列文章,为读者剖析 React 开发的技术细节。 Reac t 最初来自 Faceboo k 内部的广告系统项目, 项目实施过程中前端开发遇到了巨大挑战, 代码变得越来越臃肿且混乱不堪,难以维护。于是痛定思痛,他们决定抛开很多所谓的“最佳实践”,重新思考前端界面的构建方式,于是就有了 React 。 React 带来了很多开创性的思路来构建前端界面,虽然选择 React 的最重要原因之一是性能,但是相关技术背后的设计思想更值得我们去思考。之前我也曾写过一篇 React 的入门文章,并提供了示例代码,大家可以结合参考。上个月 React 发布了最新的 版, 并提供了对 ES6 的支持。在新版本中, 一个小小的改变是 React 取消了函数的自动绑定,也就是说,以前可以这样去绑定一个事件: <button onClick={}>Submit</button> 而在以 ES6 语法定义的组件中,必须写为: <button onClick={(this)}>Submit</button> 了解前端开发和 JavaScript 的同学都知道, 做事件绑定时我们需要通过 bind ( 或类似函数) 来实现一个闭包以让事件处理函数自带上下文信息,这是由 JavaScript 语言特性决定的。而在 版本之前, React 会自动在初始化时对组件的每一个方法做一次这样的绑定,类似于 =(this) ,这样在 JSX 的事件绑定中就可以直接写为 onClick={} 。表面上看自动绑定给开发带来了便利,而 Facebook 却认为这破坏了 JavaScript 的语言****惯, 其背后的神奇( Magic ) 逻辑或许会给初学者带来困惑, 甚至开发者如果从 React 再转到其它库也可能会无所适从。基于同样的理由, React 还取消了对 mixin 的支持, 基于 ES 6 的 React 组件不再能够以 mixin 的形式进行代码复用或者扩展。尽管这带来了很大不便,但 Facebook 认为 mixin 增加了代码的不可预测性,无法直观的去理解。关于 mixin 的思考, 还可以参考这篇文章。以简单直观、符合****惯的( idiomatic ) 方式去编程, 让代码更容易被理解, 从而易于维护和不断演进。这正是 React 的设计哲学。编写可预测,符合****惯的代码所谓可预测( predictable ),即容易理解的代码。在年初的 React 开发者大会上, Reac t 项目经理 Tom Occhino 进一步阐述 React 诞生的初衷,在演讲中提到, React 最大的价值究竟是什么?是高性能虚拟 DOM 、服务器端 Render 、封装过的事件机制、还是完善的错误提示信息?尽管每一点都足以重要。但