ReactReact全家桶React 概述+虚拟DOM的创建与渲染+JSX

Posted 前端More

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了ReactReact全家桶React 概述+虚拟DOM的创建与渲染+JSX相关的知识,希望对你有一定的参考价值。

文章目录


参考链接:

1 React 概述

1.1 React 简介与特点

React用于动态构建用户界面的 JS 库(只关注于视图)

  • 是一个将数据渲染为 html 视图的开源 JS 库
  • 它遵循基于组件的方法,有助于构建可重用的 UI 组件
  • 它用于开发复杂的交互式的 web 和移动 UI

原生JS的缺点

  • 原生JS操作DOM繁琐,效率低,直接操作DOM,浏览器会进行大量的重绘重排
  • 原生JS没有组件化编码方案,代码复用率很低

React的特点

  • 使用虚拟DOM和Diff算法,尽量复用DOM节点,减少与真实DOM的交互
  • 使用 JSX,代码的可读性更好
  • 组件化模式,提高代码复用率、且让代码更好维护
  • 声明式编程, 让编码人员无需直接操作DOM,提高开发效率
  • 在 React Native中可以使用React语法进行移动端开发

1.2 相关补充:命令式与声明式编程、重绘与重排、模块化与组件化、虚拟DOM

命令式编程与声明式编程

  • 命令式编程:用详细的命令机器怎么去处理一件事情以达到你想要的结果.
    例如你想通过点击改变页面中某一个元素,首先要获取按钮,再给按钮添加点击事件,获取要改变的元素,执行点击函数,改变元素达到自己的目的,这是一步一步的步骤操作,就如同给计算机发布命令,一步一步执行,这就是命令式编程
  • 声明式编程:你只需要告诉计算机,你要得到什么样的结果,计算机则会完成你想要的结果,以React为例,在页面中通过 显示一个变量,你只需要改变这个变量,页面就会跟着刷新,这就是你只需要结果,React 内部去处理过程,这就是声明式编程

重绘与重排

  • 重绘(repaint):当一个元素的外观发生改变,但没有改变布局,重新把元素外观绘制出来的过程
  • 重排(reflow):当DOM的变化影响了元素的几何信息(DOM对象的位置和尺寸大小),浏览器需要重新计算元素的几何属性,将其安放在界面中的正确位置的过程

模块化与组件化
业务逻辑: 举个例子比如淘宝双12举办活动,那些活动页面的逻辑,什么时候显示,在某些情况下显示什么,在另外一些情况下又该显示什么 ,这就是业务逻辑
传统开发模式的主要问题:命名冲突、文件依赖, 通过模块化可解决上述问题

  • 模块: 一个JS文件就是一个模块,模块内部定义的变量和函数默认情况下在外部无法得到

  • 模块化:从业务逻辑角度或功能需要角度划分的,按照项目功能需求划分成不同类型的业务框架(例如:注册、登录、外卖、直播…) ,目的: 隔离、分装

  • 把单独的一个功能封装到一个模块(js文件)中,模块之间相互隔离,但是可以通过特定的接口公开内部成员,也可以依赖别的模块

  • 优点: 方便代码的重用,从而提升开发效率,并且方便后期的维护

传统方式编写应用的问题:依赖关系混乱、代码复用率不高, 通过组件化可解决上述问题

  • 组件: 可复用的 Vue/React 实例
  • 组件化: 从UI界面角度或复用的角度划分的,页面上每个独立的区域都可以看做是一个组件,目的:复用、解耦
  • 一个界面的功能很复杂,将一个页面拆分成一个个小的功能块,每个功能块完成属于自己这部分独立的功能,那么之后整个页面的管理和维护就变得容易了,当应用是以多组件的方式实现, 这个应用就是一个组件化的应用。
  • 最大区别:划分角度不同,都是便于项目的维护和开发。

模块化是对功能的拆分,模块化并没有要求一定组件化,就是说进行模块化拆分时你可以完全不考虑代码重用,只是把同一业务的代码做内聚整合成不同的模块

虚拟DOM

虚拟DOM是JS按DOM(真实DOM)的结构来创建的虚拟树型结构对象,是对DOM的抽象,比DOM更加轻量型(属性更少),本质还是Object类型的对象,虚拟DOM最终会被React转化为真实DOM,呈现在页面上。

2 初识React

2.1 引入相关库

  • react.js:React核心库。

  • react-dom.js:提供操作DOM的React扩展库。

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

    • 浏览器不能直接解析JSX代码, 需要babel转译为纯JS的代码才能运行
    • 只要用了JSX,都要加上type="text/babel", 声明需要babel来处理

2.2 虚拟DOM的创建与渲染

JS 创建虚拟 DOM(一般不用)

<script type="text/JS" > 
//1.创建虚拟DOM,创建嵌套格式的dom
const VDOM=React.createElement('h1',id:'title',React.createElement('span',,'hello,React'))
//2.渲染虚拟DOM到页面
ReactDOM.render(VDOM,document.querySelector('.test'))
</script>

