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>
<