React Hooks 的优势和使用场景

# React Hooks 的优势和使用场景

## 核心优势

### 1. 简化组件逻辑
```javascript
// 类组件
class Counter extends React.Component {
  constructor(props) {
    super(props);
    this.state = { count: 0 };
  }

  render() {
    return (
      <div>
        <p>You clicked {this.state.count} times</p>
        <button onClick={() => this.setState({ count: this.state.count + 1 })}>
          Click me
        </button>
      </div>
    );
  }
}

// 函数组件 + Hooks
function Counter() {
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
}

• 代码量减少约40%
• 消除了类组件中的this绑定问题
• 逻辑更直观线性

2. 更好的逻辑复用

// 自定义Hook
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;
}

// 在多个组件中使用
function ComponentA() {
  const width = useWindowWidth();
  // ...
}

function ComponentB() {
  const width = useWindowWidth();
  // ...
}

• 替代高阶组件和render props模式
• 避免组件嵌套地狱
• 逻辑复用粒度更细

3. 更优的性能优化

function ExpensiveComponent({ value }) {
  const memoizedValue = useMemo(() => computeExpensiveValue(value), [value]);

  return <div>{memoizedValue}</div>;
}

• 精确控制重渲染条件
• 避免不必要的计算
• 细粒度的性能优化

主要使用场景

1. 状态管理

function Form() {
  const [name, setName] = useState('');
  const [email, setEmail] = useState('');

  return (
    <form>
      <input value={name} onChange={e => setName(e.target.value)} />
      <input value={email} onChange={e => setEmail(e.target.value)} />
    </form>
  );
}

• 适合管理表单状态
• 简单状态场景替代Redux
• 组件级别状态管理

2. 副作用处理

function DataFetcher({ id }) {
  const [data, setData] = useState(null);

  useEffect(() => {
    let isMounted = true;
    
    fetchData(id).then(response => {
      if (isMounted) setData(response);
    });

    return () => {
      isMounted = false;
    };
  }, [id]);

  return <div>{data}</div>;
}

• 数据获取
• 事件订阅
• DOM操作
• 定时器管理

3. 上下文访问

function ThemeButton() {
  const theme = useContext(ThemeContext);
  
  return (
    <button style={{ background: theme.background }}>
      Toggle Theme
    </button>
  );
}

• 简化Context使用
• 避免多级props传递
• 全局状态访问

4. 复杂逻辑封装

function useLocalStorage(key, initialValue) {
  const [storedValue, setStoredValue] = useState(() => {
    try {
      const item = window.localStorage.getItem(key);
      return item ? JSON.parse(item) : initialValue;
    } catch (error) {
      return initialValue;
    }
  });

  const setValue = value => {
    try {
      const valueToStore = value instanceof Function ? value(storedValue) : value;
      setStoredValue(valueToStore);
      window.localStorage.setItem(key, JSON.stringify(valueToStore));
    } catch (error) {
      console.log(error);
    }
  };

  return [storedValue, setValue];
}

• 持久化状态
• 表单验证
• 动画控制
• 业务逻辑复用

最佳实践

1. 遵循Hooks调用规则

   • 只在顶层调用Hooks
   • 只在React函数中调用Hooks

2. 优化依赖数组

   useEffect(() => {
     //