JSX 创建虚拟DOM

//1.创建虚拟DOM
script type="text/babel" > /* 此处一定要写babel */
const VDOM = (  /* 此处一定不要写引号,因为不是字符串 */
    <h1 id="title">
		<span>Hello,React</span>
	</h1>
)
//2.渲染虚拟DOM到页面
ReactDOM.render(VDOM,document.querySelector('.test'))
</script>

虚拟DOM的渲染

语法

//virtualDOM为虚拟dom  containerDOM用来包裹虚拟DOM的真实dom对象
ReactDOM.render(virtualDOM, containerDOM) 

作用: 将虚拟DOM渲染为真实DOM,然后在页面中显示

代码总览

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>hello_react</title>
</head>

<body>
  <!-- 真实DOM对象  根节点-->
  <div id="test"></div>

  <!-- 引入react核心库 -->
  <script type="text/JS" src="../js/react.development.js"></script>
  <!-- 引入react-dom,用于支持react操作DOM -->
  <script type="text/JS" src="../js/react-dom.development.js"></script>
  <!-- 引入babel,用于将jsx转为js -->
  <script type="text/JS" src="../js/babel.min.js"></script>

  <script type="text/babel"> /* 此处一定要写babel */
		//1.创建虚拟DOM
		const VDOM = <h1>Hello,React</h1>  /* 此处一定不要写引号,因为不是字符串 */
		//2.渲染虚拟DOM到页面
		ReactDOM.render(VDOM,document.getElementById('test'))
	</script>
</body>

</html>

3 JSX

3.1 JSX简介

JSX(JS XML)是一种类似于XML的JS扩展语法,用来简化创建虚拟DOM, 在React中可以方便地用来描述UI(用户界面) 。 JSX为我们提供了创建React元素方法(React.createElement(component, props, ...children))的语法糖(简写形式)

写法:

import React from 'react';
//JSX不是字符串, 也不是HTML/XML标签,最终产生的就是一个JS对象
var ele = <h1>Hello, JSX!</h1> 

// 等价于

var element = React.createElement(
  "h1",
  null,
  "Hello, world!"
);

注:

  • 定义虚拟DOM时,不要写引号。只有一个根标签且每个标签必须闭合

  • JSX 语法有时需要小括号( )包裹,避免遇到js自动插入分号的陷阱

  • 内联样式,要用 style= key:value 的形式去写。 React 提倡的是组件思想,万物皆是 JS 控制(用 JS 来写 HTML 和 CSS)。以组件为维度,把 HTML、CSS、JS 混合在一起。React 会自动添加 ”px” 后缀到内联样式为数字的属性后。如需使用 ”px” 以外的单位,请将此值设为数字与所需单位组成的字符串

    style=
         marginBottom: 40,//或'40px' 有px需要加' ' 
         width: 590, 
         height: 590,
         display: 'flex',
         float: 'left', 
         justifyContent: 'flex-end'
    
    

3.2 JSX的基本用法

3.2.1 JSX代表JS对象(Object)

JSX本身也是一个表达式,在编译后,JSX表达式会变成普通的JS对象(Object)。

你可以在if语句或for循环中使用JSX,你可以将它赋值给变量,你可以将它作为参数接收,你也可以在函数中返回JSX。

function getGreeting(user) 
  if (user) 
    return <h1>Hello, formatName(user)!</h1>;
  
  return <h1>Hello, Stranger.</h1>;

    
//上面的代码在if语句中使用JSX,并将JSX作为函数返回值。实际上,这些JSX经过编译后都会变成JS对象。经过babel会变成下面的js代码:
    
function test(user) 
    if (user) 
        return React.createElement(
            "h1",
            null,
            "Hello, ",
            formatStr(user),
            "!"
        );
    
    return React.createElement(
        "h1",
        null,
        "Hello, Stranger."
    );

3.2.2 在JSX中使用JS表达式

在 JSX 语法中,你可以在 内放置任何有效的JS表达式, 例如,2 + 2user.firstNameformatName(user) 都是有效的 JS 表达式。

function formatName(user) 
  return user.firstName + ' ' + user.lastName;


const user = 
  firstName: 'Harper',
  lastName: 'Perez'
;

const element = (
  <h1>
    Hello, formatName(user)!
  </h1>
);

ReactDOM.render(
  element,
  document.getElementById('root')
);

if语句以及for循环不是JS表达式,不能直接作为表达式写在 中,可以先将其赋值给一个变量(变量是一个JS表达式):

function NumberDescriber(props) 
  let description;
  if (props.number % 2 == 0) 
    description = <strong>even</strong>;
   else 
    description = <i>odd</i>;
  
  return <div>props.number is an description number</div>;

