React组件基础教程：传值、生命周期与受控/非受控组件

本文主要总结了React组件的基本用法，包括组件间的值传递、组件的生命周期、以及受控组件和非受控组件的概念，并通过实例代码进行详细解释。 在React中，组件是构建用户界面的基本单元，它们可以独立地渲染和管理自己的状态。组件可以通过props（属性）来接收外部的数据，也可以通过事件处理来与父组件通信。 **组件间传值**：在React中，数据通常是单向流动的，从父组件流向子组件。在提供的例子中，可以看到一个名为`Com`的类组件，它包含两个输入框和一个段落，以及一个按钮。当点击按钮时，`click`方法会被触发，这个方法使用`refs`来访问并读取输入框和段落的值。`ref`是React提供的一种机制，允许我们直接引用DOM元素或React组件实例，以便于操作。在这个例子中，`ref={(input) => { this.input = input }}`将输入框的引用赋值给组件的`input`属性，同理，`ref={(p) => { this.p = p }}`和`ref="my"`则分别用于获取段落和另一个输入框的引用。 **组件的生命周期**：React组件有不同的生命周期方法，用于在特定时刻执行某些逻辑。例如，在挂载（Mounting）、更新（Updating）和卸载（Unmounting）阶段，我们可以利用如`componentDidMount`、`componentDidUpdate`和`componentWillUnmount`等生命周期方法进行数据获取、DOM操作或其他业务逻辑。 **受控组件与非受控组件**：在React中，表单元素的值有两种管理方式。受控组件是其值由React组件控制，每次改变都会通过事件处理函数更新状态，从而驱动组件重新渲染。例如，`<input type="text" value={this.state.value} onChange={this.handleChange} />`，这里的`value`属性和`onChange`事件展示了受控组件的用法。而非受控组件则是让表单元素自己管理其值，React并不直接控制。例如，`<input type="text" ref="my" />`，没有`value`和`onChange`，但可以通过`ref`获取当前值。 总结来说，React组件的基本用法涵盖了组件的创建、props的传递、组件间通信以及表单元素的管理。理解这些基础概念对于开发React应用至关重要，因为它们构成了React开发的核心思想。通过实例学习和实践，开发者可以更深入地掌握React的工作原理和最佳实践。