2013年的一段演讲:思考React最佳实践

2013 年 React 刚刚开源的时候,Pete Hunt 作为 React 团队成员,在 JSConf 中讲述关于 React 设计背后的思考。2013年至今已经7年过去,我们能从演讲中窥探一些 React 最开始的一些核心概念,对比目前版本16+,探寻改变与不变,让我们思考技术框架演进的路径。

演讲原文:Pete Hunt: React: Rethinking best practices -- JSConf EU

演讲主题

  • React 是做什么的

  • React 和其他框架有什么不同

  • React 这些特性如何让开发变得更快

React - 一个创建 UI 的框架,渲染 UI 和 相应事件

构建组件 而不是模版

作为软件开发的金科玉律,我们都在讲关键点分析,但究竟什么是关键点分离:

  • 减少耦合 Reduce Coupling

  • 增加内聚 Increase Cohesion

耦合:即程序中某一模块对其他模块的依赖程度 内聚: 模块内部要素直接的归属程度

模版(AngularJS 模式)并不能很好的关注点分离:你的代码一部分在模版里(如 Angular 的 directive),另一部分在 控制器 里。而作为 MVVMView Model 使得 模版展现逻辑展现逻辑标记 不可避免的紧密结合在一起,所以模版并不是关注点分离的实践。

另外,在模版中我们必须不断发明新的概念(如 Vue 的 v-for v-if),但是这些概念已经在js 中存在了,为什么我们不直接使用 JS 呢。

框架能帮你做什么

框架不能帮助你做关注点分离,框架只能提供一个强大的工具帮你达到目的

React 要做的是不是告诉你应该使用 MVC 模式做关注点分离,而是提供一个 React Component 反应组件。React 将一个组件内部对UI的操作放到了一起,对于 React 来说,一个组件内部是高内聚的。对你而言是具有 高内聚对其他组件低耦合。即 React 是 使用组件,通过JS语法,做关注点分离。

因为 React 更关注单个组件,每个组件相对独立,所以 可重用、可组合、可单元测试

意大利面条代码

通过保持小组件,在组件中只关注展示逻辑,防止意大利面条代码,

"With great power comes great responsibility" - Spiderman

JSX

JSX 一种可选择的 HTML 预处理符号,起初设计 JSX 是为了让设计师调整样式更容易(这么说 Facebook 的设计师可以直接调整 HTML 和 CSS 代码么,666)

读取 JSX 会直接生成对应的 JS 代码

每次更新的时候,重新渲染整个组件

数据的每次修改都是罪恶的根源:

我们应该随着时间的推移构建抽象,使得他看起来像是对单个时间点执行的程序。90年代的网站就是这么简单,每次数据修改刷新页面就好。这就是 React 的工作方式,React 组件是一个幂等的方法,他在每一个时间点描述你的UI。

每次重新渲染使得事情变得简单,应为这保证了数据和展现的同步。但是每次重新渲染 DOM 成本非常高,所以我们需要 Virtual DOM

虚拟DOM

使得每次重新渲染变得更快

  • 批量读、写,优化 DOM 操作性能 -> 很快

  • React 自动实现的顶级的事件委托

  • ShouldComponentUpdate 提供一个挂载函数,告诉React 不要去区分树中某一个组件不同。即自定义更新罗觉,决定是否重新渲染

  • SSR:虚拟DOM 可以在 NodeJS 中运行,去渲染一个静态页面,是的页面展示更快并更利于 SEO

总结

  • 组件 而不是 模版

  • 重新渲染 而不是 转换

  • 虚拟DOM 简单 高效