React 面向组件编程（下）

最新推荐文章于 2024-09-27 16:23:10 发布
最新推荐文章于 2024-09-27 16:23:10 发布
阅读量3.9k 收藏 31
点赞数 38
分类专栏： React 文章标签： react.js javascript 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_62897746/article/details/129829208
版权

目录

前言：

在React面向组件编程中，除了上一章节的组件实例的三大核心属性以外，还有很多重要的内容比如：React 的生命周期，受控组件与非受控组件，高阶函数和函数柯里化的理解等，在本文中会给大家继续讲解React 面向组件编程中剩余的内容。

一、受控组件与非受控组件

表单的组件分类：

  1. 受控组件
  2. 非受控组件

多数情况下，推荐使用受控组件实现表单。在受控组件中，表单数据由组件控制。
另外一种是非受控组件，这种方式下表单组件由DOM自身控制。

1. 受控组件

  1. 受控组件通过 props 获取其当前值，并通过回调函数(比如 onChange )通知变化
  2. 表单状态发生变化时，都会通知 React，将状态交给 React 进行处理，比如可以使用 useState 存储
  3. 受控组件中，组件渲染出的状态与它的 value 或 checked 属性相对应
  4. 受控组件会更新 state 的流程
class Login extends React.Component {
    // 初始化状态
    state = {
        username:'', // 用户名
        password:'', // 密码
    }
    // 保存用户名到状态中
    saveUsername=(event)=>{
        this.setState({username:event.target.value})
    }
    // 保存密码到状态中
    savePassword=(event)=>{
        this.setState({password:event.target.value})
    }
    // 表单提交的回调
    handleSubmit=(event)=>{
        event.preventDefault(); // 阻止默认事件
        
        let {username,password} = this.state
        alert(`你输入的用户名是${username},密码是${password}`)
    }
    render(){
        return(
            <div>
                <form action="https://www.baidu.com/" onSubmit={this.handleSubmit}>
                    用户名：<input type="text" onChange={this.saveUsername} name="username" />    
                    密码：<input type="text" onChange={this.savePassword} name="password" />
                    <button type="submit">登录</button>  
                </form>
            </div>
        )
    }
}

2. 非受控组件

非受控组件将数据存储在 DOM 中，而不是组件内，这比较类似于传统的 HTML 表单元素。

  1. 非受控组件的值不受组件自身的 state 和 props 控制
  2. 非受控组件使用 ref 从 DOM 中获取元素数据
class Login extends React.Component {
    handleSubmit=(event)=>{
        // console.log(e>=event)
        event.preventDefault(); // 阻止默认事件
        
        let {username,password} = this
        alert(`你输入的用户名是${username.value},密码是${password.value}`)
    }
    render(){
        return(
            <div>
                <form action="https://www.baidu.com/" onSubmit={this.handleSubmit}>
                    用户名：<input type="text" ref={c=>this.username = c} name="username" />    
                    密码：<input type="text" ref={c=>this.password = c} name="password" />
                    <button type="submit">登录</button>  
                </form>
            </div>
        )
    }
}

3. 效果展示

在这里插入图片描述

4. 总结：

  1. React 中的组件分为受控组件和非受控组件
  2. 受控组件的两个要点：
    • 组件的 value 属性与 React 中的状态绑定
    • 组件内声明了 onChange 事件处理 value 的变化
  3. 非受控组件更像是传统的 HTML 表单元素，数据存储在 DOM 中，而不是组件内部，获取数据的方式是通过 ref 引用
  4. 一些建议：
    • 尽可能使用受控组件
    • 受控组件是将状态交由 React 处理，可以是任何元素，不局限于表单元素
    • 对于有大量表单元素的页面，使用受控组件会使程序变得繁琐难控，此时使用非受控组件更为明智
    • 在受控组件中，数据流是单向的( state 是变化来源)，因此在改变 state 时都应该使用 setState ，而不要强制赋值
    • Refs 不能用于函数式组件，因为函数式组件没有实例
    • 在函数式组件内部，是可以使用 Refs 的

