React学习(一)——初步了解，完成ToDoList功能demo

React学习笔记(一)

自用

1. React简介

React是一个用于构建用户界面的JavaScript库，主要用于构建UI。React强调的是面向数据编程。

​ React起源于Facebook的内部项目，起初是因为该公司对所有JavaScript MVC(Model View Controller 模型-视图-控制器)框架都不满意，所以决定自己写一套来架设Instagram网站，后来觉得这套框架很好用，就在2013年五月进行开源推出。其带来了一种全新的函数式编程风格，React的设计思想极其独特，属于革命性创新，性能出众，代码逻辑非常简单，是目前最流行的前端框架。

​ React 是一个全新思路的前端 UI 框架，它完全接管了 UI 开发中最为复杂的局部更新部分，擅长在在复杂场景下保证高性能；同时，它引入了基于组件的开发思想，从另一个角度来重新审视 UI 的构成。通过这种方法，不仅能够提高开发效率，而且可以让代码更容易理解，维护和测试。

React特点

• 声明式
  • React 使创建交互式 UI 变得轻而易举。为你应用的每一个状态设计简洁的视图，当数据改变时 React 能有效地更新并正确地渲染组件。
  • 以声明式编写 UI，可以让你的代码更加可靠，且方便调试。
• 组件化
  • 创建拥有各自状态的组件，再由这些组件构成更加复杂的 UI。
  • 组件逻辑使用 JavaScript 编写而非模版，因此你可以轻松地在应用中传递数据，并使得状态与 DOM 分离。
• 一次学习，随处编写
  • 无论你现在正在使用什么技术栈，你都可以随时引入 React 来开发新特性，而不需要重写现有代码。
  • React 还可以使用 Node 进行服务器渲染，或使用 React Native 开发原生移动应用。

2. 前端三大主流框架

library（库）：小而巧。船小好调头，可以很方便的从一个库切换到另外的库，但是代码几乎不会变。

Framework（框架）：大而全。框架提供了一整套的解决方案，如果在项目中，想切换到另外的框架，会比较困难。

• Angular：2009年推出，被Google收购。学习曲线较长较陡，框架偏重（Angular1与之后的Angular2、Angular3…有断层）已逐渐被淘汰。
• React：2013年推出，得益于其创新式的Virtual DOM，性能出众，一经推出，非常火爆。采用函数式编程，门槛稍高，但也更灵活，能让开发具有更多可能性，是目前使用人数最多的框架，具有健全的文档和完善的社区。
• Vue：2014年推出的轻量级框架，由中国人尤雨溪开发，借鉴了前辈angular和react的特点，使其使用起来更加方便，更容易上手，比较适合初学者，是目前关注人数最多的框架。

React vs Vue

Vue的API设计非常简洁，但是其实现方式却让人感觉是“魔法”，开发者虽然能马上上手，但是为什么能实现功能却很难说清楚。

相比之下React的设计哲学非常简单，虽然经常有需要自己处理各种细节问题，但是却让人感觉它非常“真实”，能清楚地感觉到自己仍然是在写js。

React与Vue中心思想相同：一切都是组件，组件实例之间可以嵌套。

组件化方面

• 组件写法不一样, React推荐的做法是 JSX , 也就是把HTML和CSS全都写进JavaScript了,即’all in js’;
• Vue推荐的做法是webpack+vue-loader的单文件组件格式,即html,css,js写在同一个文件；

数据流方面

• React是单向数据流，代码写起来会较双向数据流的多一些，但是同样的排查问题时思路清晰很多；
• Vue是双向数据流；

开发团队方面

• React是由FaceBook前端官方团队进行维护和更新的; 因此，React的维护开发团队，技术实力比较雄厚;

• Vue:第一版，主要是有作者尤雨溪专门进行维护的，当Vue更新到2.x版本后，也有了一个以尤雨溪为主
  导的开源小团队，进行相关的开发和维护;

社区方面

• 在社区方面，React由于诞生的较早，所以社区比较强大，一些常见的问题、坑、最优解决方案，文档、博客
  在社区中都是可以很方便就能找到;
• Vue由于起步时间较晚，Vue的社区相对于React来说，要小一些，相对没有React的成熟与完善;

移动APP开发体验方面

