前端随笔（五）————浅谈React工程化-优快云博客

本文探讨了React作为JavaScript库的特性，包括声明式编程、组件化、跨平台开发和虚拟DOM。阐述了React项目的结构，如Public和Src文件夹，以及如何创建React脚手架。同时，强调了React工程化的重要性，旨在规范开发流程，提高代码可读性和开发效率。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.什么是React？

用于构建用户界面的 JavaScript 库————React官方文档

严格意义上来说，React并非框架，而是一个JS库。

常用库："react"库， "react-dom"库

React具有如下特点：声明式，组件化，跨平台开发，操作虚拟DOM。

声明式——React 使创建交互式 UI 变得轻而易举。为你应用的每一个状态设计简洁的视图，当数据变动时 React 能高效更新并渲染合适的组件。

组件化——构建管理自身状态的封装组件，然后对其组合以构成复杂的 UI。组件就是将完整页面内容划分为一个个子模块进行独立开发，最后再按需拆分或组合使用。

跨平台——React还可以使用Node进行服务器渲染，或使用ReactNative进行移动端开发。

虚拟DOM——创建虚拟DOM树与实际DOM进行差异化对比，从而计算出最佳方法以对真实DOM进行这些更改。这样可以确保对实际DOM的操作最少。因此，降低了更新实际DOM的性能成本。

点击查看“虚拟DOM”https://www.jianshu.com/p/2ebd54539752

2.React的结构与创建

1.React的结构组成

React在实际开发中通常是以脚手架的方式使用的，而非直接在原生项目中通过script标签引入。

React脚手架主要包含以下几个部分：

Public——静态资源文件夹（主要用来存放需要渲染的 HTML 页面与其他信息）；

Src———源码文件夹（主要用来存放入口文件（index.js），CSS文件与React组件（其他非必要文件可以删除））；

其他支持性文件，如：.gitignore，package.json等。

2.创建一个React脚手架

新建一个文件夹，在该文件夹下打开cmd

输入以下指令：my-app表示的是脚手架的名称，可以自定义。

npx create-react-app my-app
cd my-app
npm start

在创建之前确认电脑是否安装了Node；

下载 | Node.js 中文网http://nodejs.cn/download/

3.React工程化

为什么要强调工程化？

为了规范开发流程，使得代码结构更加清晰并提升开发效率，必须注重工程化。

笔者认为，工程化就是，创建React脚手架后，只需要一个Src下的入口文件即可，开发者可以在index.js中直接书写组件，并通过组件间的嵌套关系实现元素间的嵌套结构，最终将顶级组件渲染到HTML页面中即可。在开发中可以根据具体需求对组件进行拆分重组。

这种编码方式可以最大程度上减少文件数量使项目尽可能地简洁，并且嵌套在一起的组件之间的关系更加清晰，便于查找bug，在一定程度上大大增加了组建的复用性。（如下）

import React from 'react';
import {createRoot} from 'react-dom/client';
import './index.css';
const p = document.getElementById('root');
const root = createRoot(p);
//引入React相关库

class App01 extends React.Component{  
    render(){
        const fun1 = () =>{
            const box1 = document.getElementById('box1');
            const color =box1.style;
            color.backgroundColor = 'red';
            // if(color.backgroundColor = 'red'){
            //     color.backgroundColor='blue';
            // }else if(color.backgroundColor != 'red'){
            //     color.backgroundColor='red';
            // }
            color.backgroundColor?color.backgroundColor='blue':color.backgroundColor='red';
        }
        return(
            <>
                <h2>{'这是子组件App01'}</h2>
                <div id='box1' style={{width:'200px',height:'100px',backgroundColor:'red'}}></div>
                <button id='btn1' onClick={fun1}>改变颜色</button>
            </>
        )
    }
}
//组件1
class App02 extends React.Component{
    renderApp01(i){
        return<App01/>
    }
    // 把01组件嵌套到02组件中
    render(){
        return(
            <>
                <h3>{'这是子组件App02'}</h3>
                <hr />{/* 以此分开子组件1，2 */}
                <div>{this.renderApp01()}</div>
            </>
        ) 
    }
}
class AppMain extends React.Component{
    renderApp02(j){
        return<App02/>
    }
    // 把02组件嵌套在父组件中
    render(){
        return(
            <>
                <h1>{'这是父组件'}</h1>
                <hr />{/* 以此分开父子组件 */}
                <div>{this.renderApp02()}</div>
            </>
        )
    }
}

root.render(
    <AppMain/>
)
//将顶级组件渲染到HTML中