什么是React Hooks？

React Hooks是React 16.8引入的新特性，它允许你在不编写class组件的情况下使用state和其他React特性。

useState Hook示例

import React, { useState } from 'react';

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

  return (
    

      
当前计数：{count}
       setCount(count + 1)}>
        增加
      
    
  );
}

useEffect Hook的使用

useEffect Hook让你可以在函数组件中执行副作用操作，比如数据获取、订阅或者手动修改DOM。

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

function Example() {
  const [data, setData] = useState(null);

  useEffect(() => {
    fetch('https://api.example.com/data')
      .then(response => response.json())
      .then(data => setData(data));
  }, []);

  return (
    

      {data ? (
        
{data.message}
      ) : (
        
加载中...
      )}
    
  );
}

自定义Hook

自定义Hook是一种复用状态逻辑的方式，它不复用state本身，而是复用状态逻辑。

function useWindowSize() {
  const [size, setSize] = useState({
    width: window.innerWidth,
    height: window.innerHeight
  });

  useEffect(() => {
    const handleResize = () => {
      setSize({
        width: window.innerWidth,
        height: window.innerHeight
      });
    };

    window.addEventListener('resize', handleResize);
    return () => window.removeEventListener('resize', handleResize);
  }, []);

  return size;
}