什么是 React ⚛️ 和组件的概念

React ⚛️ 是一个用于构建用户界面的强大 JavaScript 库。它由 Facebook 于 2013 年开发，以其基于组件的架构和声明性方法彻底改变了 UI 开发。无论您是创建简单的 Web 应用程序还是复杂的系统，React 都可以让您高效且愉快地构建可重用的动态 UI。

本文深入探讨了 React 的基础知识及其核心概念：组件，并用大量代码示例来说明这些想法。

什么是 React？

React 的核心是一个 JavaScript 库，旨在构建动态和交互式用户界面。它专注于应用程序的视图层，遵循模型-视图-控制器（MVC）架构。 React 可以轻松创建随着应用程序数据变化而高效更新的界面。

为什么选择React？

1. 可重用组件：通过将模块化 UI 分解为独立、可重用的组件来开发模块化 UI。
2. 虚拟 DOM： 在更新实际 DOM 之前计算轻量级虚拟 DOM 中的更改，从而加快更新速度。
3. 声明式： 描述你想在 UI 中看到的内容，React 处理剩下的事情。
4. 丰富的生态系统： 利用 Redux、React Router 和 Next.js 等库来扩展 React 的功能。

React 中组件的概念

React 应用程序是使用 组件 构建的，它们是 React 应用程序的构建块。组件是 UI 的一个独立部分，封装了其逻辑、结构和样式。

功能组件

函数组件是简单的 JavaScript 函数，它们接受 props 作为输入并返回 React 元素。它们是现代 React 应用程序中最常见的组件类型。

示例：基本功能组件

function Welcome(props) {
  return <h1>Hello, {props.name}!</h1>;
}

// Usage
<Welcome name="Alice" />;

类组件

类组件是扩展了 React.Component 类的 ES6 类。在引入 hooks 之前它们被广泛使用。

示例：基本类组件

function Welcome(props) {
  return <h1>Hello, {props.name}!</h1>;
}

// Usage
<Welcome name="Alice" />;

组件剖析

示例：具有状态的功能组件

import React, { Component } from 'react';

class Welcome extends Component {
  render() {
    return <h1>Hello, {this.props.name}!</h1>;
  }
}

// Usage
<Welcome name="Alice" />;

分解：

1. 状态管理： useState 钩子用于管理组件内的状态（计数）。
2. Props：可以通过props将数据传递给组件。
3. 事件： onClick 事件处理程序会在单击按钮时更新状态。

道具与状态

Feature	Props	State
Definition	Data passed to a component from its parent.	Data managed within the component.
Mutability	Immutable (cannot be changed by the receiving component).	Mutable (can be updated within the component).
Usage	Used for passing data to child components.	Used for dynamic data that changes over time.

功能 道具 状态 标题> 定义 从父组件传递到组件的数据。 组件内管理的数据。 可变性 不可变（接收组件无法更改）。 可变（可以在组件内更新）。 用法 用于将数据传递给子组件。 用于随时间变化的动态数据。 表>

组件中的状态

State是React中的一个特殊对象，用于存储组件需要渲染的数据。功能组件使用 useState 钩子进行状态管理。

示例：带有状态的计数器

function Welcome(props) {
  return <h1>Hello, {props.name}!</h1>;
}

// Usage
<Welcome name="Alice" />;

组件中的道具

Props 是从父组件传递到子组件的参数，允许数据沿着组件层次结构流动。

示例：传递道具

import React, { Component } from 'react';

class Welcome extends Component {
  render() {
    return <h1>Hello, {this.props.name}!</h1>;
  }
}

// Usage
<Welcome name="Alice" />;

组合组件

React 鼓励嵌套组件从更小的、可重用的构建块构建复杂的 UI。

示例：嵌套组件

import React, { useState } from 'react';

function Counter() {
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>Increment</button>
    </div>
  );
}

类组件中的生命周期方法

类组件包括在安装、更新和卸载阶段执行操作的生命周期方法。对于功能组件，像 useEffect 这样的 React hooks 取代了这些生命周期方法。

示例：生命周期方法

import React, { useState } from 'react';

function Counter() {
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>Increment</button>
    </div>
  );
}

// Usage
;

示例：具有 useEffect 的生命周期

function Greeting({ name }) {
  return <h1>Welcome, {name}!</h1>;
}

function App() {
  return <Greeting name="John" />;
}

// Renders: Welcome, John!

React 中的事件处理

React 使处理事件变得简单。事件处理程序作为属性传递给元素并在事件发生时执行。

示例：点击事件

function Header() {
  return <header><h1>My Website</h1></header>;
}

function Main() {
  return <main><p>This is the main content.</p></main>;
}

function Footer() {
  return <footer><p>© 2024 My Website</p></footer>;
}

function App() {
  return (
    <div>
      <Header />
      <Main />
      <Footer />
    </div>
  );
}

// Usage
<App />;

示例：输入处理

import React, { Component } from 'react';

class Timer extends Component {
  componentDidMount() {
    console.log('Timer mounted');
  }

  componentWillUnmount() {
    console.log('Timer unmounted');
  }

  render() {
    return <p>Timer running...</p>;
  }
}

// Usage
<Timer />;

条件渲染

React 允许您根据应用程序逻辑有条件地渲染组件或元素。

示例：条件渲染

import React, { useEffect } from 'react';

function Timer() {
  useEffect(() => {
    console.log('Timer mounted');
    return () => console.log('Timer unmounted');
  }, []);

  return <p>Timer running...</p>;
}

// Usage
<Timer />;

列表和键

在 React 中渲染列表时，为每个元素分配唯一的键以帮助 React 识别更改非常重要。

示例：渲染列表

function Button() {
  function handleClick() {
    alert('Button clicked!');
  }

  return <button onClick={handleClick}>Click Me</button>;
}

// Usage
<Button />;

可重用组件

React 鼓励创建可在应用程序中重复使用的组件，以减少冗余。

示例：可重复使用的按钮组件

import React, { useState } from 'react';

function InputExample() {
  const [text, setText] = useState('');

  function handleChange(event) {
    setText(event.target.value);
  }

  return (
    <div>
      <input type="text" value={text} onChange={handleChange} />
      <p>You typed: {text}</p>
    </div>
  );
}

// Usage
<InputExample />;

结论

React 是构建现代 Web 应用程序的强大工具。其基于组件的架构，加上 props、state 和 hooks 等功能，使得创建动态、高效和可重用的 UI 成为可能。通过掌握 React 的核心概念并有效地使用其工具，开发人员可以提供卓越的用户体验，同时保持干净且可维护的代码库。准备好开始了吗？构建您的第一个 React 应用程序并查看组件的神奇作用！ ？

以上是什么是 React ⚛️ 和组件的概念的详细内容。更多信息请关注PHP中文网其他相关文章！