JSX还可自动防范注入攻击,在JSX中嵌入接收到的内容是安全的,在默认情况下,React DOM会将所有嵌入JSX的值进行编码。这样可以有效避免xss攻击。比如:

const danger = response.potentialDanger;
cosnt ele = <h1>title</h1>

相关补充 :js表达式与js语句

js表达式:一个表达式会产生一个值,可以放在任何一个需要值的地方

判断方法:在它们左边定义一个变量 const x =xxx 若有返回值就是表达式

下面这些都是表达式:

  • a
  • a+b
  • demo(1) ( 函数调用表达式)
  • arr.map( )
  • x === y ? ‘a’ : ‘b’
  • function test ( )

js语句: 语句可以理解为一个行为,循环语句和判断语句就是典型的语句。下面这些都是语句:

  • if( )
  • for( )
  • switch( )case:xxxx

3.2.3 JSX属性值

可以使用引号字符串字面量指定为属性值或者可以将一个JS表达式嵌在一个大括号 中作为属性值:

//”0”是一个字符串字面量
const element = <div tabIndex="0"></div>

const element = <img src=user.avatarUrl></img>;
//这里用到的是JS属性访问表达式,上面的代码将编译为:
const element = React.createElement("img",  src: user.avatarUrl );

3.2.4 JSX的Children

一个标签里面没有内容,你可以使用 /> 来闭合标签 , JSX 标签里能够包含很多子元素 Children

const element = (
  <div>
    <h1>Hello!</h1>
    <img src=user.avatarUrl />
  </div>
);

标签属性名使用驼峰命名法camelCase , class== > className;,for== >Htmlfor , tabindex== >tabIndex

const element = <div className='demo'></div>

3.2.5 JSX中的props

每个组件都是一个对象,props是对象的一个属性,组件对象可以通过props传递

指定JSX中的props有以下几种方式:

  • 使用JS表达式,任何有效的JS表达式都可以作为props的值,使用的时候将该表达式放在一对大括号 中即可

    <MyComponent foo=1 + 2 + 3 + 4 />
    <YourComponent clickTodo=(id) => this.props.handleClick(id) />
    
  • 字符串字面量可以作为prop值

    <MyComponent message="hello world" />
    // 等价于
    <MyComponent message='hello world' />
    
  • 使用扩展运算符, 你想将一个prop对象传入JSX,你可以使用扩展运算符...直接将整个prop对象传入

    function App1() 
      return <Greeting firstName="Ben" lastName="Hector" />;
    
    
    // 等价于
    
    function App2() 
      const props = firstName: 'Ben', lastName: 'Hector';
      return <Greeting ...props />;
    
    

3.2.6 JSX标签体内容props.children

React组件中有一个特殊的prop–props.children。它指代了JSX表达式中标签体内容。

指定 JSX中的props.children 有以下几种方式:

  • 使用字符串字面量, 在JSX标签体中写入字符串字面量,组件得到的props.children就是该字符串值

    //MyComponent的props.chilren获得”Hello World!”字符串
    <MyComponent>Hello world!</MyComponent>
    
  • JSX元素作为children, 我们同样可以使用JSX元素作为JSX的children,由此生成嵌套组件 , 也可以混合使用字符串字面量和JSX作为children :

    <MyContainer>
      Here is a list:
      <MyFirstComponent />
      <MySecondComponent />
    </MyContainer>
    
  • JS表达式, 和props一样,你也可以将任何有效的JS表达式作为children传入,将它放在 中就可以了。

    <MyComponent>a+b</MyComponent>
    
  • 函数children, 传入自定义组件的children并没有严格的限制,只要在React需要render的时候能将它们转换成可以render的东西就行了

    function ListOfTenThings() 
      return (
        <Repeat numTimes=10>
        //作为一个prop传入
          (index) => <div key=index>This is item index in the list</div>
        </Repeat>
      );
    
    
  • 布尔值、Null以及Undefined, 布尔值,Null以及Undefined可以作为有效的children,但他们不会被render

    <div>
       // <Header />只有在showHeader为true时才会render
        showHeader && <Header />
        <Content />
    </div>
    

3.2.7 自定义组件与元素标签

遇到 < 开头的代码, 观察标签首字母:

  • 小写字母开头,则将该标签转为html中同名元素,若html中无该标签对应的同名元素,则报错。
  • 大写字母开头,React就去渲染对应的组件,若组件没有定义,则报错。
  • 自定义组件首字母要大写,一定引入后在使用,元素标签名不能使用表达式

以上是关于ReactReact全家桶React 概述+虚拟DOM的创建与渲染+JSX的主要内容,如果未能解决你的问题,请参考以下文章

ReactReact全家桶React 生命周期+虚拟DOM+Diff算法

ReactReact全家桶React 生命周期+虚拟DOM+Diff算法

ReactReact全家桶React Router 6

ReactReact全家桶之React Router6

ReactReact全家桶React脚手架

ReactReact全家桶React Hooks