二、组件的生命周期

所谓的React生命周期，就是指组件从被创建出来，到被使用，最后被销毁的这么一个过程；
而在这个过程中，React提供了我们会自动执行的不同的钩子函数，我们称之为生命周期函数；

组件的生命周期大致分为三个阶段：组件挂载阶段，组件更新阶段，组件销毁卸载阶段

react在版本16.3前后存在两套生命周期，16.3之前为旧版，之后则是新版，虽有新旧之分，但主体上大同小异。

1. 对生命周期的理解

  1. 组件从创建到死亡它会经历一些特定的阶段。
  2. React组件中包含一系列勾子函数(生命周期回调函数), 会在特定的时刻调用。
  3. 我们在定义组件时，会在特定的生命周期回调函数中，做特定的工作。

2. 生命周期的三个阶段（旧）

在这里插入图片描述

  1. 初始化阶段： 由ReactDOM.render()触发—初次渲染
    1. constructor()
    2. componentWillMount()
    3. render()
    4. componentDidMount()
  2. 更新阶段： 由组件内部this.setSate()或父组件重新render触发
    1. shouldComponentUpdate()
    2. componentWillUpdate()
    3. render()
    4. componentDidUpdate()
  3. 卸载组件： 由ReactDOM.unmountComponentAtNode()触发
    1. componentWillUnmount()
<!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>生命周期旧</title>
</head>
<body>
    <!-- 准备好一个容器 -->
    <div id="test"></div>
    <!-- 引入 React 核心库 -->
    <script src="../js/react.development.js"></script>
    <!-- 引入 react-dom 用于支持 react 操作 DOM -->
    <script src="../js/react-dom.development.js"></script>

    <!-- 引入babel：
            1. ES6 ==> ES5
            2. jsx ==> js
    -->
    <script src="../js/babel.min.js"></script>

    <script type="text/babel">
        class Count extends React.Component {
            state = {
                count:0
            }
            add = ()=>{
                // 获取原状态
                let {count} = this.state
                // 更新状态
                this.setState({count:count+1})
            }
            death = ()=>{
                ReactDOM.unmountComponentAtNode(document.getElementById('test'))
            }
            force = ()=>{
                this.forceUpdate() // 强制更新
            }
            // 数据更新的 ‘阀门~’
            shouldComponentUpdate() { 
                console.log("Count --- shouldComponentUpdate");
                return true // 这里必须有返回4值，其次返回值默认是true
            }
            // 组件将要更新的钩子
            componentWillUpdate() {
                console.log("Count ---- componentWillUpdate");
            }
            // 组件更新完成的钩子
            componentDidUpdate() { 
                console.log("Count ---- componentDidUpdate");
            } 
            render(){
                console.log("render");
                let {count} = this.state
                return(
                    <div>
                        <h2>当前求和为：{count}</h2>
                        <button onClick={this.add}>点我+1</button>
                        <button onClick={this.death}>卸载组件</button>
                        <button onClick={this.force}>不更改任何状态中的数据，强制更新</button>
                    </div>
                )
            }
        }

        // 父组件
        class A extends React.Component {
            state = {carName:'小三轮'}
            changeCar = ()=>{
                this.setState({carName:"宾利"})
            }
            render(){
                console.log('A ---- render');
                return(
                    <div>
                        <div>我是A组件</div>
                        <button onClick={this.changeCar}>换车</button>
                        <B carName={this.state.carName}></B>
                    </div>
                )
            }
        }
        // 子组件
        class B extends A {
            // 组件将要接收新的props的钩子
            componentWillReceiveProps(){
                console.log('B ---- componentWillReceiveProps');
            }
            // 数据更新的 ‘阀门~’
            shouldComponentUpdate() { 
                console.log("B --- shouldComponentUpdate");
                return true // 这里必须有返回4值，其次返回值默认是true
            }
            // 组件将要更新的钩子
            componentWillUpdate() {
                console.log("B ---- componentWillUpdate");
            }
            // 组件更新完成的钩子
            componentDidUpdate() { 
                console.log("B ---- componentDidUpdate");
            } 
            render(){
                console.log('B ---- render');
                return(
                    <div>
                        我是B组件，接收到的车是：{this.props.carName}
                    </div>
                )
            }
        }

        ReactDOM.render(<A />,document.getElementById('test'))
    </script>
