【掌握React Hooks】useState与useEffect实战示例解析

最佳答案

引言

React Hooks 是 React 16.8 版本引入的新特点，它容许我们在函数组件中“钩子”利用类组件的特点，如状况管理、生命周期等。其中，useState 跟 useEffect 是两个最常用的 Hooks，本文将经由过程实战示例来剖析它们的利用方法。

useState实战示例

useState 用于在函数组件中增加状况，它接收一个初始值作为参数，并前去一个包含以后状况值跟更新状况值的数组。以下是一个简单的示例：

import React, { useState } from 'react';

function Counter() {
  // 申明一个名为 "count" 的状况变量，初始值为 0
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>你点击了 {count} 次</p>
      <button onClick={() => setCount(count + 1)}>点击我</button>
    </div>
  );
}

export default Counter;

鄙人面的示例中，我们利用 useState 申明白一个名为 count 的状况变量，并将其初始值设置为 0。setCount 是一个用于更新 count 的函数。每次点击按钮时，setCount 会将 count 的值增加 1。

useState进阶

惰性初始化state

useState 会在组件的初次衬着时履行，并且在之后的衬着中不会重新履行。这意味着，useState 的初始化值会被设置为传入的初始值，而不是组件挂载时的值。

function Counter() {
  // 惰性初始化state
  const [count, setCount] = useState(() => {
    console.log('组件挂载');
    return 0;
  });

  return (
    <div>
      <p>你点击了 {count} 次</p>
      <button onClick={() => setCount(count + 1)}>点击我</button>
    </div>
  );
}

鄙人面的示例中，即便我们修改了 useState 的初始值，它也不会影响组件的衬着。

获取上一次的值

我们可能经由过程在 useState 的回调函数中转达一个函数来获取上一次的值。

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

  const increment = (prevCount) => {
    return prevCount + 1;
  };

  return (
    <div>
      <p>你点击了 {count} 次</p>
      <button onClick={() => setCount(increment(count))}>点击我</button>
    </div>
  );
}

鄙人面的示例中，我们定义了一个名为 increment 的函数，它接收上一次的值作为参数，并前去新的值。如许，我们就可能在更新状况时获取到上一次的值。

useEffect实战示例

useEffect 用于在函数组件中履行反感化操纵，如数据恳求、订阅变乱等。它接收两个参数：一个回调函数跟一个依附数组。以下是一个简单的示例：

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

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

  useEffect(() => {
    console.log(`计数：${count}`);
  }, [count]); // 依附数组为[count]，仅在count变更时履行反感化

  return (
    <div>
      <p>你点击了 {count} 次</p>
      <button onClick={() => setCount(count + 1)}>点击我</button>
    </div>
  );
}

export default Counter;

鄙人面的示例中，我们利用 useEffect 来履行一个反感化操纵：在 count 变更时，打印出以后的计数。依附数组为 [count]，这意味着只有当 count 产生变更时，反感化操纵才会履行。

useEffect进阶

清理反感化

在某些情况下，我们可能须要在组件卸载时履行一些清理操纵，比方撤消订阅、清除准时器等。这时，我们可能利用 useEffect 的前去值来履行清理操纵。

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

function Counter() {
  const [count, setCount] = useState(0);
  let timer;

  useEffect(() => {
    timer = setTimeout(() => {
      console.log(`计数：${count}`);
    }, 1000);
    return () => {
      clearTimeout(timer);
    };
  }, [count]); // 依附数组为[count]，仅在count变更时履行反感化

  return (
    <div>
      <p>你点击了 {count} 次</p>
      <button onClick={() => setCount(count + 1)}>点击我</button>
    </div>
  );
}

export default Counter;

鄙人面的示例中，我们利用 setTimeout 来模仿一个准时器，并在 useEffect 的前去值中清除准时器，以履行清理操纵。

总结

本文经由过程实战示例剖析了 useState 跟 useEffect 的利用方法。在现实开辟中，公道利用这两个 Hooks 可能帮助我们更好地管理组件的状况跟反感化，进步代码的可读性跟可保护性。