将 jQuery 代码迁移到 React.js

2020-09-28 08:00:00 · 飞浪

如果您计划将现有的 jQuery 代码慢慢过渡到 React.js，本指南将向您展示一些需要注意的事项。

介绍

jQuery 是一个广泛使用的 JavaScript 框架，用于前端 Web 开发。它的主要优势包括轻松引用 DOM 元素、将可操作项应用于元素（例如单击按钮时的逻辑）以及可扩展性，已有各种库。然而，jQuery 倾向于做很多标准 JavaScript 已经可以做的事情。此外，状态管理尚未成熟，而 React.js 已经将其作为主要功能解决了这个问题。

Github 等公司开始从 jQuery 转向其他东西，甚至是原生 JavaScript。如果您计划将现有的 jQuery 代码慢慢过渡到 React.js，本指南将向您展示您可能需要注意的一些事项。

引用 DOM 元素

jQuery 和 React.js 都引用目标 DOM 元素来添加额外的处理，但它们的方法根本不同。给定以下 HTML：

      <button id="btn-click">
  Click Me
</button>
    

各个 JavaScript 框架如何附加可点击的功能逻辑？

jQuery

      var $btnClick = $("#btn-click");

$btnClick.on("click", function() {
  alert("Button was clicked!");
});
    

正如您在 jQuery 中看到的，开发人员必须首先使用$()函数引用 DOM 元素，并传递 id 引用#或类引用.。然后将点击事件处理程序作为第一个参数字符串传递给查询元素的on()函数调用。第二个参数是函数本身，在本例中只是警告“按钮被点击了！”

React.js

如果在 jQuery 中，JavaScript 与 HTML 元素分开处理（因此有“查询”部分），那么 React.js 会将呈现的 HTML UI 视为容器的一部分，即所谓的组件。该组件将包含在目标<div>中呈现的所有必要元素。<button>元素本身不会成为初始 HTML 的一部分。相反，您可能有以下<div>元素：

      <div id="react-root"></div>

首先，您必须在单独的 JavaScript 文件中定义一个呈现按钮的组件：

      import React from 'react';

export default class ButtonComponent extends React.Component {
  constructor(props) {
    super(props);
  }

  handleButtonClicked() {
    alert("Button was clicked!");
  }

  render() {
    return (
      <div>
        <button onClick={this.handleButtonClicked.bind(this)}>
          Click Me
        </button>
      </div>
    );
  }
}
    

组件要呈现的所有 HTML 元素都以 JSX 的形式返回，JSX 是 JavaScript 的扩展，允许在 React.js 中声明类似 HTML 的元素来定义如何呈现界面。请注意，没有为<button>元素设置id属性。而是附加一个指向handleButtonClicked()方法定义的事件处理程序。包含一个.bind(this)以允许在整个函数调用过程中保留this的值。这是一种传递组件实例本身的方法，它公开了React.Component固有的其他方法（如setState() ）或用户定义的方法。可以说不需要明确的引用。与 jQuery 相比，主要区别在于 React.js 组件将存储其所有的 UI 需求，而 jQuery 则假定 UI 元素以 HTML 形式呈现。

管理国家

在页面中管理 JavaScript 变量的值可能会变得很麻烦。例如，假设您的应用程序中有一个名为message的变量，表示一个喊话。您希望将该消息显示在容器<div>中，如下所示：

      <div id="message">Message goes here</div>

jQuery

在 jQuery 方法中，所有内容仍从上到下读取。您可能有以下代码首先提取当前消息：

      var message = $("#message").html();
    

要更新消息，您必须再次引用 <div>并插入新值：

      var message = "New message"; // Normally set by some other logical routine

$("#message").html(message);

这种方法的一个缺点是必须多次设置消息 — 一次用于提取值，另一次用于为其分配新值。此外，需要额外的代码将消息插回到目标<div>。这往往会变得混乱，特别是如果您有另一个可能为消息设置新值的例程。在这种情况下，您必须再次调用$("#message").html(message)。

React.js

React.js 通过组件的state维护变量的单个实例来解决此问题。每个 React.js 组件都将在其中定义一个state对象，并在组件的构造函数中初始化。例如，假设您想要维护相同的消息值，并且任何会影响其值的逻辑例程都会自动反映在组件的 UI 中。您可能有以下内容：

      import React from 'react';

export default class MessageComponent extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      message: ""
    }
  }

  updateMessage(message) {
    this.setState({
      message: message
    });
  }

  render() {
    return (
      <div>
        {this.state.message}
      </div>
    );
  }
}
    

请注意，您最初在构造函数中在组件的状态中设置了消息。该组件有一个名为updateMessage(message)的方法，该方法又调用组件的setState()方法来更新message的值。这里的想法是，每次调用setState()时，组件都会按照render()中的调用重新渲染 UI ，因为render()返回的 JSX通过this.state.message显示消息，无论它当前具有什么值。

结论

React.js 乍一看可能很复杂，但从长期可维护性来看，它倾向于使用适当的状态管理来保持一切井然有序。jQuery 易于使用，但随着更多代码的添加，它往往会变得混乱。如果您计划从 jQuery 设置迁移到 React.js，请始终牢记以下几点：

将您的组件设计为可以安装到页面的独立 UI 元素。
使用组件内的状态变量和实用方法来控制组件如何呈现值。
调用setState()将通过render()重新渲染组件的 UI，同时更新状态值。

_{免责声明：本内容来源于第三方作者授权、网友推荐或互联网整理，旨在为广大用户提供学习与参考之用。所有文本和图片版权归原创网站或作者本人所有，其观点并不代表本站立场。如有任何版权侵犯或转载不当之情况，请与我们取得联系，我们将尽快进行相关处理与修改。感谢您的理解与支持！}

_查看原文

技术指南

阅读全文

将 jQuery 代码迁移到 React.js

杭州电子商务研究院

4年前 · 面向社会、服务行业、政产学研结合、整合资源、和谐发展

import React from 'react'; export default class ButtonComponent extends React.Component { constructor(props) { super(props); } handleButtonClicked() { alert("Button was clicked!"); } render() { return ( <div> <button onClick={this.handleButtonClicked.bind(this)}> Click Me </button> </div> ); } }

import React from 'react'; export default class MessageComponent extends React.Component { constructor(props) { super(props); this.state = { message: "" } } updateMessage(message) { this.setState({ message: message }); } render() { return ( <div> {this.state.message} </div> ); } }