使用 State 简写优化 React 组件

在 React 中，组件的 state 是维护组件内部状态的关键。为了更便捷地定义和更新组件的状态，React 支持一种新的类属性语法，称为“Class Properties”语法。这种语法允许我们在类定义中直接初始化组件的状态，使代码更加简洁和易读。

Class Properties 语法简介

在 React 类组件中，我们通常在构造函数中初始化组件的 state。使用 Class Properties 语法，我们可以将类的 state 直接定义在类体中，而无需显式声明构造函数。这样可以使组件定义更为紧凑，提高代码的可读性。

示例代码解析

以下是一个使用 Class Properties 语法优化的 React 类组件示例：

<html>
  <head>
    <title>State 简写</title>
  </head>
  <body>
    <div id="root"></div>
    <script type="text/javascript" src="../../js/react.development.js"></script>
    <script type="text/javascript" src="../../js/react-dom.development.js"></script>
    <script type="text/javascript" src="../../js/babel.min.js"></script>
    <script type="text/babel">
      class Hello extends React.Component {
        // 使用 Class Properties 语法初始化 state
        state = { isJudith: true }

        // 使用箭头函数定义类方法，确保 this 绑定正确
        changeName = () => {
          const { isJudith } = this.state;
          this.setState({ isJudith: !isJudith });
        }

        render() {
          const { isJudith } = this.state;
          return <h2 onClick={this.changeName}>你好: {isJudith ? 'Judith' : 'Zhang San'}</h2>;
        }
      }

      // 将组件渲染到根元素
      ReactDOM.render(<Hello />, document.getElementById('root'));
    </script>
  </body>
</html>

优势与总结

可读性提升： Class Properties 语法使组件定义更为简洁，减少了冗余的构造函数，使代码更易读。
代码量减少： 通过省略构造函数，我们减少了一些样板代码，使组件定义更为精简。
箭头函数的使用： Class Properties 语法通常搭配箭头函数使用，确保类方法内部的 this 指向正确。

总的来说，使用 Class Properties 语法是一种提高 React 代码质量和可维护性的简单方法。通过更清晰、更紧凑的代码，我们能够更专注于组件的业务逻辑。

参考

使用 State 简写优化 React 组件