React简介
React是Facebook推出的一个JavaScript库,只是用来与用户界面打交道,可以把它看成MVC中的V这一层。
其口号就是“构建用户界面的JS库”,主要用于构建UI界面,2013开源。
特点:
- 声明式设计、
- 高效(采用虚拟DOM实现DOM的渲染,最大限度减少DOM操作)
- 灵活(跟其他库灵活搭配使用)
- JSX(JS里面写HTML,JS语法的扩展)
- 组件化和模块化(代码容易复用)
- 单向数据流(没有数据的双向绑定)数据–视图–事件–数据
React、MVC的关系
- react中的JSX,包括其中的渲染逻辑,可以看作V,连同其背后的render/diff,负责组件的渲染。
- react组件本身的state和prop,可以看作M,负责组件的数据状态,M并不仅限于组件树共享的state。
- 组件本身封装的事件/行为,可以认为是C,负责设置和改变数据,C并不仅限于redux的action。
在未接入redux的情况下,单个的功能型组件,其本身可以看作局部的MVC模型。
React、MVVM的关系
- React可以作为MVVM中的第二个V,也就是VIEW,但是并不是MVVM框架。
- MVVM的最显著特征是双向绑定,React没有这个,它是单向数据绑定的。
- React是一个单向数据流的库,状态驱动视图。
react整体是函数式的思想,把组件设计成纯组件,状态和逻辑通过参数传入,所以在react中,是单向数据流,推崇结合immutable来实现数据不可变。
创建REACT项目
1、通过标签引入,仅用于学习调试使用
<script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
仅用于开发环境
<script crossorigin src="https://unpkg.com/react@16/umd/react.production.min.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js"></script>
可用于生产环境
react版本号16,可以根据需要更改
2、通过react脚手架,创建项目进行开发部署Create React App
创建React项目,Create React App是快速搭建React单页应用程序的cli工具。
cnpm install -g create-react-app
或
yarn add create-react-app -g
快速创建一个应用
create-react-app 项目名称(自定义)
项目目录架构
- node_modules:node相关的包
- public:默认页面(div#root相当于Vue里的app区域)、manifest文件可通过此文件将页面放置到桌面上(可设置图标,名字)、robot设定不允许爬虫爬的内容
- src:核心目录,index.js核心文件
- .gitignoregit忽视文件
- package文件:依赖、浏览器适配、扩展
3.在终端界面:
进入项目目录
cd 项目名
启动项目
npm run start
最后可以在浏览器看到react项目运行效果。
npm run build
打包应用
JSX语法
JSX特殊语法:标签为被编译成React.createElement("标签名",参数props{},"标签内容");
可以任意使用JS表达式,只需要用一个大括号把表达式括起来,每一个react元素事实上都是一个javaScript对象,可以在程序中把它当保存在变量中或者作为参数传递。
JSX不是标准的ECMAScript语法,它是ECMAScript的语法拓展,需要使用Babel编译处理后,才能在浏览器环境中使用。
JSX优点:
1.执行更快,编译为JS代码时进行优化
2.类型更安全,编译过程及时发现错误
3.JXS编写模板更加简单快速
JSX书写规范
表达式:由html元素构成,ReactDOM.render 来渲染元素。元素使用JSX的语法,创建JS元素对象。render方法返回需要展示在屏幕上的视图的层次结构,描述了希望在屏幕上看到的内容。对渲染内容的轻量级描述,render返回了一个react元素。
- 使用小括号包裹JSX,从而避免JS中自动插入分号报错,方便阅读。
- JSX元素对象或组件对象必须只有一个父元素
- {}中间可以使用表达式,且只能放一个表达式,可以使用JSX对象
- 变量、属性和HTML内容一样都是用{}来插入内容
- HTML样式类名要写className,因为class在js中是关键词
JSX style要求:
1.class,style中不可以存在多个类属性
2.style中,如果存在多个单词的类属性组合,第二个单词开始首字母大写,或者用引号引出来
3.多个类共存可以通过<div class={“bgc”+classStr}></div>
4.注释{/**/}
组件
组件是对特定的功能进行封装。特点是:独立、可复用、可组合。
React中定义组件并没有像Vue这样的组件模版文件,React中组件一切都是以JS来表现的。
组件分类
统一import:
import React from 'react';
import ReactDOM from 'react-dom';
- 函数式组件,比较简单,一般用于静态没有交互事件内容的组件页面。
- 是一种无状态组件,是为了纯展示组件。
- 不会被实例化,整体的渲染性能得到提升。
- 组件不能访问this对象,无法访问生命周期的方法。
- 组件名第一个字母必须大写,正常的HTML元素小写,调用方法不用加括号。
function Childcom(props){
let title=<h1>函数式组件</h1>
let weather=props.weather
// console.log(props);
let question= weather==='rain'?"no":"yes"
const sayHi = () =>{
alert('hi')
}
return(
<div>
{title}
<div