【热门主题】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()）操作

相关推荐
沉默璇年6 小时前
react中useMemo的使用场景
前端·react.js·前端框架
2401_882727576 小时前
BY组态-低代码web可视化组件
前端·后端·物联网·低代码·数学建模·前端框架
红绿鲤鱼7 小时前
React-自定义Hook与逻辑共享
前端·react.js·前端框架
zhenryx10 小时前
前端-react(class组件和Hooks)
前端·react.js·前端框架
Thomas游戏开发11 小时前
Unity3D 逻辑服的Entity, ComponentData与System划分详解
前端框架·unity3d·游戏开发
前端青山18 小时前
webpack进阶(一)
前端·javascript·webpack·前端框架·node.js
沉默璇年18 小时前
react中Fragment的使用场景
前端·react.js·前端框架
Fanfffff7201 天前
React中组件通信的几种方式
前端·react.js·前端框架
前端青山2 天前
React 中的Props特性及其应用
前端·javascript·react.js·前端框架
MavenTalk2 天前
React可以做全栈开发吗
前端·react native·react.js·前端框架·全栈开发
热门推荐
01(欧拉)openEuler系统添加网卡文件配置流程、(欧拉)openEuler系统手动配置ipv6地址流程、(欧拉)openEuler系统网络管理说明02PyTorch机器学习实现液态神经网络03【HarmonyOS】HUAWEI DevEco Studio 下载地址汇总04玄机平台应急响应—webshell查杀05Coze扣子平台完整体验和实践（附国内和国际版对比）06Ubuntu 20.04使用Livox mid 360 测试 FAST_LIO07【目标跟踪】相机运动补偿08Unity中PICO实现 隔空取物 和 接触抓取物体09RAG 实践- Ollama+RagFlow 部署本地知识库10怎样让音频速度变慢？请跟随以下方法进行操作