【热门主题】000027 React：前端框架的强大力量

bin91532024-11-05 11:57

前言：哈喽，大家好，今天给大家分享一篇文章！并提供具体代码帮助大家深入理解，彻底掌握！创作不易，如果能帮助到大家或者给大家一些灵感和启发，欢迎收藏+关注哦 💕


目录

📚📗📕📘📖🕮💡📝🗂️✍️🛠️💻🚀🎉🏗️🌐🖼️🔗📊👉🔖⚠️🌟🔐⬇️·正文开始⬇️·🎥😊🎓📩😺🌈🤝🤖📜📋🔍✅🧰❓📄📢📈 🙋0️⃣1️⃣2️⃣3️⃣4️⃣5️⃣6️⃣7️⃣8️⃣9️⃣🔟🆗*️⃣#️⃣

【热门主题】000027 React：前端框架的强大力量

📚 一、React 简介与优势

React 是由 Facebook 开发的用于构建用户界面的 JavaScript 库。它具有诸多优势，使其在前端开发领域备受青睐。
首先 ，React 的性能卓越。该库最初为 Facebook 打造，工程师们以各种方式优化，确保即使在网络繁忙时也能有出色的性能表现。例如，React 使用虚拟 DOM 技术，通过比较虚拟 DOM 和实际 DOM 的差异来高效更新界面，减少了对实际 DOM 的直接操作，从而提高渲染性能。
其次 ，组件化开发是 React 的核心优势之一。它将复杂的用户界面拆分成多个小的、独立的、可复用的组件。每个组件都有独立的输入（props）和输出（状态或事件），这大大提高了代码的可维护性和重用性。通过组件化开发，我们可以创建可复用的组件库，减少重复编写代码的工作量，提高开发效率。
在处理依赖关系方面 ，React 允许定义组件之间的依赖关系，并借助 Facebook 开发的组件依赖管理解决方案 Flux 来处理这些依赖关系。当项目规模和复杂性扩展时，Flux 能在处理跨组件问题上提供很大帮助。

React 还拥有庞大的插件生态系统。这意味着开发者可以找到各种库来满足不同需求，如表单验证、路由等都有简单的 npm 包可供使用。丰富的插件生态系统使得将其他工具集成到应用程序中变得容易，轻松获得所需功能。
最后，React 的安装简便。使用像 create-react-app 这样的工具，建立新的项目只需要几分钟，而且它不仅可以在 npm 或 Yarn 下工作，大大降低了开发环境的设置难度，让开发者能够快速启动新项目。

📚二、React 的缺点及应对

📘（一）缺乏对旧浏览器的支持

React 不支持 IE11 等较老的浏览器，这对于一些企业来说可能是一个较大的问题。在当前互联网环境下，虽然新的浏览器不断推出，但仍有部分用户在使用旧版本浏览器。据统计，全球仍有一定比例的用户在使用老旧浏览器，尤其是在一些特定行业和地区。

为了解决这个问题，可以采取以下策略：

使用插件和 polyfill。例如，可以下载 react-app-polyfill 和 core-js 插件，在项目的入口文件中引入这些插件，并在配置文件中设置兼容性。具体做法是在./src/index.js 的最上方引入插件import 'core-js/es'; import 'react-app-polyfill/ie9'; import 'react-app-polyfill/stable'，同时在 .webpackrc 中配置 browserslist，设置兼容的版本，如"browserslist": ["last 2 versions", "ie > 9"]。

在打包工具中进行配置。以 Vite 为例，可以通过安装@vitejs/plugin-legacy插件来自动生成传统浏览器的 chunk 及与其相对应 ES 语言特性方面的 polyfill。在vite.config.ts里的build.target配置项指定构建目标为es2015，并配置插件参数，如targets: ['ie >= 11', 'chrome <= 60']，同时设置需要兼容的 polyfills。

📘（二）JSX 带来的困惑

React 使用了一个名为 JSX 的 JavaScript 扩展，这可能会让一些开发人员感到困惑。JSX 虽然不是使用 React 的必要条件，但它可以使开发更快、更容易。

对于 JSX 带来的困惑，可以采取以下措施：

加强学习和熟悉。开发人员可以通过阅读官方文档、教程和示例代码，深入了解 JSX 的语法和用法。了解 JSX 的本质是一个 JS 对象，会被 babel 编译，最终转换为React.createElement。

