首页 > 其他分享 >[Web Fronted] 前端框架： React

[Web Fronted] 前端框架： React

时间：2025-01-04 11:22:13浏览次数：1  
标签：Web react DOM dom React Fronted https ReactDOM

序

  • 部分开源项目是基于 Web 前端框架 React 构建的，有必要了解一二。

避免一脸懵逼，不知道怎么修改相关代码和配置

概述: React

React 的简介

  • React 起源于 Facebook 的内部项目

因为该公司对市场上所有 JavaScript MVC 框架 都不满意，就决定自己写一套，用来架设 Instagram 的网站。
做出来以后，发现这套东西很好用，就在2013年5月开源了。

  • React 是一个用于动态构建用户界面的 JavaScript 库(只关注于视图)。

React主要用于构建UI，很多人认为 React 是 MVC 中的 V（视图）。
React 拥有较高的性能，代码逻辑非常简单，越来越多的人已开始关注和使用它。

React 的特点

  1. 声明式设计与编码 − React采用声明范式，可以轻松描述应用。

  2. 高效 − React通过对DOM的模拟，最大限度地减少与DOM的交互。

高效（优秀的Diffing算法）

  1. 灵活 − React可以与已知的库或框架很好地配合。

  2. JSX − JSX 是 JavaScript 语法的扩展。React 开发不一定使用 JSX ，但我们建议使用它。

  3. Component & 组件化编码 − 通过 React 构建组件，使得代码更加容易得到复用，能够很好的应用在大项目的开发中。

  4. 单向响应的数据流 − React 实现了单向响应的数据流，从而减少了重复代码，这也是它为什么比传统数据绑定更简单。

单向数据绑定

  1. 虚拟 DOM

  2. React Native 编写原生应用

React 高效的原因

  • 使用虚拟(virtual)DOM, 不总是直接操作页面真实DOM。
  • DOM Diffing算法, 最小化页面重绘。

React 官网

React 的主要原理

  • 传统的web应用，操作DOM一般是直接更新操作的

但是我们知道DOM更新通常是比较昂贵的。
而React为了尽可能减少对DOM的操作，提供了一种不同的而又强大的方式来更新DOM，代替直接的DOM操作。
就是VirtualDOM,一个轻量级的虚拟的DOM，就是React抽象出来的一个对象，描述dom应该什么样子的，应该如何呈现。
通过这个Virtual DOM去更新真实的DOM，由这个Virtual DOM管理真实DOM的更新。

  • 为什么通过这多一层的Virtual DOM操作就能更快呢？ > + 这是因为React有个diff算法，更新VirtualDOM并不保证马上影响真实的DOM，React会等到事件循环结束，然后利用这个diff算法，通过当前新的dom表述与之前的作比较，计算出最小的步骤更新真实的DOM。

最明显的一点好处就是React所谓的 dom diff ，能够实现delta级别的dom更新。
当有数据变动导致DOM变动时，React不是全局刷新，而是通过它内部的dom diff 算法计算出不同点，然后以最小粒度进行更新。
这也是React号称性能好的原因。

Facebook为什么要建造React

  • Facebook的工程师在做大型项目时，由于他们非常巨大的代码库和庞大的组织，使得MVC很快变得非常复杂，每当需要添加一项新的功能或特性时，系统的复杂度就成级数增长，致使代码变得脆弱和不可预测，结果导致他们的MVC正在土崩瓦解,所以Facebook认为MVC不适合大规模应用，当系统中有很多的模型和相应的视图时，其复杂度就会迅速扩大，非常难以理解和调试，特别是模型和视图间可能存在的双向数据流动。

基于上面的原因，Facebook认为MVC无法满足他们的扩展需求，为了解决上述问题需要“以某种方式组织代码，使其更加可预测”，于是他们提出的Flux和React来实现。

React Hello World Application

Hello World Application

<!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>Hello, React Application!</title>
    <!-- 引入 React 核心库 -->
    <!-- <script src="../js/react.development.js"></script> -->
    <script src="https://unpkg.com/react@18/umd/react.development.js"></script>
    <!-- 引入 react-dom 用于支持 react 操作 DOM -->
    <!-- <script src="../js/react-dom.development.js"></script> -->
    <script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>

    <!-- 引入babel：
        1. ES6 ==> ES5
        2. jsx ==> js
    -->
    <!-- <script src="../js/babel.min.js"></script> -->
    <!-- 生产环境中不建议使用 | 在浏览器中使用 Babel 来编译 JSX 效率是非常低的 -->
    <script src="https://unpkg.com/babel-standalone@6.26.0/babel.min.js"></script>