• Vue, 结合Weex这门技术，提供了迁移到移动端App开发的体验(Weex， 目前只是一 个小的玩具， 并没
  有很成功的大案例;
• React, 结合ReactNative,也提供了无缝迁移到移动App的开发体验(RN用的最多，也是最火最流行的) ;

React的优势

1. 声明式设计，使用虚拟DOM的概念，性能好，速度快。虚拟DOM帮助解决了跨浏览器问题，并为我们提供了标准化的API
2. 复用性高，代码一切皆是组件，更加模块化，重用代码更容易，可维护性高。
3. 高效，纯粹的javascript代码预渲染应用，有助于搜索引擎优化。
4. 灵活，React只是MVC中的View层，自己无法构建大型的应用，需要与已有的框架和库来配合，如：Flux（前端架构） 、Redux（状态管理）、Axios/Fetch（异步请求）等。

3. React基础知识

JSX语法

JSX， 一种 JavaScript 的语法扩展，其格式比较像是模版语言，但事实上完全是在JavaScript内部实现的，它允许 HTML 与 JavaScript 的混写。通常在 React 中使用 JSX 来描述用户界面。 元素是构成 React 应用的最小单位，JSX 就是用来声明 React 当中的元素。

React不一定要使用 JSX，但它有以下优点：

• JSX 执行更快，因为它在编译为 JavaScript 代码后进行了优化。
• 它是类型安全的，在编译过程中就能发现错误。
• 使用 JSX 编写模板更加简单快速。

JSX 看起来类似 HTML：

ReactDOM.render(
    <h1>Hello, world!</h1>,
    document.getElementById('example')
);

为什么使用 JSX？

React 认为渲染逻辑本质上与其他 UI 逻辑内在耦合，比如，在 UI 中需要绑定处理事件、在某些时刻状态发生变化时需要通知到 UI，以及需要在 UI 中展示准备好的数据。

React 并没有采用将标记与逻辑进行分离到不同文件这种人为地分离方式，而是通过将二者共同存放在称之为“组件”的松散耦合单元之中，来实现关注点分离。

React 不强制要求使用 JSX，但是大多数人发现，在 JavaScript 代码中将 JSX 和 UI 放在一起时，会在视觉上有辅助作用。它还可以使 React 显示更多有用的错误和警告消息。

React 组件

React.JS是基于组件化的开发,React框架允许我们将代码封装成组件，然后像插入普通的HTML标签一样，在网页中插入这个组件。

• 组件的第一个字母必须大写
• return中的内容需要用一个大的闭合标签整个包裹起来

//index.js
//引入 React 库
import React from 'react';
import ReactDOM from 'react-dom';
// 引入App组件，以大写字母开头
import App from './App';

//App.js
import React from 'react';
//定义一个React组件
function App() {
   
  return (
    <div className="App">
      Hello World！
    </div>
  );
}

export default App;

在JS中通过React将App组件渲染到页面上

React 认为一个组件应该具有如下特征：

（1）可组合（Composeable）：一个组件易于和其它组件一起使用，或者嵌套在另一个组件内部。如果一个组件内部创建了另一个组件，那么说父组件拥有（own）它创建的子组件，通过这个特性，一个复杂的 UI 可以拆分成多个简单的 UI 组件；

（2）可重用（Reusable）：每个组件都是具有独立功能的，它可以被使用在多个 UI 场景；

（3）可维护（Maintainable）：每个小的组件仅仅包含自身的逻辑，更容易被理解和维护；

（4）可测试（Testable）：因为每个组件都是独立的，那么对于各个组件分别测试显然要比对于整个 UI 进行测试容易的多。

虚拟DOM

文档对象模型（Document Object Model，简称DOM）

1.什么是Virtual DOM

虚拟DOM概念随着react的诞生而诞生，由facebook提出，其卓越的性能很快得到广大开发者的认可。

Virtual DOM 本质上就是在 JS 和 DOM 之间做了一个缓存。可以类比 CPU 和硬盘，既然硬盘这么慢，我们就在它们之间加个缓存：既然 DOM 这么慢，我们就在它们 JS 和 DOM 之间加个缓存。CPU（JS）只操作内存（Virtual DOM），最后的时候再把变更写入硬盘（DOM）。

2.为什么要用Virtual DOM

在浏览器里一遍又一遍的渲染DOM是非常非常消耗性能的，常常会出现页面卡死的情况；所以尽量减少对DOM的操作成为了优化前端性能的必要手段，Virtual DOM就是将DOM的对比放在了js层，通过对比不同之处来选择新渲染DOM节点，从而提高渲染效率。

在传统的 Web 应用中，我们往往会把数据的变化实时地更新到用户界面中，于是每次数据的微小变动都会引起 DOM 树的重新渲染。

虚拟DOM的目的是将所有操作累加起来，统计计算出所有的变化后，统一更新一次DOM，最终实现页面元素的高效更新。

<body>
<!-- DOM 对象 -->
    <div id="app">
    	<ρ class="item">节点1</p>
    </div>
<!-- 在JS中创建的虚拟DOM -->
	<script