AI 助理
备案控制台
开发者社区 开发与运维 文章 正文

8种方法帮助你写出高效的 React 组件 上

2022-05-30 93
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： 8种方法帮助你写出高效的 React 组件

ES6中的JavaScript已添加了许多功能。 这些更改有助于开发人员编写简短，易于理解和维护的代码。当您使用create-react-app创建React App时，您已经支持这些更改。 这是因为它使用Babel.js将ES6 +代码转换为所有浏览器都能理解的ES5代码。

在本文中，我们将探索各种方法来编写更短，更简单和更易于理解的React代码。

看看下面的代码：

import React from "react";
import "./styles.css";
export default class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      number1: "",
      number2: "",
      result: "",
      errorMsg: ""
    };
    this.onFirstInputChange = this.onFirstInputChange.bind(this);
    this.onSecondInputChange = this.onSecondInputChange.bind(this);
    this.handleAdd = this.handleAdd.bind(this);
    this.handleSubtract = this.handleSubtract.bind(this);
  }
  onFirstInputChange(event) {
    const value = event.target.value;
    this.setState({
      number1: value
    });
  }
  onSecondInputChange(event) {
    const value = event.target.value;
    this.setState({
      number2: value
    });
  }
  handleAdd(event) {
    event.preventDefault();
    const number1 = parseInt(this.state.number1, 10);
    const number2 = parseInt(this.state.number2, 10);
    const sum = number1 + number2;
    if (isNaN(sum)) {
      this.setState({
        errorMsg: "Please enter valid numbers."
      });
    } else {
      this.setState({
        errorMsg: "",
        result: sum
      });
    }
  }
  handleSubtract(event) {
    event.preventDefault();
    const number1 = parseInt(this.state.number1, 10);
    const number2 = parseInt(this.state.number2, 10);
    const subtraction = number1 - number2;
    if (isNaN(subtraction)) {
      this.setState({
        errorMsg: "Please enter valid numbers."
      });
    } else {
      this.setState({
        errorMsg: "",
        result: subtraction
      });
    }
  }
  render() {
    return (
      <div>
        <div className="input-section">
          {this.state.errorMsg && (
            <p className="error-msg">{this.state.errorMsg}</p>
          )}
          <label>First Number</label>
          <input
            type="text"
            name="number1"
            placeholder="Enter a number"
            value={this.state.number1}
            onChange={this.onFirstInputChange}
          />
        </div>
        <div className="input-section">
          <label>Second Number</label>
          <input
            type="text"
            name="number2"
            placeholder="Enter a number"
            value={this.state.number2}
            onChange={this.onSecondInputChange}
          />
        </div>
        <div className="result-section">
          Result: <span className="result">{this.state.result}</span>
        </div>
        <button type="button" className="btn" onClick={this.handleAdd}>
          Add
        </button>
        <button type="button" className="btn" onClick={this.handleSubtract}>
          Subtract
        </button>
      </div>
    );
  }
}

在这里，我们有两个输入文本框，用于接收用户的输入，还有两个按钮，用于计算作为输入提供的数字的加法和减法。

1.避免手动绑定事件处理程序

如您在React中所知，当我们附加任何onClick或onChange或任何其他事件处理程序时，如下所示：

<input
  ...
  onChange={this.onFirstInputChange}
/>

然后，处理函数（onFirstInputChange）不会保留此绑定。

这不是React的问题，而是JavaScript事件处理程序的工作方式。

因此，我们必须使用.bind方法像这样正确地绑定它：

constructor(props) {
  this.onFirstInputChange = this.onFirstInputChange.bind(this);
  this.onSecondInputChange = this.onSecondInputChange.bind(this);
  this.handleAdd = this.handleAdd.bind(this);
  this.handleSubtract = this.handleSubtract.bind(this);
}

上面的代码行将在处理程序函数中正确维护此类的绑定。

但是，为每个新的事件处理程序添加新的绑定代码很繁琐。 幸运的是，我们可以使用类属性语法对其进行修复。

使用类属性使我们可以直接在类内部定义属性。

对于Babel版本> = 7，Create-react-app内部使用@ babel / babel-plugin-transform-class-properties插件，而对于Babel版本<7，则使用babel / plugin-proposal-class-properties插件，因此您不必 手动配置它。

要使用它，我们需要将事件处理函数转换为箭头函数语法。

onFirstInputChange(event) {
  const value = event.target.value;
  this.setState({
    number1: value
  });
}

上面的代码可以如下编写：(箭头函数改写)

onFirstInputChange = (event) => {
  const value = event.target.value;
  this.setState({
    number1: value
  });
}

