React-Hooks-useEffect

最新推荐文章于 2024-06-07 11:01:38 发布

||·····

最新推荐文章于 2024-06-07 11:01:38 发布

阅读量230

点赞数

分类专栏： React-hooks js 文章标签： react js

本文链接：https://blog.csdn.net/wangzhan991011/article/details/117444900

版权

本文介绍了React Hooks中的useEffect，它允许在函数组件中执行副作用操作。使用空数组作为第二个参数可以让Effect只运行一次，通过数组依赖项跟踪变化以决定何时执行。返回的清理函数在组件卸载前执行，确保资源释放。多个Effect用于处理不同数据，避免混杂在一起。这是一个类似class组件生命周期的替代方案。

摘要由CSDN通过智能技术生成

React-Hooks-useEffect

1. Effect hook 可以让我们在函数式组件中执行副作用操作

// react官网示例
import React, { useState, useEffect } from 'react';

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

  // Similar to componentDidMount and componentDidUpdate:
  useEffect(() => {
    // Update the document title using the browser API
    document.title = `You clicked ${count} times`;
  });

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