解决在开发工具中的语法支持问题。例如在 VSCode 中，如果安装插件ES7 React/Redux/GraphQL/React-Native snippets后还是不能完全支持 jsx 语法，可以在设置中搜索includeLanguages，添加javascript:javascriptreact项，以确保对 JSX 语法的支持。

📚三、React 教程指南

📘（一）安装与基本概念

React 的安装方法有多种，其中一种常用的方式是使用 create-react-app 工具。以下是具体步骤：

打开命令行窗口，输入 npm -version，查看当前的 npm 版本。如果 npm 版本是 5.2 以上版本，在 cmd 中输入 npx create-react-app my-app，当前目录下将创建一个名为 my-app 的工程。命令行窗口中将会显示依赖库的一些日志。如果 npm 版本低于 5.2，则全局安装 create-react-app，在 cmd 中输入

powershell 复制代码 
npm install -g create-react-app。create-react-app

下载完成后，在 cmd 中输入

powershell 复制代码 
create-react-app my-app

回车就可以下载完成！如果下载失败，可以查看 npm 的版本号。如果高于 6.14.8，则降低版本号，输入 npm install npm@6.14.8 -g。如果还是失败，说明可能不是管理员权限运行，在管理员权限下运行降低版本的操作。在 window 图标上右击点击以管理员运行。

React 的核心概念包括组件、JSX、Virtual DOM 和 Data Flow。

组件：React 将用户界面拆分为独立的、可复用的组件。每个组件都有自己的输入（props）和输出（状态或事件），可以提高代码的可维护性和重用性。

JSX：是一种 JavaScript 的扩展语法，允许在 JavaScript 代码中嵌入 HTML 样式，提高代码可读性。例如：

javascript 复制代码 
function Example() { return (<div><h1>Hello, World!</h1></div>); }

Virtual DOM：React 使用虚拟 DOM 技术，通过比较虚拟 DOM 和实际 DOM 的差异来高效更新界面，减少了对实际 DOM 的直接操作，从而提高渲染性能。

Data Flow：React 的数据流向是单向的，即从父组件向子组件传递数据。子组件不能直接修改父组件的数据，只能通过父组件传递的方法来更新数据。

📘（二）创建简单计数器应用

创建计数器应用的步骤如下：

组件创建：可以使用函数组件或类组件来创建计数器组件。以下是一个使用类组件的示例：

javascript 复制代码 
import React from 'react';

class Counter extends React.Component {
    constructor(props) {
        super(props);
        this.state = { count: 0 };
    }

    increment = () => {
        this.setState({ count: this.state.count + 1 });
    };

    render() {
        return (
            <div>
                <p>Count: {this.state.count}</p>
                <button onClick={this.increment}>Increment</button>
            </div>
        );
    }
}

export default Counter;

引入主应用：在主应用文件中，引入计数器组件并渲染到页面上。例如：

javascript 复制代码 
import React from 'react';
import ReactDOM from 'react-dom';
import Counter from './Counter';

ReactDOM.render(<Counter />, document.getElementById('root'));

传递数据：可以通过 props 从父组件向子组件传递数据。例如，如果有一个父组件想要传递一个初始计数值给计数器组件，可以这样做：

javascript 复制代码 
import React from 'react';
import Counter from './Counter';

class Parent extends React.Component {
    render() {
        return (
            <div>
                <Counter initialCount={5} />
            </div>
        );
    }
}

export default Parent;

在计数器组件中接收这个初始计数值：

javascript 复制代码 
import React from 'react';

class Counter extends React.Component {
    constructor(props) {
        super(props);
        this.state = { count: props.initialCount || 0 };
    }

    increment = () => {
        this.setState({ count: this.state.count + 1 });
    };

    render() {
        return (
            <div>
                <p>Count: {this.state.count}</p>
                <button onClick={this.increment}>Increment</button>
            </div>
        );
    }
}

export default Counter;

处理事件：在计数器组件中，通过按钮的点击事件来触发计数值的增加。例如，在上面的代码中，通过 onClick={this.increment} 绑定了按钮的点击事件到 increment 方法。

使用生命周期方法：React 组件有一些生命周期方法，可以在不同阶段执行特定的操作。例如，在计数器组件中，可以使用 componentDidMount 方法在组件挂载后执行一些初始化操作，使用 componentDidUpdate 方法在组件更新后执行一些操作，使用 componentWillUnmount 方法在组件卸载前执行一些清理操作。

📘（三）组件的 CSS 样式管理