以类似的方式，我们可以转换其他三个函数：

onSecondInputChange = (event) => {
 // your code
}
handleAdd = (event) => {
 // your code
}
handleSubtract = (event) => {
 // your code
}

同样，也不需要在构造函数中绑定事件处理程序。 因此，我们可以删除该代码。 现在，构造函数将如下所示：

constructor(props) {
  super(props);
  this.state = {
    number1: "",
    number2: "",
    result: "",
    errorMsg: ""
  };
}

我们可以进一步简化它。 类属性语法允许我们直接在类内部声明任何变量，因此我们可以完全删除构造函数并将状态声明为类的一部分，如下所示：

export default class App extends React.Component {
  state = {
    number1: "",
    number2: "",
    result: "",
    errorMsg: ""
  };
  render() { }
}

整体改写后：

import React from "react";
import "./styles.css";
export default class App extends React.Component {
  state = {
    number1: "",
    number2: "",
    result: "",
    errorMsg: ""
  };
  onFirstInputChange = (event) => {
    const value = event.target.value;
    this.setState({
      number1: value
    });
  };
  onSecondInputChange = (event) => {
    const value = event.target.value;
    this.setState({
      number2: value
    });
  };
  handleAdd = (event) => {
    event.preventDefault();
    const number1 = parseInt(this.state.number1, 10);
    const number2 = parseInt(this.state.number2, 10);
    const sum = number1 + number2;
    if (isNaN(sum)) {
      this.setState({
        errorMsg: "Please enter valid numbers."
      });
    } else {
      this.setState({
        errorMsg: "",
        result: sum
      });
    }
  };
  handleSubtract = (event) => {
    event.preventDefault();
    const number1 = parseInt(this.state.number1, 10);
    const number2 = parseInt(this.state.number2, 10);
    const subtraction = number1 - number2;
    if (isNaN(subtraction)) {
      this.setState({
        errorMsg: "Please enter valid numbers."
      });
    } else {
      this.setState({
        errorMsg: "",
        result: subtraction
      });
    }
  };
  render() {
    return (
      <div>
        <div className="input-section">
          {this.state.errorMsg && (
            <p className="error-msg">{this.state.errorMsg}</p>
          )}
          <label>First Number</label>
          <input
            type="text"
            name="number1"
            placeholder="Enter a number"
            value={this.state.number1}
            onChange={this.onFirstInputChange}
          />
        </div>
        <div className="input-section">
          <label>Second Number</label>
          <input
            type="text"
            name="number2"
            placeholder="Enter a number"
            value={this.state.number2}
            onChange={this.onSecondInputChange}
          />
        </div>
        <div className="result-section">
          Result: <span className="result">{this.state.result}</span>
        </div>
        <button type="button" className="btn" onClick={this.handleAdd}>
          Add
        </button>
        <button type="button" className="btn" onClick={this.handleSubtract}>
          Subtract
        </button>
      </div>
    );
  }
}

2.使用单个事件处理程序方法

如果检查上面的代码，您将看到，对于每个输入字段，我们都有一个单独的事件处理程序函数onFirstInputChange和onSecondInputChange。

如果输入字段的数量增加，那么事件处理程序函数的数量也会增加，这是不好的。

例如，如果您要创建注册页面，那么会有很多输入字段。 因此，为每个输入字段创建单独的处理程序函数是不可行的。

让我们改变它。

要创建将处理所有输入字段的单个事件处理程序，我们需要为每个输入字段指定一个唯一名称，该名称与相应的状态变量名称完全匹配。

我们已经有了这个设置。 我们在状态中还定义了我们为输入字段指定的名称number1和number2。 因此，我们将两个输入字段的处理程序方法更改为onInputChange，如下所示：

<input
  type="text"
  name="number1"
  placeholder="Enter a number"
  onChange={this.onInputChange}
/>
<input
  type="text"
  name="number2"
  placeholder="Enter a number"
  onChange={this.onInputChange}
/>

并添加一个新的onInputChange事件处理程序，如下所示：

onInputChange = (event) => {
  const name = event.target.name;
  const value = event.target.value;
  this.setState({
    [name]: value
  });
};

在这里，设置状态时，我们使用动态值设置动态状态名称。 因此，当我们更改number1输入字段的值时，event.target.name将为number1，event.target.value将为用户输入的值。

当我们更改number2输入字段的值时，event.target.name将为number2，event.taget.value将为用户输入的值。

因此，这里我们使用ES6动态键语法来更新状态的相应值。

现在，您可以删除onFirstInputChange和onSecondInputChange事件处理程序方法。 我们不再需要它们。

