React函数组件基础01 - hooks & router

前端

2023-12-28 05:41:41

从类组件到函数组件

在React中，组件通常分为两种：类组件和函数组件。类组件使用class定义，而函数组件使用函数定义。函数组件在某些情况下比类组件更简单、更易于编写。

Hooks简介

Hooks是React 16.8中引入的新特性，它允许函数组件使用state和其他React特性。最常用的Hooks是useState和useEffect。

useState用于管理组件的内部状态。它接受一个初始状态值，并返回一个包含当前状态值和一个更新状态值的函数的数组。

useEffect用于在组件挂载、更新或卸载时执行某些副作用。它接受一个回调函数和一个依赖项数组。当依赖项数组中的任何值发生变化时，回调函数就会执行。

使用Hooks管理状态

让我们通过一个简单的示例来说明如何使用Hooks来管理状态。假设我们有一个组件，它有一个计数器，我们可以通过点击按钮来增加计数器。

import React, { useState } from 'react';

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

  const handleClick = () => {
    setCount(count + 1);
  };

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={handleClick}>Increment</button>
    </div>
  );
}

export default Counter;

在这个示例中，我们使用useState来管理组件的内部状态。我们定义了一个名为count的state变量，其初始值为0。我们还定义了一个名为setCount的函数，它用于更新count的值。

当用户点击按钮时，handleClick函数会被调用。该函数将count的值增加1，并通过调用setCount函数将新的count值设置为状态。

使用Hooks获取数据

Hooks还可以用于在组件中获取数据。最常用的Hooks是useEffect。

useEffect接受一个回调函数和一个依赖项数组。当依赖项数组中的任何值发生变化时，回调函数就会执行。

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

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

  useEffect(() => {
    fetch('https://example.com/data')
      .then(res => res.json())
      .then(data => setData(data));
  }, []);

  return (
    <div>
      {data.map(item => (
        <p>{item.name}</p>
      ))}
    </div>
  );
}

export default DataFetcher;

在这个示例中，我们使用useEffect来获取数据。我们定义了一个名为data的state变量，其初始值为一个空数组。

useEffect回调函数中，我们使用fetch函数从服务器获取数据。当数据获取完成后，我们使用setData函数将数据设置为状态。

使用Hooks实现路由

Hooks还可以用于在组件中实现路由。最常用的Hooks是useParams。

useParams接受一个对象，其中包含当前路由的参数。我们可以使用useParams来获取当前路由的参数，并根据参数来渲染不同的内容。

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

function Profile() {
  const { username } = useParams();
  const [user, setUser] = useState(null);

  useEffect(() => {
    fetch(`https://example.com/users/${username}`)
      .then(res => res.json())
      .then(user => setUser(user));
  }, [username]);

  return (
    <div>
      {user ? (
        <div>
          <h1>{user.name}</h1>
          <p>{user.bio}</p>
        </div>
      ) : (
        <p>Loading...</p>
      )}
    </div>
  );
}

export default Profile;