</body>
</html>

3. 生命周期的三个阶段（新）

在这里插入图片描述

  1. 初始化阶段： 由ReactDOM.render()触发—初次渲染
    1. constructor()
    2. getDerivedStateFromProps
    3. render()
    4. componentDidMount()
  2. 更新阶段： 由组件内部this.setSate()或父组件重新render触发
    1. getDerivedStateFromProps
    2. shouldComponentUpdate()
    3. render()
    4. getSnapshotBeforeUpdate
    5. componentDidUpdate()
  3. 卸载组件： 由ReactDOM.unmountComponentAtNode()触发
    1. componentWillUnmount()
<!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>生命周期新</title>
</head>
<body>
    <!-- 准备好一个容器 -->
    <div id="test"></div>
    <!-- 引入 React 核心库 -->
    <script src="../js/17.0.1/react.development.js"></script>
    <!-- 引入 react-dom 用于支持 react 操作 DOM -->
    <script src="../js/17.0.1/react-dom.development.js"></script>
    <!-- 引入babel：1. ES6 ==> ES52. jsx ==> js -->
    <script src="../js/17.0.1/babel.min.js"></script>
    <script type="text/babel">
        class Count extends React.Component {
            state = {
                count:0
            }
            add = ()=>{
                // 获取原状态
                let {count} = this.state
                // 更新状态
                this.setState({count:count+1})
            }
            death = ()=>{
                ReactDOM.unmountComponentAtNode(document.getElementById('test'))
            }
            force = ()=>{
                this.forceUpdate() // 强制更新
            }
            // 数据更新的 ‘阀门~’
            shouldComponentUpdate() { 
                console.log("Count --- shouldComponentUpdate");
                return true // 这里必须有返回4值，其次返回值默认是true
            }
            // 组件将要更新的钩子
            componentWillUpdate() {
                console.log("Count ---- componentWillUpdate");
            }
            // 组件更新完成的钩子
            componentDidUpdate() { 
                console.log("Count ---- componentDidUpdate");
            } 
            render(){
                console.log("render");
                let {count} = this.state
                return(
                    <div>
                        <h2>当前求和为：{count}</h2>
                        <button onClick={this.add}>点我+1</button>
                        <button onClick={this.death}>卸载组件</button>
                        <button onClick={this.force}>不更改任何状态中的数据，强制更新</button>
                    </div>
                )
            }
        }

        // 父组件
        class A extends React.Component {
            state = {carName:'小三轮'}
            
            constructor(props) {
                state
            }
            changeCar = ()=>{
                this.setState({carName:"宾利"})
            }
            static getDerivedStateFromProps(props, state) {
                // 这里必须要一个返回值 ==> state or null
                // 这里的state会覆盖掉原本的状态，并且后续也无法修改
                // 能将外部的接收的props 赋值给组件自身的 state
                // 如果你希望自身的state一直，全部依赖于外部的props，那么可以使用这个生命周期函数
                return {carName:"QQ"}
            }
            // 获取护具更新前的快照，能拿到旧的props和state
            // 必须有返回值
            getSnapshotBeforeUpdate = (prevProps, prevState) => {

            }
            render(){
                console.log('A ---- render');
                return(
                    <div>
                        <div>我是A组件</div>
                        <button onClick={this.changeCar}>换车</button>
                        <B carName={this.state.carName}></B>
                    </div>
                )
            }
        }
        // 子组件
        class B extends A {
            // 组件将要接收新的props的钩子
            UNSAFE_componentWillReceiveProps(){
                console.log('B ---- componentWillReceiveProps');
            }
            // 数据更新的 ‘阀门~’
            shouldComponentUpdate() { 
                console.log("B --- shouldComponentUpdate");
                return true // 这里必须有返回4值，其次返回值默认是true
            }
            // 将要挂载时
            UNSAFE_componentWillMount() {
                console.log("Count --- componentWillUnMount");
            }
            // 组件将要更新的钩子
            UNSAFE_componentWillUpdate() {
                console.log("B ---- componentWillUpdate");
            }
            // 组件更新完成的钩子
            componentDidUpdate() { 
                console.log("B ---- componentDidUpdate");
            } 
            render(){
                console.log('B ---- render');
                return(
                    <div>
                        我是B组件，接收到的车是：{this.props.carName}
                    </div>
                )
            }
        }

        ReactDOM.render(<A />,document.getElementById('test'))
    </script>
