React 函数组件如何一步一步到真实 DOM

前端

2024-01-30 10:37:42

React 函数组件：深入剖析其生命周期和更新过程

在 React 生态系统中，函数组件扮演着至关重要的角色。这些特殊类型的组件用 JavaScript 函数定义，以其简洁性和易用性著称。本文将深入探讨 React 函数组件，从其生命周期、props 校验到更新过程，为你提供全面的理解。

React 函数组件的生命周期

函数组件没有生命周期方法，但仍遵循一个特定的生命周期：

创建： 函数组件被创建并初始化。
挂载： 函数组件被添加到 DOM 树中。
更新： 函数组件的 props 或 state 发生变化时，它会重新渲染。
卸载： 函数组件从 DOM 树中移除。

React 函数组件的 props 校验

props 校验有助于确保函数组件接收正确格式的 props。React 提供了一个 propTypes 对象，用于定义组件所需的 props 类型。如果传递的 props 不符合 propTypes，React 将抛出错误。

const MyComponent = ({ name, age }) => {
  return <h1>Hello, {name}! You are {age} years old.</h1>;
};

MyComponent.propTypes = {
  name: PropTypes.string.isRequired,
  age: PropTypes.number.isRequired,
};

React 函数组件的更新过程

当函数组件的 props 或 state 发生变化时，它将进行更新。更新过程如下：

React 比较新旧 props 和 state。
如果有差异，调用 render 方法重新渲染组件。
React 比较渲染后的结果。
如果有差异，React 将更新 DOM。

示例代码

下面的示例演示了 React 函数组件的生命周期和更新过程：

import React, { useState } from 'react';

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

  const handleClick = () => {
    setCount(prevCount => prevCount + 1);
  };

  return (
    <>
      <h1>Count: {count}</h1>
      <button onClick={handleClick}>Increment</button>
    </>
  );
};

export default MyComponent;