【前端】react认识以及深入了解_react mvvm

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

仅用于开发环境

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

可用于生产环境
react版本号16，可以根据需要更改
2、通过react脚手架，创建项目进行开发部署Create React App
创建React项目，Create React App是快速搭建React单页应用程序的cli工具。

cnpm install -g create-react-app
1

或

yarn add create-react-app -g
1

快速创建一个应用

create-react-app 项目名称（自定义）
1

项目目录架构

• node_modules：node相关的包
• public：默认页面（div#root相当于Vue里的app区域）、manifest文件可通过此文件将页面放置到桌面上（可设置图标，名字）、robot设定不允许爬虫爬的内容
• src：核心目录，index.js核心文件
• .gitignoregit忽视文件
• package文件：依赖、浏览器适配、扩展

3.在终端界面：
进入项目目录

cd 项目名 
1

启动项目

npm run start 
1

最后可以在浏览器看到react项目运行效果。

npm run build
1

打包应用

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';
1
2

1. 函数式组件，比较简单，一般用于静态没有交互事件内容的组件页面。

• 是一种无状态组件，是为了纯展示组件。
• 不会被实例化，整体的渲染性能得到提升。
• 组件不能访问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
1
2
3
4
5
6
7
8
9
10
11