</body>
</html>

4. 新旧生命周期的区别

  1. 新生命周期中去掉了三个 will 钩子，分别为 componentWillMount、componentWillReceiveProps、componentWillUpdate；
  2. 新生命周期中新增了两个钩子，分别为 getDerivedStateFromProps（从 props 中得到衍生的 state ）和 getSnapshotBeforeUpdate。

5. 重要的勾子

  1. render：初始化渲染或更新渲染调用
  2. componentDidMount：开启监听, 发送ajax请求
  3. componentWillUnmount：做一些收尾工作, 如: 清理定时器

6. 即将废弃的勾子

  1. componentWillMount
  2. componentWillReceiveProps
  3. componentWillUpdate

警告：

现在使用会出现警告，下一个大版本需要加上 UNSAFE_ 前缀才能使用，以后可能会被彻底废弃，不建议使用。

三、高阶函数和函数柯里化的理解

1. 高阶函数

如果一个函数符合下面2个规范中的任何一个，那么它就属于一个高阶函数

  1. 若A函数，接收的参数是一个函数，那么A就可以称为高阶函数
  2. 若A函数，它的返回值依然是一个函数，那么A就可以称为高阶函数

常见的高阶函数：Promise，setTimeout，arr.map(数组方法)

2. 函数的柯里化

通过函数继续调用，返回值为函数的方式，实现多次接受参数，最后统一处理的函数编码形式

function sum(a){
    return (b)=>{
        return (c)=>{
            return a + b + c
        }
    }
}
const result = sum(1)(2)(3)
console.log(result);

3. 使用函数柯里化代码示例

class Login extends React.Component {
    // 初始化状态
    state = {
        username:'', // 用户名
        password:'', // 密码
    }
    // 保存表单数据到状态中
    saveFormDate=(dataType,event)=>{ // 标识当前标签
        this.setState({[dataType]:event.target.value})
    }
    // 表单提交的回调
    handleSubmit=(event)=>{
        event.preventDefault(); // 阻止默认事件
        
        let {username,password} = this.state
        alert(`你输入的用户名是${username},密码是${password}`)
    }
    render(){
        return(
            <div>
                <form action="https://www.baidu.com/" onSubmit={this.handleSubmit}>
                    用户名：<input type="text" onChange={(event)=>this.saveFormDate('username',event)} name="username" />    
                    密码：<input type="text" onChange={(event)=>this.saveFormDate('password',event)} name="password" />
                    <button type="submit">登录</button>  
                </form>
            </div>
        )
    }
}

4. 不用函数柯里化代码示例

