1.4组件基础

文档摘要

1.4组件基础 React 组件基础详解 React 的核心理念是将用户界面拆分成独立、可复用的组件。组件是构建 React 应用的基础砖块，理解组件的概念和用法至关重要。组件的定义在 React 中，组件本质上是 JavaScript 函数或类，它们接收输入（称为 "props"），并返回描述屏幕上应该显示内容的 React 元素。 1.1 函数式组件 (Functional Components) 函数式组件是最简单的组件形式，它们是接收作为参数并返回 JSX 的纯函数。代码详解： : 定义一个名为的函数，它接收一个名为的参数，是一个对象，包含了传递给组件的所有属性。 : 返回一个 JSX 表达式。

1.4组件基础

React 组件基础详解

React 的核心理念是将用户界面拆分成独立、可复用的组件。组件是构建 React 应用的基础砖块，理解组件的概念和用法至关重要。

1. 组件的定义

在 React 中，组件本质上是 JavaScript 函数或类，它们接收输入（称为 "props"），并返回描述屏幕上应该显示内容的 React 元素。

1.1 函数式组件 (Functional Components)

函数式组件是最简单的组件形式，它们是接收 props 作为参数并返回 JSX 的纯函数。


import React from 'react';
// 函数式组件
function Welcome(props) {
  return <h1>Hello, {props.name}</h1>;
}
export default Welcome;

代码详解：

function Welcome(props): 定义一个名为 Welcome 的函数，它接收一个名为 props 的参数，props 是一个对象，包含了传递给组件的所有属性。
return <h1>Hello, {props.name}</h1>;: 返回一个 JSX 表达式。JSX 是一种 JavaScript 语法扩展，允许您在 JavaScript 代码中编写类似 HTML 的结构。{props.name} 用于在 JSX 中插入 props 对象中 name 属性的值。
export default Welcome;: 将组件导出，以便在其他文件中使用。

1.2 类组件 (Class Components)

类组件是使用 ES6 类定义的组件，它们可以拥有状态 (state) 和生命周期方法。


import React from 'react';
// 类组件
class Welcome extends React.Component {
  render() {
    return <h1>Hello, {this.props.name}</h1>;
  }
}
export default Welcome;

代码详解：

class Welcome extends React.Component: 定义一个名为 Welcome 的类，它继承自 React.Component。继承 React.Component 使 Welcome 类成为一个 React 组件。
render() { ... }: render 方法是类组件中必须定义的方法。React 会调用 render 方法来确定组件应该渲染什么。
this.props.name: 在类组件中，可以通过 this.props 访问传递给组件的属性。

Mermaid 图示：

2. Props (属性)

Props 是从父组件传递给子组件的数据。它们是只读的，子组件不能修改自己的 props。Props 允许组件接收动态数据并根据这些数据进行渲染。

示例：


import React from 'react';
import Welcome from './Welcome'; // 假设 Welcome 组件定义在 Welcome.js 文件中
function App() {
  return (
    <div>
      <Welcome name="Alice" />
      <Welcome name="Bob" />
    </div>
  );
}
export default App;

代码详解：

<Welcome name="Alice" />: 在 App 组件中，我们使用了 Welcome 组件两次，并分别传递了 name 属性，值为 "Alice" 和 "Bob"。
Welcome 组件内部通过 props.name 或 this.props.name 访问这些属性。

3. State (状态)

State 是组件内部的私有数据，用于存储组件自身的状态信息。与 props 不同，state 是可变的，组件可以修改自己的 state，修改 state 会触发组件的重新渲染。State 只能在类组件中使用。

示例：


import React from 'react';
class Counter extends React.Component {
  constructor(props) {
    super(props);
    this.state = { count: 0 };
    this.handleClick = this.handleClick.bind(this); // 绑定 this
  }
  handleClick() {
    this.setState({ count: this.state.count + 1 });
  }
  render() {
    return (
      <div>
        <p>Count: {this.state.count}</p>
        <button onClick={this.handleClick}>Increment</button>
      </div>
    );
  }
}
export default Counter;

代码详解：