</head>
<body>
    <!-- 准备好一个 DOM 容器 -->
    <div id="test"></div>


    <!-- 方式1 -->
    <!-- <script type="text/babel">
        // 1. 创建虚拟 DOM
        const VDOM = <h1>Hello，React</h1>

        // 2. 渲染到页面中的指定 DOM
        // ReactDOM.render(虚拟DOM，真实DOM)
        ReactDOM.render(VDOM,document.getElementById('test'))
    </script> -->


    <!-- 方式2 -->
    <script type="text/babel">
    // 简单的 React 组件
    function App() {
        return <h1>Hello, React Application!!</h1>;
    }
    
    const root = ReactDOM.createRoot(document.getElementById("test"));
    // 渲染 React 组件到 DOM
    root.render(<App />);
    </script>
</body>
</html>

效果

基础库的导入

  • React 库: 用于构建用户界面。
  • ReactDOM 库：用于在浏览器中渲染 React 组件。
  • Babel Standalone 库：用于在浏览器中即时编译 JSX 语法。（不建议生产环境中使用）
<script src="https://lf26-cdn-tos.bytecdntp.com/cdn/expire-1-M/react/18.2.0/umd/react.production.min.js"></script>
<script src="https://lf3-cdn-tos.bytecdntp.com/cdn/expire-1-M/react-dom/18.2.0/umd/react-dom.production.min.js"></script>

<!-- 生产环境中不建议使用 | 在浏览器中使用 Babel 来编译 JSX 效率是非常低的 -->
<script src="https://lf9-cdn-tos.bytecdntp.com/cdn/expire-1-M/babel-standalone/6.26.0/babel.min.js"></script>

除了通过 javascript 导入3个基础库的方式外，还可以使用 create-react-app 工具创建的 react 开发环境：

import React from "react";
import ReactDOM from "react-dom";

function Hello(props) {
  return <h1>Hello World!</h1>;
}

ReactDOM.render(<Hello />, document.getElementById("root"));

Y 推荐资源

  • 官网
  • 快速入门教程

https://react.docschina.org/learn
教程：井字棋游戏 | https://react.docschina.org/learn/tutorial-tic-tac-toe
React 哲学 | https://react.docschina.org/learn/thinking-in-react

  • 在线编辑与效果试验
  • React JS Download & CDN
  • React 官方

http://react-cn.github.io/react/downloads.html

<!-- 生产环境中不建议使用 | 在浏览器中使用 Babel 来编译 JSX 效率是非常低的 -->
<script src="https://unpkg.com/babel-standalone@6.26.0/babel.min.js"></script>

//development
<script src="https://unpkg.com/react@18/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>

<script src="https://fb.me/react-0.14.3.js"></script>
<script src="https://fb.me/react-dom-0.14.3.js"></script>

<script src="https://fb.me/react-with-addons-0.14.3.js"></script>
<script src="https://fb.me/react-dom-0.14.3.js"></script>


//production
<script src="https://fb.me/react-0.14.3.min.js"></script>
<script src="https://fb.me/react-dom-0.14.3.min.js"></script>

<script src="https://fb.me/react-with-addons-0.14.3.min.js"></script>
<script src="https://fb.me/react-dom-0.14.3.min.js"></script>

//npm方式
var React = require('react');
var ReactDOM = require('react-dom');
ReactDOM.render(<App />, ...);
  • 字节跳动的 React CDN 库
react.js: React 的核心库，用于构建用户界面。
react-dom.js: 提供与 DOM 相关的操作，用于在浏览器中渲染 React 组件。
babel.js: 用于将 ES6+ 代码转换为向后兼容的 JavaScript 版本，确保代码在不同浏览器中的兼容性。
  • Staticfile CDN 的 React CDN 库
<script src="https://cdn.staticfile.org/react/18.2.0/umd/react.development.js"></script>
<script src="https://cdn.staticfile.org/react-dom/18.2.0/umd/react-dom.development.js"></script>
<!-- 生产环境中不建议使用 -->
<script src="https://cdn.staticfile.org/babel-standalone/6.26.0/babel.min.js"></script>

<script src="path/to/babel.js"></script>
<script src="path/to/react.js"></script>
<script src="path/to/react-dom.js"></script>

X 参考文献

标签：Web,react,DOM,dom,React,Fronted,https,ReactDOM
From： https://www.cnblogs.com/johnnyzen/p/18651691

