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

0 下载量 152 浏览量 更新于2024-09-02 收藏 45KB PDF 举报
本文主要总结了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的工作原理和最佳实践。