React.js 中的术语和功能

React.js，通常称为 React，是一个强大的 JavaScript 库，用于构建用户界面，特别是单页应用程序 (SPA)。它使开发人员能够通过将复杂的 UI 分解为更小的、可重用的组件来创建复杂的 UI。要充分利用 React 的强大功能，了解其核心术语和功能非常重要。在本文中，我们将详细介绍您在使用 React.js 时需要了解的一些关键概念、术语和功能。

1. 组件

功能组件：

函数组件是当今定义 React 组件最常见的方式。它们只是返回表示 UI 的 JSX (JavaScript XML) 的 JavaScript 函数。函数组件还可以使用 React Hooks 来管理状态和副作用。

function Greeting() {
  return <h1 id="Hello-World">Hello, World!</h1>;
}

类组件：

在引入 React Hooks 之前，类组件是管理组件状态和生命周期方法的主要方式。尽管它们仍然被广泛使用，但带钩子的函数组件现在是首选方法。

class Greeting extends React.Component {
  render() {
    return <h1 id="Hello-World">Hello, World!</h1>;
  }
}

2. JSX（JavaScript XML）

JSX 是 JavaScript 的语法扩展，允许您直接在 JavaScript 中编写类似 HTML 的代码。 React 使用 JSX 来描述 UI 应该是什么样子。尽管 JSX 看起来像 HTML，但它在底层被编译成 JavaScript。

const element = <h1 id="Hello-JSX">Hello, JSX!</h1>;

您还可以通过将 JavaScript 表达式括在大括号中来将 JavaScript 表达式嵌入到 JSX 中：

const name = "React";
const element = <h1 id="Hello-name">Hello, {name}!</h1>;

3. 状态

State 是一个内置的 React 对象，用于存储有关组件当前情况的信息。每个组件都可以管理自己的状态，并在状态发生变化时重新渲染。函数组件使用 useState 钩子来管理状态，而类组件则使用 this.state 对象。

useState（函数组件）示例：

import { useState } from 'react';

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

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onclick="{()"> setCount(count + 1)}>Click me</button>
    </div>
  );
}

this.state（类组件）示例：

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

  render() {
    return (
      <div>
        <p>You clicked {this.state.count} times</p>
        <button onclick="{()"> this.setState({ count: this.state.count + 1 })}>
          Click me
        </button>
      </div>
    );
  }
}

4. 道具（属性）

Props 用于将数据从一个组件传递到另一个组件。它们就像允许组件相互通信的函数参数。道具是只读并且不能被接收组件修改。

例子：

function Welcome(props) {
  return <h1 id="Hello-props-name">Hello, {props.name}</h1>;
}

function App() {
  return <welcome name="React"></welcome>;
}

在此示例中，Welcome 组件从 App 组件接收 name 属性并渲染“Hello, React”。

5. 挂钩

挂钩是允许您“挂钩”函数组件中的 React 状态和生命周期功能的函数。两个最常用的钩子是：

使用状态：

允许您向功能组件添加状态。

function Greeting() {
  return <h1 id="Hello-World">Hello, World!</h1>;
}

使用效果：

处理副作用，例如数据获取、订阅或每次渲染后手动更改 DOM。

class Greeting extends React.Component {
  render() {
    return <h1 id="Hello-World">Hello, World!</h1>;
  }
}

其他常用的钩子包括 useContext、useReducer、useRef 和 useCallback。

6. 虚拟 DOM

React 使用 虚拟 DOM（实际 DOM 的轻量级副本）来优化 UI 更新。 React 不是直接操作真实 DOM，而是首先更新虚拟 DOM，然后计算出使实际 DOM 与虚拟版本同步所需的最小更改。此过程称为协调，可显着提高性能，尤其是在大型应用程序中。

7. 生命周期方法（类组件）

生命周期方法是类组件中的特殊方法，允许您挂钩组件生命周期的不同阶段（渲染、更新和卸载）。一些重要的生命周期方法包括：

• componentDidMount()：在组件挂载到 DOM 后调用一次。用于初始数据获取或订阅。

• componentDidUpdate()：每次重新渲染后调用。用于根据状态或道具更改执行更新。

• componentWillUnmount()：在从 DOM 中删除组件之前调用。用于清理任务，例如取消 API 调用或删除事件侦听器。

在函数组件中，可以使用useEffect实现相同的功能。

8. 条件渲染

在 React 中，您可以根据状态或属性有条件地渲染组件或元素。最常见的方法是使用 JavaScript 的三元运算符。

例子：

const element = <h1 id="Hello-JSX">Hello, JSX!</h1>;

条件渲染的其他方法包括在 JSX 中使用 if 语句或短路 (&&)。

9. 列表和键

在 React 中，元素列表是使用 .map() 方法创建的。列表中的每个项目都应该有一个唯一的“key”属性来帮助 React 优化渲染。

例子：

const name = "React";
const element = <h1 id="Hello-name">Hello, {name}!</h1>;

键应该是唯一且稳定的，帮助 React 识别哪些项目已更改、添加或删除。

10. 表单和受控组件

在 React 中，表单通常使用 受控组件 进行处理，其中表单元素（如输入）由 React 状态控制。这使得 React 可以完全控制表单元素的值。

例子：

import { useState } from 'react';

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

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onclick="{()"> setCount(count + 1)}>Click me</button>
    </div>
  );
}

在此示例中，输入的值由 React 状态控制，确保实时捕获输入字段中的任何变化。

11. 上下文API

Context API 允许您在组件之间共享状态或数据，而无需在每个级别手动向下传递道具（也称为“道具钻取”）。当您需要在整个应用程序中传递全局数据（例如用户身份验证或主题设置）时，它特别有用。

例子：

function Greeting() {
  return <h1 id="Hello-World">Hello, World!</h1>;
}

结论

React.js 提供了广泛的功能和术语供您掌握。从组件、JSX、状态和 props 的基础知识到钩子、上下文和生命周期方法等更高级的概念，React 为构建现代 Web 应用程序提供了灵活且可扩展的框架。理解这些关键概念和术语将使您能够释放 React 的全部潜力，并构建健壮、可维护和动态的用户界面。

以上是React.js 中的术语和功能的详细内容。更多信息请关注PHP中文网其他相关文章！