相关文章

  • javaweb仓库仓储系统出入库模块设计
    目录项目介绍具体实现截图开发核心技术：写作提纲开发过程思路核心代码部分展示实验方案：详细视频演示源码获取方式项目介绍本系统主要包括管理员和员工；主要包括：主页、个人中心、员工管理、客户信息管理、供应商管理、仓库信息管理、货物类型管理、货物信息管理、货物......
  • SD WebUI必备插件安装，菜鸟轻松成高手！
    一个刚学AI绘画的小菜鸟怎么快速成为StableDiffusionde的高手？答案就是SD插件，只要学会使用SD的各种插件，帮你写正向和负向提示词，修复人脸/身体/手指，高清放大图片，指定人物pose，图片微调等等都可以轻松搞定，善用插件是成为高手必经之路。目录1插件安装方法2基础插件介绍3......
  • vite和webpack有什么区别？
    Vite和Webpack都是现代前端开发中的常见打包工具，它们之间存在一些显著的区别。以下是对这些区别的详细分析：开发环境的响应速度：Vite采用了基于ESModule的开发服务器，只有在需要时才会编译对应的模块，这种方式大幅度提升了开发环境的响应速度。相比之下，Webpack在开发模式下依然......
  • HTML Select Drop Down List Data Source From Web API
    前端，html还是mvc页面，我们想实现一个下拉选单，写<select>指定id或者name，稍后在js代码能获取到它。 #7~#9行，没有参数条件可传，保留为空。#19WebAPI地址。#21为异步方法，看下，#37，是为了不让代码写在一块，Insus.NET已经重构成另一个function,也是本示例中重点核心代码，下面继续看看，......
  • Web安全基础：反序列化漏洞详解（含PHP，Python示例）
    当系统接收和处理外部输入的数据时，可能会通过反序列化过程执行恶意代码或操作。这个漏洞的根本原因在于，系统对反序列化数据的处理不够严格，导致攻击者能够将精心构造的数据注入到反序列化流程中，进而达到远程代码执行、数据篡改、权限提升等目的。序列化与反序列化序列化：将......
  • 发布blazor应用到Linux, 使用nginx作为WebSocket代理
    Blazor使用了SignalR连接,而SignalR使用的是WebSocketWebSocket协议提供了一种创建支持客户端和服务器之间实时双向通信的Web应用程序的方法。作为HTML5的一部分，WebSocket使开发此类应用程序比以前的方法容易得多。大多数现代浏览器都支持WebSocket，包括Chrome、Firefox......
  • React-Router 一站式攻略：从入门到精通，掌握路由搭建与权限管控
    文章目录一、前言二、安装使用npm安装（推荐）使用yarn安装三、基础使用设置路由基础结构定义路由和组件关联直接在组件中定义路由定义单独一个路由表创建导航链接四、核心组件和功能BrowserRouter和HashRouterRoute组件Link组件Switch组件五、路由参数和嵌套路......
  • GitHub Actions 自动构建和部署容器到 Azure Web App
    在当今快速发展的软件开发世界中，持续集成和持续部署（CI/CD）已成为提高效率和保证质量的关键实践。本文将详细介绍如何使用GitHubActions来自动构建Docker容器并将其部署到AzureWebApp。这个自动化流程不仅能节省大量时间，还能显著减少人为错误，让开发团队更专注于代码质......
  • 【Seed-Labs 2.0】Cross-Site Scripting (XSS) Attack Lab (Web Application: Elgg)
    Overview跨站脚本(XSS)是网络应用程序中常见的一种漏洞。攻击者可利用该漏洞向受害者的网络浏览器注入恶意代码（如JavaScript程序）。利用这些恶意代码，攻击者可以窃取受害者的凭证，如会话cookie。利用XSS漏洞可绕过浏览器为保护这些凭证而采用的访问控制策略（即同一来源......
  • 使用Vue3实现Ollama WebUI
    开始大家好呀，最近我在研究LLM，但是是本地大语言模型。其中我主要使用的软件是Ollama。Ollama可以方便的下载及运行LLMOllama提供了一套RESTApi，并且已经有了ollama-js这个库，可以方便的调用接口，所以我们可以自己写一套WebUI。那么为什么不用别人写好的呢？我找了些开源项目，但大......

赞助商

阅读排行

网站主页关于我们联系我们网站地图

本网站内容转载自其他媒体，侵权联系[admin##ips99.com]。

Copyright © 2020-2023 IPS99 版权所有 IPS99