React设计思路

React作为前端主流的UI库，逐渐占据了前端的大半壁江山。所以哪个前端如果不知道React， 那基本上可以算是大大的落伍了.
在这里，主要聊聊

• 什么是React?
• 为什么是React?
• React是如何实现的？
• React的未来

什么是React?

React是一个UI库，所以 React的核心定位和使命是解决UI的问题.
传统意义上操作UI的做法是:

• 触发一个行为
• 以某种方式获取DOM
• 以某种方式更新DOM

React的做法:

• 触发一个行为
• 更新数据

React相对于传统的UI库有几个明显的不同

• 抹去DOM的概念(除了一些特殊的场合需要操作原生的DOM). 这会带来额外的收益
  • 如果没有DOM的话，那是不是一套逻辑可以应用在桌面端，移动端？答案是肯定的.
  • 最近几年加入前端界的朋友是不需要学习DOM的，这样学习成本就低了些.
• 开发者只需要关注数据和UI之间的关系, UI=render(data). 具体一点, 关注
  • 数据如何存取？
  • 拿到数据之后，如何构建一个好的数据模型为UI服务？
  • 操作数据

为什么是React?

React能得到快速的发展，离不开下面几个因素：

• 大厂的加持。这年头背后得有个有钱的爸爸才能发展的好啊。
• 繁荣的生态。单纯的React解决不了大问题。 还需要配上Redux, redux-router一系列相关的类库和框架.
• 比较好的设计理念， UI=render(data). 相比于之前的库和框架，这个设计理念是React独有的

React是如何实现的？

这里不打算讨论非常细的东西，比如组件的生命周期，如何更新组件的状态等等。
从宏观角度来看，在React实现上有两个绕不过去的概念

• JSX

    class HelloMessage extends React.Component {
    render() {
      return (
        <div>
          Hello {this.props.name}
        </div>
      );
    }
  }

  看return里面的内容，是不是很熟悉？不就是模板么？对，如果非要说成模版也没错。 但在React这里可不可能这么叫，咱得换个说法，不然怎么显示出React和别人不一样呢？
  从语法层面，这个叫JSX.
  从抽象的角度来说，这个叫组件.
  从实现的角度来说这个叫Virtual DOM
  传通的UI设计是要分离CSS, Html和JS的， 这种分类的维度是基于技术层面的划分. JSX认为一段CSS, 一段Html, 一段JS组合在一起才算是一个完整意义上的实体，是可以单独交付出去的。所以这里带来了前端思维方式的变化。

• Diff算法
  上面说过，React对开发者是抹去了Dom的概念，但Web的展示还是基于Dom的，所以要将Virual DOM转为 真实DOM。 如何以一种更快更好的方式将Virtual DOM转为真实 DOM呢? 以后有时间单独讨论.

React的未来

• React的设计理念, UI=render(data)在未来很长一段时间内很会稳定.
• React和Vue的生态之间的竞争是一个看点.
• React的许可协议将来会不会有变数？