react-news/docs/react-hooks

React Hooks 是 React 16.8 版本中引入的新特性，它允许你在不编写类的情况下使用 state 以及其他的 React 特性。下面是一些关于 React Hooks 的基本概念和使用方法。

常用 Hooks

useState useState 是最常用的 Hook，它让你在函数组件中添加 React state。
```
const [count, setCount] = useState(0);
```

useEffect useEffect 允许你执行副作用操作，比如数据获取、订阅或手动更改 DOM。

useEffect(() => {
  // 数据获取或订阅等副作用
  return () => {
    // 组件卸载时需要执行的清理工作
  };
}, [依赖项]); // 依赖项变化时重新执行

useContext useContext 允许你订阅 React context，无需为每个组件显式添加 context。
```
const theme = useContext(ThemeContext);
```

例子

假设我们有一个简单的新闻列表组件，使用 useState 和 useEffect 来管理数据。

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

function NewsList() {
  const [news, setNews] = useState([]);

  useEffect(() => {
    // 模拟从服务器获取数据
    fetch('/api/news')
      .then(response => response.json())
      .then(data => setNews(data));
  }, []);

  return (
    <ul>
      {news.map(newsItem => (
        <li key={newsItem.id}>{newsItem.title}</li>
      ))}
    </ul>
  );
}

export default NewsList;

更多关于 React Hooks 的信息，可以查看官方文档。

[center] React Hooks [center]