抛开 Class 生命周期，拥抱 Hooks 的新世界

2023-11-22 23:00:04

React Hooks：深入理解，打破 Class 生命周期惯性

作为一名经验丰富的 React 开发人员，你可能习惯于使用 Class 生命周期来管理组件状态和副作用。然而，最近推出的 Hooks 机制带来了一个全新的思维方式，让你可以摆脱 Class 生命周期的束缚，享受更加灵活高效的组件开发体验。

转换你的思维：从 Class 生命周期到 Hooks

习惯的力量是强大的，尤其是当涉及到编程时。但为了充分利用 Hooks 的优势，我们需要打破 Class 生命周期固有的思维定式。Hooks 为我们提供了更加灵活和可复用的代码结构，让我们能够专注于组件的功能本身，而无需再为生命周期函数而烦恼。

实例探究：列表查询页面

让我们以一个简单的列表查询页面为例，来说明如何将 Class 生命周期转换到 Hooks。

Class 生命周期方法

class ListQuery extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      loading: true,
      data: [],
    };
  }

  componentDidMount() {
    fetch('api/data')
      .then(res => res.json())
      .then(data => this.setState({ loading: false, data }));
  }

  render() {
    return (
      <>
        {this.state.loading ? 'Loading...' : <ul>{this.state.data.map(item => <li key={item.id}>{item.name}</li>)}</ul>}
      </>
    );
  }
}

Hooks 方法

import { useState, useEffect } from 'react';

const ListQuery = () => {
  const [loading, setLoading] = useState(true);
  const [data, setData] = useState([]);

  useEffect(() => {
    fetch('api/data')
      .then(res => res.json())
      .then(data => {
        setLoading(false);
        setData(data);
      });
  }, []);

  return (
    <>
      {loading ? 'Loading...' : <ul>{data.map(item => <li key={item.id}>{item.name}</li>)}</ul>}
    </>
  );
};