React 组件的生命周期与上下文

前端

2023-12-28 12:13:24

React 基础五：组件基础之生命周期和上下文

＃＃

在 React 中，组件是构建用户界面的基本单位。每个组件都拥有其独特的生命周期，该生命周期决定了组件在不同阶段的行为方式。此外，组件还可以访问上下文，该上下文提供了有关组件及其祖先组件的额外信息。

组件生命周期

组件的生命周期由一系列钩子组成，这些钩子允许您在组件的不同阶段执行特定逻辑。这些钩子包括：

componentDidMount：在组件首次挂载到 DOM 时调用。
componentDidUpdate：在组件更新时调用，仅在组件属性或状态发生更改时调用。
componentWillUnmount：在组件从 DOM 中卸载时调用。

上下文

上下文是一种机制，允许组件访问祖先组件的状态或其他信息。这对于共享数据而无需显式传递道具非常有用。要访问上下文，您可以使用 useContext 钩子。

示例

以下示例演示了如何使用生命周期钩子和上下文：

import React, { useState, useContext } from 'react';
import MyContext from './MyContext';

const MyComponent = () => {
  const [count, setCount] = useState(0);
  const { data } = useContext(MyContext);

  useEffect(() => {
    console.log(`组件已挂载，count 为 ${count}`);
    return () => {
      console.log(`组件已卸载，count 为 ${count}`);
    };
  }, []);

  useEffect(() => {
    console.log(`组件已更新，count 为 ${count}`);
  }, [count]);

  return (
    <>
      <h1>{count}</h1>
      <button onClick={() => setCount(count + 1)}>增加</button>
      <p>{data}</p>
    </>
  );
};

export default MyComponent;