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

UI编程的缺陷

1.状态更新，UI不会自动更新，需要手动地调用DOM进行更新。
2.欠缺基本的代码层面的封装和隔离，代码层面没有组件化。
3.UI之间的数据依赖关系，需要手动维护，如果依赖链路长，则会遇"Callback Hell"。

React相较于UI的优势

1.状态更新，UI自动更新
2.前端代码组件化，可复用，可封装。
3.状态之间的互相依赖关系，只需声明即可。

初识React

React 是一个声明式，高效且灵活的用于构建用户界面的 JavaScript 库。Facebook 在 2013 年发布了 React。在当时 React 已经被用于 Facebook 内部用来解决许多问题。严格来说 React 本身并不是框架，而是一个用来渲染用户界面组件的库。React 被用来组合其它用来构建应用的库——React 和React Native让开发者能够用 JavaScript 构建移动应用；React 和ReactDOM使他们能够被用来制作 web 应用程序等。 因为 React 和 ReactDOM 被经常放在一起使用，通俗地讲，React 可以被理解为是一个 JavaScript 框架。 React 用类似 HTML 的语法的JSX拓展了 JavaScript。

框架	浏览器支持	DSL 偏好	支持的 DSL
React	现代的浏览器 （IE9+ with Polyfills）	JSX	JSX、 TypeScript
Vue	IE9+	基于 HTML	基于 HTML、JSX、Pug

React的设计思路——组件化

1.组件声明了状态和UI的映射。
2.组件有Props/State两种状态。
3"组件"可由其他组件拼装而成。

如何调整

• 不同类型的元素→替换
• 同类型的DOM元素→更新
• 同类型的组件元素→递归

应用结构

moz-todo-react
├── README.md
├── node_modules
├── package.json
├── package-lock.json
├── .gitignore
├── public
│   ├── favicon.ico
│   ├── index.html
│   └── manifest.json
└── src
    ├── App.css
    ├── App.js
    ├── App.test.js
    ├── index.css
    ├── index.js
    ├── logo.svg
    └── serviceWorker.js        （源 https://developer.mozilla.org/zh-CN/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_getting_started）

学习过程中发现了React官方入门教程入门教程: 认识 React – React (reactjs.org)，之后将继续实践。
本文内容来源于React 入门 - 学习 Web 开发 | MDN (mozilla.org)、入门教程: 认识 React – React (reactjs.org)和今日课程《响应式系统与React》