React组件基础教程：组件通信与列表渲染

本文主要介绍了React组件的基本用法，包括组件间如何传递值以及如何创建包含列表的组件。通过示例代码，展示了React的核心概念，如JSX语法、组件渲染和事件处理。 在React中，组件是构建用户界面的基本单元。它们可以独立地管理自己的状态和逻辑，并且可以通过props（属性）进行通信。以下是从给出的示例中提取出的关键知识点： 1. 组件定义： - 使用`class`关键字定义一个React组件，继承自`React.Component`。 - 示例中的`Com`组件定义了一个包含输入框、段落、另一个输入框和按钮的结构。 2. JSX语法： - JSX允许我们在JavaScript中编写类似HTML的结构，用于声明React元素。 - `ref`属性在JSX中用于获取组件或DOM元素的引用，以便在组件内部或外部进行操作。 3. 组件间传值： - 在React中，通常通过props从父组件向子组件传递数据。 - 但是，如果需要从子组件获取值，可以使用`ref`属性。例如，`<input ref={(input) => { this.input = input }}/>`将输入框的引用绑定到组件实例的一个属性上，这样就可以在点击事件处理函数中访问它。 4. 事件处理： - 在JSX中，事件处理函数是通过在元素上添加`onClick`, `onChange`等属性来指定的。 - 示例中，`onClick={this.click}`将`click`方法绑定到按钮的点击事件上，当按钮被点击时，执行`click`方法。 5. 渲染组件： - `ReactDOM.render()`方法用于在DOM中渲染React组件。 - 示例中，`ReactDOM.render(<Com />, document.getElementById('app'));`将`Com`组件渲染到ID为'app'的div元素内。 6. 列表渲染： - 创建列表通常涉及到从组件状态或props中获取数组并遍历它。 - 示例未给出完整的列表渲染代码，但通常会使用`map()`函数将数组中的每个元素映射为一个React元素。 理解这些基本概念对于学习和使用React至关重要。在实际开发中，组件化思想使得代码更易于管理和复用，而props和state则帮助管理组件的数据流，JSX提供了直观的UI表示方式，事件处理使得交互变得简单。同时，列表渲染是构建动态列表或表格等常见UI元素的基础。掌握这些技能，开发者可以高效地构建复杂的Web应用。