这是我参与「第四届青训营」笔记创作活动的的第4天

UI编程痛点

状态更新困难

状态更新，UI不会自动更新,需要手动地调用DOM进行更新。

组件化程度低

欠缺基本的代码层面的封装和隔离，代码层面没有组件化。

依赖关系复杂

UI之间的数据依赖关系，需要手动维护，如果依赖链路长，则会遇到“Callback Hell”。

响应式系统

响应式系统需要具备这些特征：及时响应性、恢复性、有弹性以及消息驱动。我们把具有上面四个特性的系统就叫做响应式系统。

上面的四个特性中，及时响应性是系统最终要达到的目标，恢复性和有弹性是系统的表现形式，而消息驱动则是系统构建的手段。

组件化

组件化是指解耦复杂系统时将多个功能模块拆分、重组的过程，有多种属性、状态反映其内部特性。把复杂系统拆分成多个组件，分离组件边界和责任，便于独立升级和维护。

组件化编程总结如下：

组件是组件的组合/原子组件
组件内拥有状态，外部不可见
父组件可将状态传入组件内部

示例代码

以下代码很好地体现了React声明式编程和函数式编程的特点：

import React, { useState, useEffect } from 'react '
function Example () {
  const [count, setCount] = useState(0)
  // Similar to componentDidMount and componentDidUpdate:
  useEffect(() => {
    // Update the document title using the browser API
    document.title = `You clicked ${count}times`
  })

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onclick={() => setCount(count + 1)}>
        click me
      </button>
    </div>
  )
}

Virtual DOM（虚拟DOM）

Virtual DOM是一种用于和真实DOM同步，而在JS内存中维护的一个对象，它具有和DOM类似的树状结构，并和DOM可以建立一一对应的关系。

它赋予了React声明式的API:您告诉React希望让U是什么状态，React就确保DOM匹配该状态。这使您可以从属性操作、事件处理和手动DOM更新这些在构建应用程序时必要的操作中解放出来。

React与Vue比较

相同之处

虚拟 DOM。映射真实 DOM，通过新旧 DOM 的 diff 对比，更好的跟踪渲染页面。
组件化。将应用拆分成一个个功能明确的模块，每个模块之间可以通过合适的方式互相联系。
构建工具。都有自己的构建工具，通过 Webpack + Babel 去搭建脚手架。
Chrome 开发工具。两者都有很好的 Chrome 扩展去帮助查找 Bug。
配套框架。Vue 有 Vue-router 和 Vuex，而 React 有 React-router 和 React-Redux

不同之处

模板 VS JSX。Vue 推荐编写近似常规 HTML 的模板进行渲染，而 React 推荐 JSX 的书写方式。
监听数据变化的不同。Vue 使用的是可变数据，而 React 更强调数据的不可变。在 Vue 中通过 v-model 绑定的数据，用户改变输入值后对应的值也相应改变。而 React 需要通过 setState 进行设置变化。
Diff 不同。Vue 通过双向链表实现边对比边更新 DOM，而 React 通过 Diff 队列保存需要更新的 DOM，得到 patch 树，再统一批量更新 DOM。
开发团队。Vue 一开始核心就是 Evan You，后面再招了其他人组成团队；React 的话是一开始就是 Facebook 团队搞的。所以网上的人比对源码情况的话，Vue 的比 React 的简单易懂点。

React框架基本概念入门