20230523----重返学习-Hooks组件useState()-Hooks组件useEffect()-Hook函数组件说明

在React中，Hooks是一种在函数组件中使用state和其他React特性的方式。useState()是React提供的一个Hook，它允许你在函数组件中添加state。useEffect()是另一个Hook，它用于处理函数组件中的副作用。

以下是使用useState()和useEffect()的示例代码：

import React, { useState, useEffect } from 'react';
 
function ExampleComponent() {
  // 使用useState()添加state
  const [count, setCount] = useState(0);
 
  // 使用useEffect()添加副作用
  useEffect(() => {
    // 更新标题
    document.title = `You clicked ${count} times`;
  });
 
  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
}
 
export default ExampleComponent;

在这个例子中，ExampleComponent是一个函数组件，它使用useState()来跟踪用户点击的次数，并使用useEffect()来更新文档标题以反映点击次数。每次用户点击按钮，count就会增加，并且useEffect()会捕捉到这个变化，从而更新页面标题。