React 中有多种 CSS 样式管理方式，下面介绍 CSS Modules 和使用 styled-components 库。

CSS Modules：允许将 CSS 类名局部化，避免全局命名冲突。它与普通 CSS 语法相同，易于学习和使用。在 React 中，可以使用第三方库如 classnames 来动态生成 CSS 类名。例如：

javascript 复制代码 
import styles from './MyComponent.module.css';
import classNames from 'classnames';

function MyComponent() {
    const layoutType = 'grid';
    const layoutClass = classNames({
        [styles.gridLayout]: layoutType === 'grid',
        [styles.flexLayout]: layoutType === 'flex',
    });
    return (<div className={layoutClass}>{/* 内容 */}</div>);
}

export default MyComponent;

使用 styled-components 库：Styled-components 是一个基于 React 的 CSS-in-JS 库，它允许将 CSS 直接嵌入到 JavaScript 中，以函数式的方式定义组件样式。例如：

javascript 复制代码 
import React from 'react';
import styled from 'styled-components';

const Button = styled.button`
    background: #007bff;
    color: white;
    padding: 8px 12px;
    border-radius: 4px;
    border: none;
`;

function App() {
    return (<div><Button type="submit">点击我</Button></div>);
}

export default App;

Styled-components 还提供了很多高级特性，如混入、层叠样式、组件间样式分享、动态样式与响应式设计等。例如，可以使用混入来定义一组可复用的样式，然后在多个组件中使用：

javascript 复制代码 
const bold = { fontWeight: 'bold' };
const center = { textAlign: 'center' };

const Button = styled.button`
    padding: 8px;
    background: ${props => props.backgroundColor || 'red'};
    color: white;
    ${props => props.bold? bold : ''};
    ${props => props.center? center : ''};
`;

还可以通过将样式逻辑抽象到函数中，实现组件间样式分享：

javascript 复制代码 
const buttonStyle = (backgroundColor, isBold) => `
    padding: 8px;
    background: ${backgroundColor};
    color: white;
    ${isBold? 'font-weight: bold;' : ''};
`;

const Button = styled.button`
    ${props => buttonStyle(props.backgroundColor, props.bold)};
`;

📚四、React 应用案例

📘（一）标准框架简洁网页前端应用

标准框架简洁网页前端项目提供了一个轻量级的运行环境，用于实现简单网站的前端功能。它涵盖了首页管理、用户管理、公告管理、论坛管理和指引管理等基础功能。

功能菜单布局：

主页展示：管理员登录系统，默认管理员账户为 admin，密码为 1。不支持直接在界面上添加或修改管理员，需通过数据库手动操作（密码设置需遵循共同组件的加密逻辑）。

网站介绍页面：包含站点介绍、历史、组织结构、联系我们等子菜单。配置说明展示的是示例菜单，包含链接和 JSP 文件。可对每个示例页面进行定制，加入自己的内容。

其他功能页面：如信息广场、客户支持、通知公告等页面均提供了基础架构，可根据需要增加功能并定制化。

系统管理页面：子菜单有日程管理、公告板创建管理、公告板使用管理、公告管理、站点画廊管理。管理员可以登录后注册日程信息或发布公告（公告板可设置）。

环境配置：

开发环境：项目使用 Node.js v18.12.0 和 NPM v8.19.2。

前端启动步骤：

创建项目：通过 Git 克隆项目，并安装所需的依赖模块。

设置后端 URL：将运行的后端服务器 URL 设置到 .env.development 文件中的 REACT_APP_EGOV_CONTEXT_URL 字段中。

运行项目：在开发模式下运行项目使用 npm start。

📘（二）待办事项列表应用

待办事项列表应用是 React 常见的应用案例之一，以下介绍几种不同实现方式的待办事项列表应用。

基础待办事项列表应用：

准备工作：安装 Node.js，创建项目目录，初始化项目并安装 React 和 React DOM。