class Login extends React.Component {
    // 初始化状态
    state = {
        username:'', // 用户名
        password:'', // 密码
    }
    // 保存表单数据到状态中
    saveFormDate=(dataType)=>{ // 标识当前标签
        return (event)=>{ // 这里的回调谁执行？ input标签的 onChange事件
            this.setState({[dataType]:event.target.value})
        }
    }
    // 表单提交的回调
    handleSubmit=(event)=>{
        event.preventDefault(); // 阻止默认事件
        
        let {username,password} = this.state
        alert(`你输入的用户名是${username},密码是${password}`)
    }
    render(){
        return(
            <div>
                <form action="https://www.baidu.com/" onSubmit={this.handleSubmit}>
                    用户名：<input type="text" onChange={this.saveFormDate('username')} name="username" />    
                    密码：<input type="text" onChange={this.saveFormDate('password')} name="password" />
                    <button type="submit">登录</button>  
                </form>
            </div>
        )
    }
}

总结：

欢迎大家加入我的社区，在社区中会不定时发布一些精选内容：https://bbs.csdn.net/forums/db95ba6b828b43ababd4ee5e41e8d251?category=10003

以上就是 React 面向组件编程（下），不懂得也可以在评论区里问我或私聊我询问，以后会持续发布一些新的功能，敬请关注。
我的其他文章：https://blog.csdn.net/weixin_62897746?type=blog

