react 基础语法

react 基础语法

react 介绍

React是一个简单的javascript UI库，用于构建高效、快速的用户界面。它是一个轻量级库，因此很受欢迎。它遵循组件设计模式、声明式编程范式和函数式编程概念，以使前端应用程序更高效。它使用虚拟DOM来有效地操作DOM。它遵循从高阶组件到低阶组件的单向数据流。
根据官方的介绍，react 是一个用于构建用户界面的库，但是由于react拥有一系列的生态技术（react-router、react-redux），我们一般把 react 当做是一个框架。

为什么使用React?

1.传统方法频繁操作DOM，性能无法达到要求；React使用VDOM，性能高。
2.传统JS代码维护成本高，React基于组件开发。

需要支持移动端开发。

组件设计模式并不是编程通用的设计模式，如常说的单例模式、抽象工厂模式、建造者模式、工厂模式、原型模式等。而是在设计 React 组件时的一些解决方案与技巧，包括以下几种：

1.容器与展示组件
2.高阶组件
3.render props
4.组合组件
5.继承

react 特点

• 声明式设计：前端多了一个 vm 层，vm 一变化，v 就自动更新。
• 高效：主要是针对对比之前的 jquery 时代，因为不用手动操作节点了。
• JSX：在 react 中，通过 JSX 来描述视图。
• 虚拟DOM：如果每次有一点更新，就立马去操作真实的DOM，这个开销是很大的，所以在 react中，提出了虚拟DOM 的概念，通过 js 对象来描述DOM树结构
• 单项数据流：
• state：驱动应用的数据源
• view：以声明方式将 state 映射到视图
• actions：响应在 view 上的用户输入导致的状态变化
• 简单的单向数据流（unidirectional data flow）是指用户访问 View，View 发出用户交互的 Action，在 Action里对 State 进行相应更新。State 更新后会触发 View 更新页面的过程。

这样数据总是清晰的单向进行流动，便于维护并且可以预测

diff 算法：当用户对视图进行更新的时候，先去更新虚拟 DOM，这里说的进行更新，不是在原来的树上面进行更新，而是生成一颗新的树，接下来两棵树就可以进行对比，从而找到不一样的地方，进行更新。

缺点：

1.对于一直使用JS，jQuery的传统前端，React非常不友好。
2.React强调组件和状态管理，其世界观是面向程序语言的。
3.Vue.js强调视图的自动同步，其世界观是面向UI脚本的。
4.React的学习成本较Vue.js高。
5.React没有全家桶。

前期学习基本语法， 使用 cdn 来引入 react

    <script src="https://cdn.staticfile.org/react/16.4.0/umd/react.development.js"></script>
    <!-- 提供与 DOM 相关的功能 -->
    <script src="https://cdn.staticfile.org/react-dom/16.4.0/umd/react-dom.development.js"></script>
    <