React 组件（基于类与函数式）

React 组件是任何 React 应用程序的构建块。它们允许您将 UI 拆分为独立的、可重用的部分，可以单独管理和呈现。 React 组件有两种主要类型：功能组件和类组件。

功能组件
函数式组件更简单，并且被编写为 JavaScript 函数。它们将 props（输入数据）作为参数并返回 JSX，它描述了 UI 的外观。从 React 16.8 开始，函数式组件还可以使用 useState 和 useEffect 等钩子来处理状态和副作用。

import React, { useState } from 'react';

const Welcome = (props) => {
  const [count, setCount] = useState(0);

  return (
    <div>
      <h1 id="Hello-props-name">Hello, {props.name}!</h1>
      <p>You've clicked {count} times</p>
      <button onclick="{()"> setCount(count + 1)}>Click me</button>
    </div>
  );
};

export default Welcome;

类组件
类组件是在 React 中编写组件的原始方式。它们扩展了 React.Component 类，并且必须包含返回 JSX 的 render() 方法。类组件可以有自己的状态和生命周期方法，例如 componentDidMount、componentDidUpdate 和 componentWillUnmount。

import React, { Component } from 'react';

class Welcome extends Component {
  constructor(props) {
    super(props);
    this.state = { count: 0 };
  }

  handleClick = () => {
    this.setState({ count: this.state.count + 1 });
  }

  render() {
    return (
      <div>
        <h1 id="Hello-this-props-name">Hello, {this.props.name}!</h1>
        <p>You've clicked {this.state.count} times</p>
        <button onclick="{this.handleClick}">Click me</button>
      </div>
    );
  }
}

export default Welcome;

关键概念：

• JSX： JavaScript 的语法扩展，看起来像 HTML。 React 组件返回 JSX 来描述 UI。
• Props：“properties”的缩写，props 允许您将数据从父组件传递到子组件。
• State： 用于存储影响组件中渲染内容的动态数据的内置对象。只有使用状态的组件（函数组件或类组件）才能根据此数据的更改重新渲染。

钩子（用于功能组件）：

• useState：允许您管理功能组件中的状态。
• useEffect： 允许您在功能组件中执行副作用（例如，获取数据、更新 DOM）。

React 鼓励创建小型、可重用的组件，这些组件可以组合起来形成更大的应用程序，保持代码库模块化且更易于维护。

以上是React 组件（基于类与函数式）的详细内容。更多信息请关注PHP中文网其他相关文章！