完成代码如下：

import React from "react";
import "./styles.css";
export default class App extends React.Component {
  state = {
    number1: "",
    number2: "",
    result: "",
    errorMsg: ""
  };
  onInputChange = (event) => {
    const name = event.target.name;
    const value = event.target.value;
    this.setState({
      [name]: value
    });
  };
  handleAdd = (event) => {
    event.preventDefault();
    const number1 = parseInt(this.state.number1, 10);
    const number2 = parseInt(this.state.number2, 10);
    const sum = number1 + number2;
    if (isNaN(sum)) {
      this.setState({
        errorMsg: "Please enter valid numbers."
      });
    } else {
      this.setState({
        errorMsg: "",
        result: sum
      });
    }
  };
  handleSubtract = (event) => {
    event.preventDefault();
    const number1 = parseInt(this.state.number1, 10);
    const number2 = parseInt(this.state.number2, 10);
    const subtraction = number1 - number2;
    if (isNaN(subtraction)) {
      this.setState({
        errorMsg: "Please enter valid numbers."
      });
    } else {
      this.setState({
        errorMsg: "",
        result: subtraction
      });
    }
  };
  render() {
    return (
      <div>
        <div className="input-section">
          {this.state.errorMsg && (
            <p className="error-msg">{this.state.errorMsg}</p>
          )}
          <label>First Number</label>
          <input
            type="text"
            name="number1"
            placeholder="Enter a number"
            value={this.state.number1}
            onChange={this.onInputChange}
          />
        </div>
        <div className="input-section">
          <label>Second Number</label>
          <input
            type="text"
            name="number2"
            placeholder="Enter a number"
            value={this.state.number2}
            onChange={this.onInputChange}
          />
        </div>
        <div className="result-section">
          Result: <span className="result">{this.state.result}</span>
        </div>
        <button type="button" className="btn" onClick={this.handleAdd}>
          Add
        </button>
        <button type="button" className="btn" onClick={this.handleSubtract}>
          Subtract
        </button>
      </div>
    );
  }
}


文章标签：
JavaScript
前端开发
关键词：
react.js组件
React组件
方法React Native
前端修罗场
目录
相关文章
恬0917
|
6月前
|
资源调度 前端开发 JavaScript
React 的antd-mobile 组件库，嵌套路由
React 的antd-mobile 组件库，嵌套路由
恬0917
116 0
大树营养快线
|
24天前
|
前端开发
react hooks父组件调用子组件方法？
【10月更文挑战第6天】
大树营养快线
236 4
万少！
|
24天前
|
Android开发
jmessage-react-plugin的正确引入方法
jmessage-react-plugin的正确引入方法
万少！
12 1
小周sir
|
2月前
|
前端开发 JavaScript 开发者
请详细介绍React挂载阶段的方法。
请详细介绍React挂载阶段的方法。
小周sir
53 9
六卿
|
2月前
封装react-antd-table组件参数以及方法如rowSelection、pageNum、pageSize、分页方法等等
文章介绍了如何封装React-Antd的Table组件，包括参数和方法，如行选择（rowSelection）、页码（pageNum）、页面大小（pageSize）、分页方法等，以简化在不同表格组件中的重复代码。
六卿
56 0
wljslmz
|
3月前
|
前端开发 JavaScript
React 组件生命周期方法详解
【8月更文挑战第30天】
wljslmz
45 5
vohelon
|
3月前
|
前端开发 JavaScript API
学习 React 的方法
【8月更文挑战第26天】学习 React 的方法
vohelon
35 1
土木林森
|
3月前
|
前端开发 JavaScript 开发者
React生命周期方法完全指南：深入理解并高效应用每个阶段的钩子——从初始化到卸载的全方位解析
【8月更文挑战第31天】本文详细介绍了React组件生命周期方法，包括初始化、挂载、更新和卸载四个阶段的关键钩子。通过探讨每个阶段的方法，如`componentDidMount`和`componentWillUnmount`，帮助开发者在正确时机执行所需操作，提升应用性能。文章还提供了最佳实践，指导如何避免常见错误并充分利用最新钩子。
土木林森
78 0
wljslmz
|
3月前
|
前端开发 JavaScript 开发者
React 中的生命周期方法是什么？
【8月更文挑战第31天】
wljslmz
51 0
蓝易云
|
4月前
|
前端开发 Scala
Scala并发编程的react、loop方法详解
在这个例子中，`MyActor`会无限循环接收和处理消息。当收到一个字符串消息时，它会打印出"Received: "加上消息内容。如果收到其他类型的消息，它会打印"Unknown message"。
蓝易云
25 1