将无状态转换为有状态组件颤动

在 React 中，组件可以分为两种类型：有状态组件和无状态组件。无状态组件是一种比较简单的组件，它只是接收一些属性，然后返回一些 JSX。而有状态组件则比无状态组件稍微复杂一点，它们可以存储一些内部状态，对用户的交互做出反应和改变。

在这篇文章中，我们将讨论如何将无状态组件转换为有状态组件，并添加一些状态和交互。

从无状态组件开始

首先，让我们看一个简单的无状态组件示例。这个组件只是展示了一些文本，没有任何用户交互或状态存储。

function Greeting(props) {
  return <div>Hello {props.name}!</div>
}

这是一个非常基本的组件，我们将其保存在一个名为 Greeting 的文件中，并在其他地方使用它。现在，我们希望向这个组件添加一些交互，并在其中存储一些状态。

创建有状态组件

要将无状态组件转换为有状态组件，我们需要将其转换为一个继承自 React.Component 的类组件。然后，我们可以在其中添加一些状态和事件处理程序。

class Greeting extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      name: this.props.name
    };

    this.handleChange = this.handleChange.bind(this);
  }

  handleChange(event) {
    this.setState({ name: event.target.value });
  }

  render() {
    return (
      <div>
        <h1>Hello {this.state.name}!</h1>
        <input type="text" value={this.state.name} onChange={this.handleChange} />
      </div>
    );
  }
}

这个组件在 constructor 方法中定义了一个初始状态，即 name 等于 props.name。然后，在 handleChange 方法中，我们可以使用 this.setState 方法来更新 name 状态。最后，在 render 方法中，我们使用了 this.state.name 来显示文本，以及一个输入框来修改它。

组件使用

现在，我们已经将无状态组件转换为有状态组件，并添加了一些状态和交互。但是，我们仍然可以像之前一样在其他地方使用它。

<Greeting name="John" />

这将渲染一个 Greeting 组件，其中 name 属性等于 "John"。这个组件将有一个文本框，用户可以在其中输入一个新的名字，并在页面上实时显示它。

结论

在本文中，我们讨论了如何将无状态组件转换为有状态组件，并添加一些状态和交互。我们学习了如何使用 React.Component 类，如何在 constructor 方法中定义状态，如何使用 this.setState 方法来更新状态，以及如何在 render 方法中使用状态和交互。希望这篇文章能帮助你更好地理解 React 组件的工作原理。