0%

React-基础

React概述

React是一个用于构建用户界面的JavaScript库,React主要来写HTML页面,或构建Web应用,如果从MVC的角度来看,React仅仅是试图层(V),也就是只负责试图的渲染,而并非提供了完整的M和C的功能。

React 起源于 Facebook 的内部项目,后又用来架设 instagram 的网站,并于2013年5月开源

React官网

React的特点

  1. Declarative(声明式编程)
  2. Component-Based(组件化编码)
  3. Learn Once,Write Anywhrer(支持客户与服务器渲染)
  4. 高效
  5. 单向数据流

声明式

你只要描述 UI(HTML) 看起来是什么样,就跟HTML一样

1
2
3
const jsx = <div className="app">
<h1>Hello React! 动态变化数据:{count}</h1>
</div>

组件化编程

  • 组件 React 最重要的内容
  • 组件表示页面中的部分内容
  • 组件、复用多个组件,可以实现完整的页面功能
组件化编程

Learn Once,Write Anywhrer

  • 使用 React 可以开发Web应用
  • 使用 React 可以开发移动端原生应用(react-native)
  • 使用 React 可以开发 VR(虚拟实现)应用(react 360)

跨平台

React高效的原因

  1. 虚拟(virtual)DOM,不总是直接操作DOM
  2. DOM Diff算法,最小化页面重绘

前端三大主流框架

三大框架一大抄 vue.js抄袭Angular.js,Angular2反过来抄vue组件化

  • Angular.js:出来较早的前端的框架,学习曲线比较陡,NG1学习起来比较麻烦,NG2~NG5开始,进行了一些列的改革,也提供了组件化开发的概念;从NG2开始,也支持使用TS(TypeScript)进行编程
  • Vue.js:最火(关注的人比较多)的一门前端框架,它是中国人开发的,对我们来说,文档友好一些;
  • React.js:最流行(用的人比较多)的一门框架,因为它的设计很优秀

React与Vue对比

组件化方面

  1. 什么是模块化: 从代码的角度进 行分析的;把一些可复用的代码,抽离为单个模块;便于项目的维护和开发;
  2. 什么是组件化: 从UI界面的角度 来进行分析的;把一些可复用的UI元素,抽离为单独的组件;
  3. 组件化的好处: 随着项目规模的增大,手里的组件就越来越多;节省开发成本,便于把现有组件,拼接为一个完整的页面。
  4. Vue是如何实现组件化的: 通过 .vue文件,来创建对应的组件;
    • template 结构
    • script 行为
    • style 样式
  5. React是如何让实现组件化的: React中有组件化概念,但是没有像vue这样的组件模板文件;React中,一切都是以js表现的;因此要学习React,JS要合格;ES6和ES7(async和await)要会用。

开发团队方面

  • React是由FaceBook前端官方团队进行维护和更新的;因此,React的维护开发团队,技术实力比较雄厚;
  • Vue:第一版。主要是作者尤雨溪专门进行维护的,当Vue更新到2.x版版本后,也有了一个以尤雨溪为主的开源小团队,进行相关维护;

社区方面

  • 在社区方面,React由于诞生的较早,所以社区比较强大,一些常见的问题、坑、最优解决方案,文档、博客在社区中都是可以很方便就能找到的
  • Vue是近两年才获取来的,所以,在社区方面相对React来说,要小一些,可能有一些坑,还没人踩过。

移动APP开发体验方面

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

React的基本使用

React 的安装

npm i react react-dom

  • react 包是核心,提供创建元素,组件等功能
  • react-dom 包提供 DOM 相关功能等

React 的使用

1.引入 react 和 react-dom 两个js文件

2.创建 React 元素

3.渲染 React 元素到页面中

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>首页</title>
<script src="https://cdn.staticfile.org/react/16.4.0/umd/react.development.js"></script>
<script src="https://cdn.staticfile.org/react-dom/16.4.0/umd/react-dom.development.js"></script>
<!-- 兼容低版本浏览器 -->
<script src="https://cdn.staticfile.org/babel-standalone/6.26.0/babel.min.js"></script>
</head>
<div id="root"></div>
<script type="text/babel"> //告诉babel解析代码
// createElement() 创建Dom节点
// 参数1:元素名称
// 参数2:元素属性
// 第三个及其以后的参数:元素子节点(dom/text)
const span = React.createElement('span',null,'我是span')
const title = React.createElement('h1', {title:'我是标题',id:'box'}, 'hello React!',span);

// ReactDOM.render()渲染到页面某个Dom 节点中
// 参数1:要渲染的react元素
// 参数2:挂载点
ReactDOM.render(title, document.getElementById('root'))
</script>
<body>
</body>
</html>

相关库

react.js:React核心库

react-dom.js:供操作DOM的react扩展库

babel.min.js:解析JSX语法代码转为纯JS语法代码库

React 脚手架

React 脚手架意义

1.脚手架开发 现代 Web 应用必备

2.充分利用Webpack、Babel、ESlint等工具辅助项目开发

3.零配置,无需手动配置繁琐的工具即可使用

4.关注业务,而不是工具配置

使用 React 脚手架初始化项目

1.初始化项目,命令:npx create-react-app my-app(建议使用npm阿里的镜像库)

2.启动项目,在项目的根目录执行命令:npm start

npx命令介绍

  • npm v5.2.0引入的一条命令
  • 目的:提升包内提供的命令行工具的使用体验
  • 原来:先安装脚手架包,再使用这个包中提供的命令
  • 现在:无需安装脚手架包,就可以直接使用这个包提供的命令

补充

1.推荐使用:npx create-react-app my-app

2.npm init creat-app my-app

3.yarn create react-app my-app

  • yean 是 Facebook 发布的包管理器,可以看做是npm的替代品,功能与 npm 相同
  • yran 具有快速、可靠和安全的特点
  • 初始化新项目:yarn init
  • 安装包:yarn add 包名称
  • 安装项目依赖项:yarn
  • 其他命令,请参考 yarn install | Yarn 中文文档 (bootcss.com)

在脚手架中使用 React

1.导入 react 和 react-dom 两个包。

1
2
import React from 'react';
import ReactDOM from 'react-dom';

2.调用 React.createElement()方法创建react 元素

3.调用 ReactDOM.render()方法渲染 react 元素到页面中

1
2
3
4
5
6
7
8
9
// 导入 react
import React from 'react';
import ReactDOM from 'react-dom';

// 创建 react 元素
const title = React.createElement('h1', null, 'hello react');

// 渲染 react 元素
ReactDOM.render(title, document.getElementById('root'))
谢谢老板