constructor(props) { ... }: 构造函数是类组件中用于初始化 state 的地方。必须调用 super(props) 以确保正确初始化 this。
this.state = { count: 0 };: 初始化 state，将 count 属性设置为 0。
handleClick() { ... }: 定义一个名为 handleClick 的方法，用于处理按钮点击事件。
this.setState({ count: this.state.count + 1 });: 使用 this.setState 方法来更新 state。setState 接收一个对象，该对象包含要更新的 state 属性。更新 state 会触发组件的重新渲染，从而更新 UI。
this.handleClick = this.handleClick.bind(this);: 在构造函数中绑定 this 到 handleClick 方法。这是因为在 JavaScript 中，this 的值取决于函数的调用方式。如果不绑定 this，则在 handleClick 方法中 this 将会是 undefined。
onClick={this.handleClick}: 将 handleClick 方法作为 onClick 事件处理程序传递给按钮。

使用 useState Hook (函数式组件状态管理):

虽然state主要用于类组件，但React Hooks 提供了在函数式组件中使用状态的能力。


import React, { useState } from 'react';
function Counter() {
  const [count, setCount] = useState(0);
  const handleClick = () => {
    setCount(count + 1);
  };
  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={handleClick}>Increment</button>
    </div>
  );
}
export default Counter;

代码详解：

import { useState } from 'react';: 导入 useState Hook。
const [count, setCount] = useState(0);: 使用 useState Hook 创建一个名为 count 的 state 变量和一个名为 setCount 的更新 state 的函数。useState(0) 初始化 count 的值为 0。
setCount(count + 1);: 使用 setCount 函数来更新 count 的值。
onClick={handleClick}: 将 handleClick 方法作为 onClick 事件处理程序传递给按钮。

4. 组件的组合

组件可以通过嵌套组合成更复杂的 UI 结构。父组件可以将数据通过 props 传递给子组件，子组件可以根据 props 进行渲染。

示例：


import React from 'react';
import Welcome from './Welcome';
function App() {
  return (
    <div>
      <h1>Welcome to My App</h1>
      <Welcome name="Alice" />
      <Welcome name="Bob" />
    </div>
  );
}
export default App;

代码详解：

App 组件包含了 Welcome 组件的多个实例，并将不同的 name 属性传递给它们。

Mermaid 图示：

5. 条件渲染

React 允许您根据条件渲染不同的 UI 元素。

示例：


import React from 'react';
function Greeting(props) {
  const isLoggedIn = props.isLoggedIn;
  if (isLoggedIn) {
    return <h1>Welcome back!</h1>;
  }
  return <h1>Please sign up.</h1>;
}
function App() {
  return (
    <div>
      <Greeting isLoggedIn={true} />
      <Greeting isLoggedIn={false} />
    </div>
  );
}
export default App;

代码详解：

Greeting 组件根据 isLoggedIn 属性的值渲染不同的内容。

6. 列表渲染

React 允许您使用 map 函数来渲染列表数据。

示例：


import React from 'react';
function NumberList(props) {
  const numbers = props.numbers;
  const listItems = numbers.map((number) =>
    <li key={number.toString()}>
      {number}
    </li>
  );
  return (
    <ul>{listItems}</ul>
  );
}
function App() {
  const numbers = [1, 2, 3, 4, 5];
  return (
    <NumberList numbers={numbers} />
  );
}
export default App;

代码详解：

numbers.map((number) => ...): 使用 map 函数遍历 numbers 数组，并为每个元素创建一个 li 元素。
<li key={number.toString()}>: key 属性是 React 用于识别列表项的唯一标识符。为每个列表项提供一个 key 属性可以提高 React 的性能。通常使用数据的唯一ID作为key值。

总结

掌握 React 组件的基础知识是构建复杂 React 应用的关键。理解函数式组件和类组件的区别，以及如何使用 props 和 state 管理数据，可以帮助您编写可维护、可复用的 React 代码。记住，组件化是 React 的核心，合理地拆分和组合组件是构建高效 React 应用的关键。

作者与出处

原作者：灏天文库

来源：灏天文库

原文： https://aiknowledge.cn/collection/217-react%E5%89%8D%E7%AB%AF%E5%BC%80%E5%8F%91%E6%A0%B8%E5%BF%83%E6%8A%80%E6%9C%AF%E4%B8%8E%E5%AE%9E%E6%88%98

整理：灏天文库整理

由灏天文库平台收录，内容或由平台用户上传，仅供学习交流