React Js 部分生命周期方法和 React 中的钩子-js教程-PHP中文网

React Js Part Lifecycle Methods and Hooks in React

React 是一个 JavaScript 库，它允许我们以声明方式构建用户界面。 React 的关键概念之一是我们如何管理组件的生命周期。在本文中，我们将讨论两个主要方面：类组件中的生命周期方法和 Hook。

1. 类组件中的生命周期方法

生命周期方法是在组件生命周期的不同阶段调用的特殊方法。以下是一些最常见的生命周期方法及其用途：

一个。安装

constructor(props)：调用的第一个方法。通常用于初始化状态和绑定方法。

constructor(props) {
  super(props);
  this.state = { count: 0 };
}

登录后复制

componentDidMount()：在组件首次安装到 DOM 后调用。非常适合数据获取或初始化订阅。

componentDidMount() {
  this.fetchData();
}

登录后复制

b.更新中

componentDidUpdate(prevProps, prevState)：组件更新后调用。对于响应 props 或状态的变化很有用。请务必检查更改以避免无限循环。

componentDidUpdate(prevProps) {
  if (this.props.id !== prevProps.id) {
    this.fetchData();
  }
}

登录后复制

c.卸载

componentWillUnmount()：在组件从 DOM 中删除之前调用。对于清理订阅、计时器或其他需要清理的操作很有用。

componentWillUnmount() {
  this.cleanup();
}

登录后复制

d.错误处理

componentDidCatch(error, info)：用于捕获子组件中的错误。对于集中错误处理很有用。

componentDidCatch(error, info) {
  logErrorToMyService(error, info);
}

登录后复制

2.React Hooks简介

React Hooks 是一个允许我们使用状态和生命周期方法而无需编写类组件的功能。以下是一些最常用的 Hook：

一个。使用状态()

用于向功能组件添加状态。该函数返回一对：当前状态和更新它的函数。

import React, { useState } from 'react';

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

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

登录后复制

b.使用效果()

useEffect 允许我们在功能组件中运行副作用。它结合了 componentDidMount、componentDidUpdate 和 componentWillUnmount 的功能。

示例 1：使用空数组 ([]) 的 useEffect 当 useEffect 与空数组作为依赖项一起使用时，效果仅在组件安装后运行一次。

constructor(props) {
  super(props);
  this.state = { count: 0 };
}

登录后复制

示例 2：不使用依赖数组的 useEffect 如果提供的 useEffect 没有依赖项数组，则每次组件重新渲染时都会运行效果。

componentDidMount() {
  this.fetchData();
}

登录后复制

示例 3：具有依赖项数组的 useEffect 当您提供依赖项数组时，只要数组中的某个值发生更改，就会运行效果。

componentDidUpdate(prevProps) {
  if (this.props.id !== prevProps.id) {
    this.fetchData();
  }
}

登录后复制

c.使用上下文（）

useContext Hook 用于访问功能组件中的上下文。这对于共享全局数据（例如主题或用户身份验证状态）特别有用，无需进行道具钻探。

示例：使用 useContext 进行主题化
在此示例中，我们将创建一个简单的主题上下文，允许我们在浅色和深色主题之间切换。

1。创建主题上下文
首先，我们为主题创建一个上下文。

componentWillUnmount() {
  this.cleanup();
}

登录后复制

2。使用主题上下文
接下来，我们可以创建一个组件，该组件使用主题上下文来应用样式并提供一个按钮来切换主题。

componentDidCatch(error, info) {
  logErrorToMyService(error, info);
}

登录后复制

3。使用主题提供程序包装应用程序
最后，我们用 ThemeProvider 包装我们的应用程序（或其一部分），为其子级提供主题上下文。

import React, { useState } from 'react';

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

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

登录后复制

说明

主题上下文创建：我们使用 createContext 和 ThemeProvider 组件创建一个 ThemeContext，该组件管理当前主题状态并提供切换它的功能。
上下文消耗：在 ThemedComponent 中，我们使用 useContext(ThemeContext) 来访问当前主题和切换功能。该组件根据当前主题呈现不同的内容，并包含一个切换它的按钮。
应用程序结构：整个应用程序（或其一部分）包装在 ThemeProvider 中，允许任何子组件访问主题上下文。

d. useMemo() 和 useCallback()

useMemo()：缓存昂贵计算的结果，以避免每次渲染时重新计算。

import React, { useState, useEffect } from 'react';

const FetchDataOnce = () => {
  const [data, setData] = useState([]);

  useEffect(() => {
    const fetchData = async () => {
      const response = await fetch('https://api.example.com/data');
      const result = await response.json();
      setData(result);
    };

    fetchData();
  }, []); // Effect runs only once when the component mounts

  return (
    <ul>
      {data.map(item => (
        <li key={item.id}>{item.name}</li>
      ))}
    </ul>
  );
};

登录后复制

useCallback()：缓存函数以避免在每次渲染时重新创建它们。

import React, { useState, useEffect } from 'react';

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

  useEffect(() => {
    console.log(`Count updated: ${count}`);

    const fetchData = async () => {
      const response = await fetch(`https://api.example.com/data/${count}`);
      const result = await response.json();
      console.log(result);
    };

    fetchData();
  }); // Effect runs every time the component renders

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

登录后复制