当前位置:   article > 正文

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

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
声明:本文内容由网友自发贡献,不代表【wpsshop博客】立场,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:https://www.wpsshop.cn/w/Li_阴宅/article/detail/797113
推荐阅读
相关标签
  

闽ICP备14008679号