• 一、 React简介
• 二、专注视图层
• 三、Virtual DOM
• 四、函数式编程
• 五、总结

• 参考资料
  • 《深入 React 技术栈》

一、 React简介

• React 是 A JavaScript library for building user interfaces, UI 库，构建组件库的库
  • React 把用户的界面抽象成一个个组件。
  • 开发者通过组合这些组件，得到功能丰富、可交互的界面。
  • 并且引入了 JSX 语法，组件间很大程度解耦了，使复用组件变得容易，同时保证组件结构清晰，利于开发和后期维护。
    • 通过 webpack 和 babel 将 react 编译成合法的 js 代码，实际上就是将 jsx 语法转化成 js 语法

二、专注视图层

• React 并不是完整的 MVC/MVVM 框架，它专注于提供清晰、简洁的 View（视图）层解决方案。
• 而又与模板引擎(如：ejs)不同，React 不仅专注于解决 View 层的问题，又是一个包括 View 和 Controller 的库。
• 对于复杂的应用，可以根据应用场景自行选择业务层框架，并根据需要搭配 Flux、Redux、GraphQL/Relay 来使用。

三、Virtual DOM

• Virtual DOM 可以说是 React 的一大特点！

• 我们都知道，DOM 操作是非常昂贵的，恰恰在前端开发中，性能消耗最大的也是DOM 操作。

• 而在React中，React 把真实 DOM 树转换成 JavaScript 对象树，即 Virtual DOM。
• 每次数据更新后，重新计算 Virtual DOM，并和上一次生成的 Virtual DOM 做对比，对发生 变化的部分做批量更新。

• Virtual DOM 的缺点：为对比 DOM 节点需要计算资源
• Virtual DOM 的优点：方便和其他平台集成
  • 比如 react-native 是基于 Virtual DOM 渲染出原生控件，因为 React 组件可以映射为对应的原生控件。
  • 在输出的时候，是输出 Web DOM，还是 Android 控件，还是 iOS 控件，就由平台本身决定了。

四、函数式编程

• 函数式编程是 React 的精髓！

• 过去，工业界的编程方式一直以命令式编程为主，像 C 和 Java 等都是由命令式编程构建的
• 而函数式编程，对应的是声明式编程，它是人类模仿自己逻辑思考方式发明出来的。
  • 声明式编程的本质是 lambda 演算①。
  • 试想当我们操作数组的每个元素并返回一个新数组时，如果是计算机的思考方式，则是需要一个新数组，然后遍历原数组，并计算赋值；
  • 如果是人的思考方式，则是构建一个规则，这个过程就变成构建一个 f 函数作用在数组上，然后返回新数组。
  • 这样，计算可以被重复利用。

• 对于上面这段话我是这样理解的：
  • 命令式编程就像一次性筷子，只能用一次，等你下次要用的时候，只能重新再用一双新的一次性筷子
  • 函数式编程就是“铁木”筷子，你这次用了，洗干净后，下一次又可以重新用了。
  • 而在 React 中，很明显不是命令式编程，而是函数式编程。
  • React 把过去要不断重复构建 UI 的过程抽象成组件（实际上，一个组件就是一个函数），通过向组件传递参数去控制组件应该如何在页面上渲染。
  • 函数式编程减少了冗余的代码，并且易于我们复用，当你向用哪一个组件，直接调用就可以了！

五、总结

• React 是一个UI库，主攻View层，但它又可以结合其他库，实现其他的应用逻辑。
• React 引入 JSX 语法，实现组件化，并且不是直接操作 DOM，而是对比前后 Virtual DOM，根据数据是否变化，决定是否需要更新。