React Hooks完全指南

React Hooks完全指南

React Hooks是React 16.8引入的新特性，允许在函数组件中使用状态和其他React特性。

useState Hook

useState用于在函数组件中添加状态：

import React, { useState } from 'react';

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

  return (
    

      
计数: {count}
       setCount(count + 1)}>
        增加
      
    
  );
}

useEffect Hook

useEffect用于处理副作用，如数据获取、订阅或手动更改DOM：

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

function UserStatus({ userId }) {
  const [status, setStatus] = useState(null);

  useEffect(() => {
    fetchUserStatus(userId).then(status => {
      setStatus(status);
    });
  }, [userId]); // 依赖数组

  return <div>用户状态: {status}</div>;
}

自定义Hooks

自定义Hooks允许您在组件之间重用有状态逻辑：

import { useState, useEffect } from 'react';

function useWindowWidth() {
  const [width, setWidth] = useState(window.innerWidth);

  useEffect(() => {
    const handleResize = () => setWidth(window.innerWidth);
    
    window.addEventListener('resize', handleResize);
    
    return () => window.removeEventListener('resize', handleResize);
  }, []);

  return width;
}

React Hooks为函数组件带来了更多的功能和灵活性。