【GoJudge部署系列03】判题机部署-GoJudge部署之Docker部署
随风浪仔的专栏
10-14 361
【GoJudge部署系列03】判题机部署-GoJudge部署之Docker部署
【开源、完结、陆续更新】使用Springboot+ Vue从0-1写个Oj当毕设——判题机
u012164906的博客
03-09 3170
基于springboot和vue打造的前后端分离onlinejudge系统
java docker client_Java 操作 Docker 使用 java 执行 Docker 内部命令
weixin_42245701的博客
02-16 1515
String containerName = "generated_" + new SecureRandom().nextInt();CreateContainerResponse container = client.createContainerCmd("busybox").withCmd("sleep", "9999").withName(containerName).exec();clie...
从零开始搭建oj（ubuntu)
weixin_62313535的博客
08-04 1万+
本文主要讲解如何在ubuntu环境下从零开始搭建oj
OutputStream中文乱码如何解决
热门推荐
千年板蓝根
10-30 11万+
解决办法可以使用 ByteArrayOutputStream private OutputStream stdout, stderr; public ExecStartResultCallback(OutputStream stdout, OutputStream stderr) { this.stdout = stdout; this.stderr = stderr; } public ExecStartResultCallback() {...
OJ在线评测系统 Docker代码沙箱实现 基于模版方法模式实现在容器内交互
温柔半两，从容一生
09-27 6万+
这是一个匿名内部类的写法。使用匿名内部类可以在需要的地方直接实现接口，避免创建一个单独的类。1.在已有镜像的基础上再进行扩充 比如说拉取现成的java环境 包含jdk 再把编译后的文件复制到文件里 适合新的项目跑通流程。模版方法设计模式 定义同一套实现流程 让不同的子类去实现不同流程中的具体实现 执行步骤一样 每个步骤的实现方式不一样。这个回调的作用是实时接收和处理命令执行过程中的输出信息，以及在执行完成时进行相应的处理。这段代码是一个 Java 匿名内部类的实现，主要用于处理某个执行过程的回调。
使用java管理docker_SpringBoot - 使用docker-java远程管理docker教程1（安装配置、基本用法）...
weixin_34768019的博客
03-02 1514
通常我们都是采用 dos 命令对 docker 进行操作，如果需要采用 Java 程序来管理 docker，可以借助 docker-java。docker-java 是 Docker的 Java 版本 API，下面通过样例演示其如何使用。一、安装配置1、服务端设置(1)由于访问 dockerAPI 需要设置一个远程访问端口，首先执行如下命令编辑服务器上的 docker.service 文件。vi ...
基于Java语言的OJ判题评测系统后端设计源码
10-03
基于Java语言的OJ判题评测系统后端设计源码，作为该系统的核心部分，承担着判题、评测和反馈结果等关键功能。本项目不仅涉及后端开发技术，还包括了数据库管理、容器化部署以及多种文件格式的配置和说明。 首先，...
基于开源技术的HUSTOJ在线评测系统设计源码
09-30
在功能实现方面，HUSTOJ在线评测系统支持多种编程语言的在线评测，这不仅需要构建一个能够编译和运行多种语言的运行时环境，还要求系统具备代码执行、沙箱隔离、资源限制、安全性验证等技术细节。考虑到系统还支持...
基于Java编写的OJ系统判题机.zip
03-24
3. **安全性隔离**：为了防止用户提交的恶意代码破坏系统，判题机通常会使用沙箱环境或容器技术（如Docker）来隔离运行代码的环境，限制其资源使用和系统调用。 4. **测试用例执行**：判题机需要一组预设的测试用例...
springboot使用docker-java连接docker所在的服务器操作docker
level_Tiller的博客
08-10 2956
1.添加依赖 <dependency> <groupId>com.github.docker-java</groupId> <artifactId>docker-java</artifactId> <version>${docker.version}</version> <exclusions> &
OJ在线评测系统 在Linux虚拟机搭建Docker 概念 入门 安装
温柔半两，从容一生
09-27 6万+
为什么要用docker容器技术为了提升系统的安全性 把不同的程序和宿主机进行隔离使得某个程序 应用的执行不会影响到系统本身docker技术可以实现程序和宿主机的隔离容器可以理解成对一系列应用程序、服务和环境的封装 从而把程序运行在一个隔离的 封闭的 隐私的空间内 对外整体提供服务可以把一个容器理解成一个新的电脑 定制化操作系统镜像：用来创建容器的安装包 可以理解为给电脑安装操作系统的系统镜像容器：通过镜像来创建的一套运行环境 一个容器内可以运行多个程序 可以理解为一个电脑实例。
「学习笔记」docker部署开源hustoj
wqq的博客
02-06 2411
目录一.相关学习二.部署过程1.阅读Docker官方文档，了解特性和基本概念2.搭建Dcoker环境，掌握Dcoker常用命令3.安装Dcoker-compose，理解作用，掌握语法4.利用docker-compose进行应用编排，对hustoj进行部署 一.相关学习 了解容器技术发展、特点，搭建容器环境并部署应用：   1、阅读Docker官方文档，了解特性和基本概念   2、搭建Dcoker环境，掌握Dcoker常用命令   3、安装Dcoker-compose，理解作用，掌握语法   4、利用dock
windows7使用Docker编译运行java文件，伪oj
小小酥的博客
03-29 462
ps： 需要实现一个简单的oj功能，想到在java项目中运行cmd命令直接编译、运行java文件，测试类运行正常，然而项目运行起来，编译正常，运行Main文件就提示无法加载类，应该是SpringMVC的类加载机制问题，不会搞，有知道大佬可以留个言。 后来想到用Docker容器运行，果然可行，而且也保证了代码运行的安全性。 一、首先去官网下载Docker Toolbox https://do...
服务器搭建青岛oj
jfukg的博客
05-04 1123
参考：https://www.longkui.site/category/program/onlinejudge/ 1、安装宝塔面板 yum install -y wget && wget -O install.sh http://download.bt.cn/install/install_6.0.sh && sh install.sh 安装完会有面板登录地址、登录账户、登录密码（建议截图免得以后忘了难搞） 然后使用登录地址（一般为：https://ip:8888） 2、
docker java镜像被弃用,使用 openjdk
coderYJ的博客
09-02 3801
Error response from daemon: manifest for java:8-jdk not found: manifest unknown: manifest unknown
Docker容器技术
stu_kk的博客
11-30 482
Docker镜像是通过Dockerfile定义的，Dockerfile是一个文本文件，其中包含了一系列构建镜像所需的指令和配置，比如基础镜像、环境变量、依赖项等。Linux容器是一种轻量级的虚拟化技术，它利用Linux内核的功能，通过进程隔离、文件系统隔离、网络隔离等机制，使得应用程序可以在独立、安全的运行环境中运行，而与宿主机和其他容器隔离开来。：Docker守护进程是运行在宿主机上的系统服务，负责接收和处理Docker客户端的请求，管理容器的创建、运行和销毁，以及镜像的构建、存储和分发。
oj的docker发生异常
w_66666的博客
10-24 1913
docker报错： ERROR: Can’t find a suitable configuration file in this directory or any parent. Are you in the right directory? Supported filenames: docker-compose.yml, docker-compose.yaml 说明： 本人是配置oj所出现的问题，我在网上还没有找到解决办法，自己解决之后所以说给大家分享一下 解决方法： 首先查看自己的docker是否
docker判题机逻辑
最新发布
03-22
### 使用 Docker 实现在线判题系统的逻辑 #### 背景介绍 现代在线判题系统通常依赖于容器化技术来提供安全、隔离和可扩展的运行环境。Docker 是一种流行的容器化工具，能够帮助开发者快速构建、部署和管理应用程序及其运行时环境。通过使用 Docker，可以有效解决不同编程语言运行环境之间的兼容性和安全性问题。 --- #### 容器化的必要性 为了支持多种编程语言以及复杂的评测需求，在线判题系统需要具备高度的安全性和灵活性。传统的虚拟机虽然提供了足够的隔离能力，但由于启动时间较长且资源消耗较大，并不适合高频次的任务调度场景。而 Docker 提供了一种轻量级的解决方案，能够在短时间内创建和销毁容器实例，从而满足实时评测的需求[^2]。 --- #### 基于 Docker 的判题机架构设计 以下是基于 Docker 构建在线判题系统的典型架构： 1. **任务接收与分配** 上层服务负责接收用户的提交请求并将这些请求转化为具体的评测任务。此过程可能涉及解析代码文件、指定测试数据集等内容。随后，该任务会被发送至消息队列等待进一步处理[^3]。 2. **动态生成镜像或复用已有镜像** 针对每种目标语言预先准备相应的基础镜像（Base Image），例如 Python、C++ 或 Java 所需的基础库和支持组件。当接收到新的评测任务时，可以根据所需的语言特性拉取对应的官方镜像或者自定义版本[^1]。 3. **执行评测任务** 创建临时性的容器用于实际运行用户提交的代码片段。在此阶段需要注意设置合理的 CPU 和内存限额以防止单一恶意脚本占用过多计算资源影响整体性能表现。同时还需要挂载必要的输入/输出路径以便传递测试案例给内部程序调用。 4. **捕获结果并清理环境** 运行结束后立即终止当前容器实例防止任何潜在风险残留下来污染后续操作。接着读取出日志记录分析最终成绩反馈给前端界面展示出来完成整个闭环流程。 --- #### 示例代码：简单的 Dockerfile 编写 下面展示了针对 C/C++ 类型题目所编写的一个基本 `Dockerfile` 文件模板： ```dockerfile FROM gcc:latest AS builder WORKDIR /app COPY . . RUN g++ main.cpp -o program.out CMD ["./program.out"] ``` 上述配置说明如下： - 选择了最新的 GCC 工具链作为基底； - 将工作目录设定为 `/app`; - 复制主机上的所有内容到容器内的相同位置； - 编译名为 `main.cpp` 的源码生成二进制可执行文件； - 默认命令指向刚刚生产的产物以方便直接启动验证效果。 --- #### 性能优化建议 尽管利用 Docker 可以为 OJ 平台带来诸多便利之处但仍存在一些挑战比如冷启动延迟较高可能会拖慢用户体验因此可以从以下几个方面入手改进效率: - **缓存机制**: 对频繁使用的公共镜像实施本地存储减少网络下载次数加快初始化速度。 - **批量作业模式**: 如果允许的话尝试一次打包多个独立子进程共同进入单一大规模容器内运作降低开销比例。 - **硬件加速选项**: 启用特定厂商提供的 GPU/FPGA 加速插件提升复杂算法运算效能缩短耗时时长. ---
评论 57
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

清风 与我

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值