草庐IT

前端工程化实战：React 模块化开发、性能优化和组件化实践

githxk 2023-04-17 原文

前端工程化实战是指通过组织工作流程、使用工具和技术来提高前端开发效率和质量的一种方法。常见的前端工程化实践包括模块化开发、自动化构建、代码检查和测试、性能优化等。下面将简要介绍模块化开发、性能优化和组件化实践。

  1. 模块化开发

在 React 中实现模块化开发的方式有两种：CommonJS 模块和 ES6 模块。

CommonJS 模块化开发：

点击查看代码 
// 引入依赖
const React = require('react')
const ReactDOM = require('react-dom')

// 定义组件
const App = React.createClass({
  render: function() {
    return <div>Hello World!</div>
  }
})

// 渲染组件
ReactDOM.render(
  <App />,
  document.getElementById('app')
)

ES6 模块化开发：

点击查看代码 
// 引入依赖
import React from 'react'
import ReactDOM from 'react-dom'

// 定义组件
class App extends React.Component {
  render() {
    return <div>Hello World!</div>
  }
}

// 渲染组件
ReactDOM.render(
  <App />,
  document.getElementById('app')
)
  1. 性能优化

在 React 中，可以通过 shouldComponentUpdate 方法来控制组件的更新。默认情况下，每次 setState 或者 props 改变都会导致组件重新渲染。但是有些情况下，组件并不需要重新渲染，这时可以通过 shouldComponentUpdate 方法来实现性能优化。

shouldComponentUpdate 方法接收两个参数：nextProps 和 nextState，表示组件将要更新的 props 和 state。shouldComponentUpdate 方法返回一个布尔值，如果为 true，表示组件需要重新渲染，如果为 false，表示组件不需要重新渲染。

举个例子，实现一个只有在 props.count 变化时才重新渲染的组件：

点击查看代码 
class Count extends React.Component {
  shouldComponentUpdate(nextProps, nextState) {
    return nextProps.count !== this.props.count
  }

  render() {
    return <div>{this.props.count}</div>
  }
}
  1. 组件化实践

组件化是 React 的核心思想之一，能够将页面拆分成多个独立的组件，每个组件只需要关注自己的逻辑和样式。在实践中，可以将组件拆分成 UI 组件和容器组件。

UI 组件：只关注展示和交互，不关心数据来源和数据变化。

点击查看代码 
class Button extends React.Component {
  render() {
    const { onClick, text } = this.props
    return <button onClick={onClick}>{text}</button>
  }
}

容器组件：负责管理数据和业务逻辑，渲染 UI 组件。

点击查看代码 
class App extends React.Component {
  constructor(props) {
    super(props)
    this.state = { count: 0 }
  }

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

  render() {
    return (
      <div>
        <Button onClick={() => this.increment()} text={`Count: ${this.state.count}`} />
      </div>
    )
  }
}

以上就是前端工程化实战中 React 的模块化开发、性能优化和组件化实践的简单介绍和示例代码。

组件化工程化detailssummaryReact

