React类组件新闻拉取功能如何重构为React Hooks实现

原有代码核心问题 #

• 未将类组件改造为函数组件结构，Hooks只能在函数组件或自定义Hook内部调用，原代码直接在类作用域下声明useState违反Hooks使用规则
• 类生命周期componentDidMount未替换为Hooks对应的useEffect实现
• 状态声明不符合需求：原类组件需要news、error两个状态，原代码声明的hideNews、showNews无实际使用场景
• 保留了类组件特有的this.state、this.setState语法，函数组件中不存在类实例this指向的逻辑

重构后完整代码 #

// 引入需要的Hooks：useState存状态，useEffect模拟生命周期
import React, { useState, useEffect } from 'react';
// 注意：如果组件名是FeedPrime，请和导入命名保持统一
import Feeder from './Feeder';
import Error from './Error';

// 改为函数组件写法
const NewsFeeder = () => {
  // 声明对应状态，和原类组件state完全对应
  const [news, setNews] = useState([]);
  const [error, setError] = useState(false);

  // 空依赖数组的useEffect 等价于类组件的componentDidMount，只在首次挂载后执行一次
  useEffect(() => {
    const url = `https://newsfeed.com`;
    fetch(url)
      .then((response) => {
        // 可选优化：判断响应状态，fetch默认只有网络异常才触发catch
        if (!response.ok) throw new Error('接口响应异常')
        return response.json();
      })
      .then((data) => {
        // 调用状态更新方法赋值
        setNews(data.articles)
      })
      .catch((error) => {
        setError(true)
      });
  }, [])

  // 原renderItems方法改为内部普通函数
  const renderItems = () => {
    if (!error) {
      // 直接访问状态变量，不需要加this.state
      return news.map((item) => (
        <Feeder key={item.url} item={item} />
      ));
    } else {
      return <Error />;
    }
  }

  // 函数组件直接返回模板，不需要render方法包裹
  return (
    <div className="row">
      {renderItems()}
    </div>
  );
}

export default NewsFeeder;

注意事项 #

• 若你实际需要使用hideNews控制内容显隐，可以自行保留对应的useState声明，在模板中添加判断逻辑即可
• 如果接口返回的字段结构和data.articles不一致，根据实际返回值调整赋值逻辑即可

内容的提问来源于stack exchange，提问作者freeSc0tt