创建项目结构：包括 index.html 文件用于创建带有 id 为 root 的
元素，用于渲染 React 应用，并引入 index.js 脚本文件作为入口文件。在 src 文件夹下创建 App.js 作为主应用组件文件。
创建 React 组件：App 组件返回一个包含标题的
元素，并在 src/index.js 文件中引入 React 和 React DOM，渲染 App 组件到 root 元素。
添加待办事项功能：在 App 组件中，使用 useState 钩子管理状态，todos 数组存储待办事项列表，inputValue 存储输入框的值。当用户在输入框中输入内容并点击 "添加" 按钮时，新的待办事项将被添加到列表中。
运行项目：使用 npm start 启动开发服务器，在浏览器中访问 http://localhost:3000 查看应用。
使用 React、Redux 和 React Router 的待办事项列表应用：
初始化项目：使用 Create React App 创建项目，安装 Redux 和 React Router 相关库。
设置 Redux：使用 Redux Toolkit 设置 Redux store，在 src/redux 文件夹下创建 store.js 和 todoSlice.js 文件。
设置 React Router：在 src 目录下创建 App.js 文件，使用 BrowserRouter 包裹路由，并根据 React Router v6 的要求进行路由配置。
创建组件：创建 TodoList 和 TodoForm 组件，使用 useDispatch 和 useSelector 钩子与 Redux store 交互。
运行应用：使用 npm start 运行应用，在浏览器中访问 http://localhost:3000/ 查看待办事项列表，访问 http://localhost:3000/add 添加新的待办事项。
React 待办事项列表案例：
功能实现：在文本框中输入内容回车后，内容出现在未完成中；点击未完成中的选择框，其内容出现在已完成中，反之亦然；点击删除按钮会删除。新建一个 todoList.js 文件，定义 todoList 组件，通过 constructor 初始化状态，定义 keyEnter、changeBox、deleteData 等方法处理回车事件、监听事件和删除事件。在 render 方法中返回页面结构，使用 map 方法遍历状态中的列表数据，渲染未完成和已完成的待办事项。
CSS 样式：定义了 .block、.title、.titleleft、.titleright 等 CSS 类，用于设置页面的布局和样式。
写入缓存：封装自定义模块，新建一个 Storage 文件夹，在该文件夹下新建一个名为 Storage.js 的文件，定义 storage 对象，包含 setStorage、getStorage、removeStorage 方法用于操作本地存储。在 todoList.js 中引入 storage 模块，在回车事件、监听事件和删除事件中写入缓存，并在 React 生命周期函数 componentDidMount 中加载缓存。

📚五、React 常见问题及解决方案

📘（一）组件状态更新不一致

问题：在 React 组件中，不正确地处理状态更新可能会导致应用的 UI 不一致。

解决方案：确保使用 setState方法更新状态，并且理解它是异步的。如果新的状态依赖于旧的状态，应该使用 setState的函数形式。例如：

this.setState((prevState, props)=>({

counter: prevState.counter + props.increment

}));

📘（二）性能问题

问题：大型应用中，如果没有正确地优化，可能会遇到性能瓶颈。

解决方案：使用 shouldComponentUpdate、React.memo、useMemo和useCallback钩子来避免不必要的渲染。同时，利用懒加载（如React.lazy和Suspense）来减少初始加载时间。

📘（三）错误边界

问题：组件树中的某个组件抛出错误会导致整个应用崩溃。

解决方案：使用错误边界（Error Boundaries）组件来捕获子组件树中的 JavaScript 错误，并记录这些错误，展示备用 UI 而不是崩溃整个应用。

以下是一个错误边界组件的示例：

javascript 复制代码 
class ErrorBoundary extends React.Component {
    constructor(props) {
        super(props);
        this.state = { hasError: false };
    }
    static getDerivedStateFromError(error) {
        // 更新 state 使下一次渲染能够显示降级后的 UI
        return { hasError: true };
    }
    componentDidCatch(error, errorInfo) {
        // 你同样可以将错误日志上报给服务器
        console.log(error, errorInfo);
    }
    render() {
        if (this.state.hasError) {
            // 你可以自定义降级后的 UI 并渲染
            return <h1>Something went wrong.</h1>;
        }
        return this.props.children;
    }
}

使用错误边界组件时，可以像这样包裹可能会抛出错误的子组件：

javascript 复制代码 
<ErrorBoundary>
    <YourComponent />
</ErrorBoundary>

📘（四）组件重新渲染过于频繁

问题：组件可能在不必要的情况下重新渲染，导致性能问题。

解决方案：使用memo、PureComponent或React.memo来防止不必要的重新渲染。确保正确使用shouldComponentUpdate或React Hooks的useMemo和useCallback。

📘（五）状态管理

问题：有效地管理组件状态，特别是在大型应用中，可能会变得复杂。

解决方案：使用状态管理工具，如Redux、MobX或React的useContext和useReducer来管理状态。