有关前端工程化实战：React 模块化开发、性能优化和组件化实践的更多相关文章

  1. 微信小程序开发入门与实战（Behaviors使用） - 2

    @作者:SYFStrive @博客首页:HomePage📜：微信小程序📌：个人社区（欢迎大佬们加入）👉：社区链接🔗📌：觉得文章不错可以点点关注👉：专栏连接🔗💃：感谢支持,学累了可以先看小段由小胖给大家带来的街舞👉微信小程序（🔥）目录自定义组件-behaviors    1、什么是behaviors    2、behaviors的工作方式    3、创建behavior    4、导入并使用behavior    5、behavior中所有可用的节点    6、同名字段的覆盖和组合规则总结最后自定义组件-behaviors    1、什么是behaviorsbehaviors是小程序中，用于实现

  2. ruby-on-rails - Ruby 长时间运行的进程对队列事件使用react - 2

    我有一个将某些事件写入队列的Rails3应用。现在我想在服务器上创建一个服务，每x秒轮询一次队列，并按计划执行其他任务。除了创建ruby​​脚本并通过cron作业运行它之外，还有其他稳定的替代方案吗？ 最佳答案 尽管启动基于Rails的持久任务是一种选择，但您可能希望查看更有序的系统，例如delayed_job或Starling管理您的工作量。我建议不要在cron中运行某些东西，因为启动整个Rails堆栈的开销可能很大。每隔几秒运行一次它是不切实际的，因为Rails上的启动时间通常为5-15秒，具体取决于您的硬件。不过，每天这样做几

  3. Ruby 缺少常量表达式优化？ - 2

    我希望Ruby的解析器会进行这种微不足道的优化，但似乎并没有(谈到YARV实现，Ruby1.9.x、2.0.0):require'benchmark'deffib1a,b=0,1whileb由于这两种方法除了在第二种方法中使用预定义常量而不是常量表达式外是相同的，因此Ruby解释器似乎在每个循环中一次又一次地计算幂常数。是否有一些Material说明为什么Ruby根本不进行这种基本优化或只在某些特定情况下进行？ 最佳答案 很抱歉给出了另一个答案，但我不想删除或编辑我之前的答案，因为它下面有有趣的讨论。正如JörgWMittag所说，

  4. ruby-on-rails - 在 Rails 应用程序的前端获取实时日志 - 2

    在Rails3.x应用程序中，我正在使用net::ssh并向远程pc运行一些命令。我想向用户的浏览器显示实时日志。比如，如果两个命令在net中运行::ssh执行即echo"Hello",echo"Bye"被传递然后"Hello"应该在执行后立即显示在浏览器中。这是代码我在ruby​​onrails应用程序中使用ssh连接和运行命令Net::SSH.start(@servers['local'],@machine_name,:password=>@machine_pwd,:timeout=>30)do|ssh|ssh.open_channeldo|channel|channel.requ

  5. ruby - 如何在转换器插件中访问页面属性(YAML 前端) - 2

    我正在为Jekyll编写一个转换器插件，需要访问一些页眉(YAML前端)属性。只有内容被传递给主要的转换器方法，似乎无法访问上下文。例子:moduleJekyllclassUpcaseConverter关于如何在转换器插件中访问页眉数据有什么想法吗？ 最佳答案 基于Jekyll源代码，无法在转换器中检索YAML前端内容。根据您的情况，我看到了两种可行的解决方案。您的文件扩展名可以具有足够的描述性，以提供您本应包含在前言中的信息。看起来Converter插件的设计就是这么基本的。如果修改Jekyll是一个选项，您可以更改Convert

  6. ruby-on-rails - 优化读取数据库和写入csv文件 - 2

    我正在尝试从数据库中读取大量单元格(超过100.000个)并将它们写入VPSUbuntu服务器上的csv文件。碰巧服务器没有足够的内存。我正在考虑一次读取5000行并将它们写入文件，然后再读取5000行，等等。我应该如何重构我当前的代码以使内存不会被完全消耗？这是我的代码:defwrite_rows(emails)File.open(file_path,"w+")do|f|f该函数由sidekiqworker调用:write_rows(user.emails)感谢您的帮助! 最佳答案 这里的问题是，当您调用emails.each时，

  7. ruby - 单个 EventMachine react 器中的多个服务器 - 2

    是否可以在单个事件机器中运行多个服务器？我的意思是，多个服务可以由一个客户端连接同时使用。例如，登录服务器对用户进行身份验证，然后用户可以同时使用聊天室和简单的游戏，例如带有单个客户端套接字的跳棋？或者我是否需要为每个服务使用多个事件机器react器？ 最佳答案 我试过了，它正在工作:#!/usr/bin/envrubyrequire'eventmachine'moduleEchoServerdefpost_initputs"--someoneconnectedtotheechoserver!"enddefreceive_datad

  8. 软约束、硬约束、Minimum Snap的轨迹优化方法 - 2

    文章目录前言约束硬约束的轨迹优化Corridor-BasedTrajectoryOptimizationBezierCurveOptimizationOtherOptions软约束的轨迹优化Distance-BasedTrajectoryOptimization优化方法前言可以看看我的这几篇Blog1，Blog2，Blog3。上次基于MinimumSnap的轨迹生成，有许多优点，比如：轨迹让机器人可以在某个时间点抵达某个航点。任何一个时刻，都能数学上求出期望的机器人的位置、速度、加速度、导数。MinimumSnap可以把问题转换为凸优化问题。缺点：MnimumSnap可以控制轨迹一定经过中间的

  9. ruby-on-rails - 负载测试期间 Unicorn CPU 使用率激增，优化方法 - 2

    我对为我的RubyonRails3.1.3应用优化我的Unicorn设置的方法很感兴趣。我目前正在高CPU超大实例上生成14个工作进程，因为我的应用程序在负载测试期间似乎受CPU限制。在模拟负载测试中，每秒大约20个请求重放请求，我的实例上的所有8个内核都达到峰值，盒子负载飙升至7-8个。每个unicorn实例使用大约56-60%的CPU。我很好奇可以通过哪些方式对其进行优化？我希望能够每秒将更多请求汇集到这种大小的实例上。内存和所有其他I/O一样完全正常。在我的测试过程中，CPU越来越低。 最佳答案 如果您受CPU限制，您希望使用

  10. 美团外卖搜索基于Elasticsearch的优化实践 - 2

    美团外卖搜索工程团队在Elasticsearch的优化实践中，基于Location-BasedService（LBS）业务场景对Elasticsearch的查询性能进行优化。该优化基于Run-LengthEncoding（RLE）设计了一款高效的倒排索引结构，使检索耗时（TP99）降低了84%。本文从问题分析、技术选型、优化方案等方面进行阐述，并给出最终灰度验证的结论。1.前言最近十年，Elasticsearch已经成为了最受欢迎的开源检索引擎，其作为离线数仓、近线检索、B端检索的经典基建，已沉淀了大量的实践案例及优化总结。然而在高并发、高可用、大数据量的C端场景，目前可参考的资料并不多。因此

随机推荐