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>
    );
  }
}

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

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

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

热门文章

最新文章

相关课程

相关电子书

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

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

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

热门文章

最新文章

相关课程

相关电子书

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