React useEffect挂钩的实例介绍

在本教程中，我们将在实例的帮助下学习如何在react中使用useEffect钩。

注意：如果你不了解钩子，那么请看我的反应钩子介绍。

useEffect钩子

useEffect钩子帮助我们在功能组件中使用生命周期方法。

在useEffect 钩子中我们可以使用三种生命周期方法，分别是componentDidMount,componentDidUpdate, 和componentWillUnmount 。

让我们通过例子来学习useEffect。

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

function App() {
  const [value, setValue] = useState(0);

 // this function runs when component mounts and component updates  useEffect(() => {    document.title = "My app";  });
  return (
    <div className="App">
      <h1>{value}</h1>
      <button onClick={() => setValue(value+1)}>Increment</button>
    </div>
  );
}

在上面的代码中，我们导入了两个钩子，分别是useEffect 和useState 。

如果你不知道useState钩子，请查看我之前的教程。

useEffect钩子将函数作为一个参数，并在组件加载到DOM时运行该函数。

我们还添加了一个increment 按钮，用来增加值并重新渲染DOM，但每当组件被重新渲染时，useEffect都会重新运行我们作为参数传递的函数，因为目前我们激活了两个生命周期方法componentDidMount,componentDidUpdate 。

为了停止componentDidUpdate 生命周期方法，我们需要传递一个空数组[] 作为第二个参数给useEffect 钩子。

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

function App() {
  const [value, setValue] = useState(0);

//The function only runs when component mounts to dom  useEffect(() => {    document.title = "My app";  },[]);
  return (
    <div className="App">
      <h1>{value}</h1>
      <button onClick={() => setValue(value+1)}>Increment</button>
    </div>
  );
}

现在，当一个组件被重新渲染时，我们停止运行这个函数。

与其让数组为空，我们还可以向数组传递一个条件值，只要给定的条件为真，就运行该函数。

function App() {
  const [value, setValue] = useState(0);
  const [active, setActive] = useState(false);

//The function runs when component mounts to dom
  useEffect(
    () => {
      document.title = "My app";
      if (value === 5) {
        setActive(!active);      }
    },
    // re-run the function when  value === 5
    [value === 5]  );

  return (
    <div className="App">
      <h1>{value}</h1>
      {/*We only disabled the button when value===5*/}
      <button onClick={() => setValue(value + 1)} disabled={active}>
        Increment
      </button>
      {active && <p>You've reached your limit for today</p>}
    </div>
  );
}

在上面的代码中，我们向数组传递了条件值value===5 ，这样，当组件加载到dom时，函数就开始运行，而当value ，达到5 ，它又开始运行。

你有没有看到在上图中，当值达到5时，我们禁用了按钮？

useEffect钩子 数据获取的例子

我们也可以使用useEffect钩子来获取功能组件中的数据。

import React, { useState, useEffect } from "react";
import ReactDOM from "react-dom";

const useFetch = url => {
  const [data, setData] = useState(null);

  async function fetchData() {
    const response = await fetch(url);    const json = await response.json();
    setData(json);  }

  useEffect(() => {fetchData()},[url]);
  return data;
};

function App() {

  const data = useFetch("https://jsonplaceholder.typicode.com/todos/1");

  if (!data) {
    return <div>Loading...</div>;
  } else {
    return (
      <ul>
        <li>{data.id}</li>
        <li>{data.title}</li>
      </ul>
    )
  }
}

export default App;