Web前端实训：使用Rust编写React组件
时间：2023-03-28 15:04:34
HTML
Wasm在开始之前，我们先来回顾一下Wasm：WebAssembly是一种二进制指令格式，简称Wasm，可以在适合堆栈的虚拟机上运行。WebAssembly的意义在于成为编程语言的可移植编译目标，使得在Web上部署客户端和服务器应用程序成为可能。Wasm具有紧凑的二进制格式，可为我们提供接近原生的网络性能。随着它变得越来越流行，为许多编译为Web程序集的语言编写了绑定工具。为什么RustRust是一种快速、可靠且节省内存的编程语言。stackoverflow近六年最受欢迎的编程语言中，前端培训一直高居榜首，主要是因为语言本身有很多优点，比如：内存安全、类型安全、数据消除使用前的竞争、编译和建立（并鼓励）零抽象之上的最小运行时间（没有停止世界的垃圾收集器，没有JIT编译器，没有VM）低内存占用（程序可以在资源受限的环境中运行，如小型微控制器）有针对性在裸机上（例如，编写操作系统内核或设备驱动程序，使用Rust作为“高级”汇编器）”此外，Rust在WebAssembly领域的贡献非常大，使用Rust编写WebAssembly非常简单Rust。不过，Rust存在的目的并不是为了代替JavaScript，而是作为他的补充，因为Rust语言的学习曲线非常陡峭，完全替代Web开发机智几乎是不可能的打。因此，我们在Web开发工具链或者前端页面中一般会使用一些工具来进行非常大量的数据计算操作。预备知识在开始开发之前，您需要了解一些预备知识。关于React我就不多说了。让我们来看看与Rust相关的几个重要概念。cargocargo是rust的代码组织和包管理工具，可以类比node.js中的npm。cargo提供了一系列强大的功能，从项目创建、构建到测试、运行到部署，为rust项目管理提供了尽可能完善的手段。同时，它也与rust语言及其编译器rustc本身的各种特性紧密结合。rustuprustup是Rust的安装和工具链管理工具，官网推荐使用rustup安装Rust。rustup在Cargo的bin目录下安装了rustc（rust编译器）和cargo等工具，但这些工具只是Rust工具链中组件的代理，真正起作用的是工具链中的组件。可以使用rustup命令指定不同版本的工具链。wasm-bindgenwasm-bindgen提供了JS和Rust类型之间的桥梁，允许JS使用字符串调用RustAPI，或者使用Rust函数捕获JS异常。wasm-bindgen的核心是使用wasm促进javascript和Rust之间的通信。它允许开发人员直接使用Rust结构、javascript类、字符串和其他类型，而不仅仅是wasm支持的整数或浮点类型。wasm-packwasm-pack由Rust/Wasm工作组开发和维护，是目前最活跃的WebAssembly应用开发工具。wasm-pack支持将代码打包到npm模块中，并附带了一个Webpack插件（wasm-pack-plugin），通过它我们可以轻松地将Rust与现有的JavaScript应用程序结合起来。wasm32-unknown-unknown可以通过rustup的target命令指定编译的目标平台，即编译后的程序运行在哪个操作系统上。wasm-pack使用wasm32-unknown-unknown目标编译代码。好了，现在我们了解了一些关于Rust的知识，下面让我们一起来完成这个Demo。让我们一起做一个演示。在开始之前，请确保您的计算机上已经安装了Node和Rust。可以在命令行分别输入npm和rustup，看看能不能找到命令。如果没有，请先自行安装。初始化一个简单的React程序首先，让我们初始化一个React项目并从命令行执行npminit：然后，我们安装一些开发项目所需的包：$npmireactreact-dom$npmi-Dwebpackwebpack-cliwebpack-dev-serverhtml-webpack-plugin$npmi-Dbabel-corebabel-loader@babel/preset-env@babel/preset-react然后，我们在项目中创建一些常用文件夹：src、page、public、build、和区。我们在页面文件夹中创建一个index.jsx并编写一些测试代码：importReactfrom'react';importReactDOMfrom'react-dom';ReactDOM.render(
codeSecretGardenHello,world!
,document.getElementById('根'));然后，我们为babel和webpack创建两个配置文件：.babelrc:{"presets":["@babel/preset-env","@babel/preset-react"]}webpack.config.js:constHtmlWebpackPlugin=require('html-webpack-plugin');constpath=require('path');module.exports={entry:'./page/index.jsx',输出:{path:path.resolve(__dirname,'dist'),filename:'bundle.[hash].js',},devServer:{compress:true,port:8080,hot:true,static:'./dist',historyApiFallback:true,open:true,},模块：{规则：[{测试：/.(js|jsx)$/，排除：/node_modules/，使用：{loader：'babel-loader'，}，}，]，}，插件：[newHtmlWebpackPlugin({template:${__dirname}/public/index.html,filename:'index.html',}),],mode:'development',devtool:'inline-source-map',};然后，在public下创建一个index.html：
代码秘密花园body> 检查下面你的package.json是否和我的一样：{"name":"react-wasm","version":"1.0.0","description":"ADemoforwritingReactcomponentsinRust","main":"src/index.jsx","scripts":{"dev":"webpackserver"}“关键字”：[]，“作者”：“ConardLi”，“许可证”：“麻省理工学院”，“依赖项”：{“反应”：“^17.0.2”，“反应-dom”：“^17.0。2"},"devDependencies":{"@babel/core":"^7.16.0","@babel/preset-env":"^7.16.4","@babel/preset-react":"^7.16.0","babel-loader":"^8.2.3","html-webpack-plugin":"^5.5.0","webpack":"^5.64.2","webpack-cli":"^4.9.1","webpack-dev-server":"^4.5.0"}}接下来，执行npminstall，然后npmrundev，就可以运行一个非常简单的React应用程序：importRust现在，让我们写我们的Rust组件（别忘了复习上面提到的Rust前置知识），首先我们使用Rust的package管理工具cargo来初始化一个简单的Rust应用：cargoin它--lib。执行后，会创建一个Cargo.toml和一个src/lib.rc文件然后，我们在Cargo.toml中引入wasm-bindgen包，我们还需要告诉编译器这个包是一个cdylib：[package]name="react-wasm"version="1.0.0"edition="2021"[lib]crate-type=["cdylib"][dependencies]wasm-bindgen="0.2"现在，你可以尝试先执行cargobuild:嗯，上面只是为了测试构建，它仍然可以'tsend要使用它，我们需要执行下面的编译目标，执行：$rustuptargetaddwasm32-unknown-unknown指定wasm32-unknown-unknown编译目标，这样我们就可以将它应用到我们的React程序中，我们将给我们src/lib.rs写两个简单的函数：使用wasm_bindgen::prelude::*;[wasm_bindgen]extern"C"{fnalert(s:&str);}[wasm_bindgen]pubfnbig_computation(){alert("这是一个超级耗时的复杂计算逻辑");}[wasm_bindgen]pubfnwelcome(name:&str){alert(&format!("嗨，我是{}，我在代码秘密花园里！",name));}为了确保我们的Rust应用程序正常工作，我们使用wasm32-重新编译它unknown-unknown:$cargobuild--targetwasm32-unknown-unknown然后我们安装命令行工具wasm-bindgen-cli这样我们就可以使用我们创建的WebAssembly代码了：$cargoinstall-fwasm-bindgen-cli安装后，我们可以使用Rust生成的WebAssembly为我们的React代码创建一个包：$wasm-bindgentarget/wasm32-unknown-unknown/debug/react_wasm.wasm--out-dir构建执行后，编译后的JavaScript包和优化后的Wasm代码将保存在我们的构建目录中，以供React程序使用。在React程序中应用Wasm下，让我们尝试在我们的React程序中使用这些Wasm代码。我们现在将一些常用的npm脚本添加到package.json中：debug/rusty_react.wasm--out-dirbuild","build":"npmrunbuild:wasm&&npmrunbuild:bindgen&&npxwebpack",然后我们执行npmrunbuild打包所有代码。接下来，我们还需要安装我们上面提到的wasm-packWebpack插件，它可以帮助我们将Wasm代码打包到NPM模块中：npmi-D@wasm-tool/wasm-pack-plugin最后，更新我们的webpack.config。js，添加如下配置：constWasmPackPlugin=require("@wasm-tool/wasm-pack-plugin");...plugins:[...newWasmPackPlugin({crateDirectory:path.resolve(__dirname,".")}),]...experiments:{asyncWebAssembly:true}接下来，执行这些命令：npmrunbuild:wasm,npmrunbuild:bindgen,npmrunbuild，应该不会报错。最后，我们在React组件中调用刚刚生成的Wasm模块：importReact,{useState}from"react";从“react-dom”导入ReactDOM；constwasm=import("../build/rusty_react");wasm.then(m=>{constApp=()=>{const[name,setName]=useState("");consthandleChange=(e)=>{setName(e.target.value);}consthandleClick=()=>{m.welcome(name);}return(<>
你好
运行计算Sayhello!
);};ReactDOM.render(
,document.getElementById("root"));});接下来，你就可以愉快的在React组件中使用Rust了！文章来自前端开发