📘（六）异步数据加载

问题：在组件渲染之前，需要从服务器获取数据，可能会导致闪烁或空数据的显示。

解决方案：使用componentDidMount、useEffect或React的Suspense来处理数据加载，以确保数据准备好后再渲染组件。

📘（七）跨域问题

问题：在开发中，前端和后端可能运行在不同的域上，导致跨域问题。

解决方案：配置服务器允许跨域请求（CORS），或使用代理服务器来处理跨域请求。

📘（八）路由和导航

问题：处理应用的导航和路由可能变得复杂，特别是在单页面应用（SPA）中。

解决方案：使用React Router或其他路由库来管理导航和路由。

📘（九）表单处理

问题：处理表单输入、验证和提交可能会变得繁琐。

解决方案：使用React表单控件，结合状态管理和表单验证库，如Formik或Yup。

📘（十）性能优化

问题：在大型应用中，性能可能成为问题，导致加载时间过长或卡顿。

解决方案：使用性能分析工具（如React DevTools和Profiler）来识别性能问题，并采取相应的优化措施，如懒加载组件、使用Memoization等。

📘（十一）服务端渲染（SSR）

问题：如果需要更好的 SEO 和首屏加载性能，实施服务端渲染可能变得复杂。

解决方案：学习使用Next.js或其他React SSR框架来实现服务端渲染。

📘（十二）跟踪和调试

问题：在复杂的React应用中，跟踪和调试问题可能会变得复杂。

解决方案：学习使用React DevTools、浏览器的开发者工具和适当的日志记录来进行调试。

📘（十三）第三方库和组件集成

问题：将第三方库或组件集成到React应用中可能需要处理不同的生命周期和状态管理。

解决方案：查看文档并按照指南进行集成，可能需要编写适配器或包装器来适应React的方式。

到此这篇文章就介绍到这了,更多精彩内容请关注本人以前的文章或继续浏览下面的文章，创作不易，如果能帮助到大家,希望大家多多支持宝码香车~💕，若转载本文，一定注明本文链接。

更多专栏订阅推荐：

👍 html+css+js 绚丽效果

💕 vue

✈️ Electron

⭐️ js

📝 字符串

✍️ 时间对象（Date()）操作

相关推荐
哑巴语天雨8 小时前
React+Vite项目框架
前端·react.js·前端框架
码农老起8 小时前
掌握 React：组件化开发与性能优化的实战指南
react.js·前端框架
撸码到无法自拔12 小时前
React：组件、状态与事件处理的完整指南
前端·javascript·react.js·前端框架·ecmascript
Domain-zhuo12 小时前
如何利用webpack来优化前端性能？
前端·webpack·前端框架·node.js·ecmascript
web150850966411 天前
【React&前端】大屏适配解决方案&从框架结构到实现（超详细）（附代码）
前端·react.js·前端框架
Cachel wood1 天前
Vue.js前端框架教程8：Vue消息提示ElMessage和ElMessageBox
linux·前端·javascript·vue.js·前端框架·ecmascript
Super毛毛穗1 天前
Vue中＜script setup＞＜/script＞的主要语法元素和特性
前端·javascript·vue.js·前端框架
h_小波2 天前
探索 Vue.js 组件开发：从基础到进阶的完整指南
前端·vue.js·前端框架
多客软件佳佳2 天前
便捷的线上游戏陪玩、线下家政预约以及语音陪聊服务怎么做？系统代码解析
前端·游戏·小程序·前端框架·uni-app·交友
好开心332 天前
04、Vue与Ajax
前端·ajax·前端框架·vue·js
热门推荐
01〔AI 绘画〕Stable Diffusion 之 解决绘制多人或面部很小的人物时面部崩坏问题 篇02ARM学习（31）编译器对overlay方式的支持03玄机平台应急响应—webshell查杀04DisplayPort AltMode On Type-c协议_Ver2.0(学习笔记)05校验 GPT-4 真实性的三个经典问题：快速区分 GPT-3.5 与 GPT-4，并提供免费测试网站06Docker 夺命连环 15 问076个主流的工业3D管道设计软件08基于大语言模型（LLM）的合成数据生成、策展和评估的综述09(欧拉)openEuler系统添加网卡文件配置流程、(欧拉)openEuler系统手动配置ipv6地址流程、(欧拉)openEuler系统网络管理说明10树莓派 5 AI 套件（Hailo-8L）使用教程