React Hooks 助力网易云音乐 PC 版重现经典

2023-09-20 17:38:44

好的，我已经理解您的要求，将立即开始生成文章。

**## **

## 前言

网易云音乐作为国内最受欢迎的音乐平台之一，以其海量的音乐库和丰富的功能赢得了众多用户的喜爱。然而，它的 PC 版界面却一直饱受诟病，不少用户抱怨其设计陈旧、交互繁琐。

为了让网易云音乐的 PC 版焕发新的生机，我们将采用 React Hooks 技术进行全面改造。React Hooks 是 React 16.8 版本中引入的一项重要特性，它允许我们在函数组件中使用状态和生命周期方法，从而极大地简化了组件的编写。

## 实现的功能

在本次改造中，我们将实现以下功能：

首页 UI： 重新设计首页的布局和视觉效果，使其更加美观和现代。
歌曲详情页面： 提供歌曲的详细信息，包括歌词、评论和相关推荐。
歌单详情页面： 展示歌单的歌曲列表，支持歌曲的播放、收藏和分享。
专辑详情页面： 显示专辑的详细信息，包括歌曲列表、封面图和发行日期。
详情页的播放和添加歌单： 支持在歌曲详情页和专辑详情页中播放歌曲，并提供添加歌单的功能。
音乐播放器列表： 在播放器中显示当前播放的歌曲列表，支持歌曲的拖动排序和删除。
歌曲单曲循环： 提供歌曲单曲循环的功能，让用户可以无限循环播放同一首歌曲。

## 核心代码

以下是一些核心代码示例：

首页 UI：

import { useState } from "react";

const HomePage = () => {
  const [showSidebar, setShowSidebar] = useState(false);

  return (
    <div className="home-page">
      <div className="sidebar">
        <button onClick={() => setShowSidebar(!showSidebar)}>
          {showSidebar ? "收起" : "展开"}
        </button>
      </div>
      <div className="main-content">
        {/* 首页内容 */}
      </div>
    </div>
  );
};

export default HomePage;

歌曲详情页面：

import { useState, useEffect } from "react";

const SongDetailPage = ({ songId }) => {
  const [songInfo, setSongInfo] = useState(null);
  const [lyrics, setLyrics] = useState(null);

  useEffect(() => {
    // 获取歌曲信息
    fetch(`/api/songs/${songId}`)
      .then(res => res.json())
      .then(data => setSongInfo(data))
      .catch(err => console.error(err));

    // 获取歌词
    fetch(`/api/lyrics/${songId}`)
      .then(res => res.text())
      .then(data => setLyrics(data))
      .catch(err => console.error(err));
  }, [songId]);

  return (
    <div className="song-detail-page">
      <h1>{songInfo?.name}</h1>
      <div className="song-info">
        <img src={songInfo?.coverUrl} alt={songInfo?.name} />
        <p>{songInfo?.artist}</p>
        <p>{songInfo?.album}</p>
      </div>
      <div className="lyrics">
        <pre>{lyrics}</pre>
      </div>
    </div>
  );
};

export default SongDetailPage;

播放器列表：

import { useState } from "react";

const Playlist = () => {
  const [songs, setSongs] = useState([]);

  const addSong = (song) => {
    setSongs([...songs, song]);
  };

  const removeSong = (song) => {
    setSongs(songs.filter(s => s.id !== song.id));
  };

  const reorderSongs = (sourceIndex, destinationIndex) => {
    const newSongs = [...songs];
    const [removedSong] = newSongs.splice(sourceIndex, 1);
    newSongs.splice(destinationIndex, 0, removedSong);
    setSongs(newSongs);
  };

  return (
    <div className="playlist">
      <ul>
        {songs.map((song, index) => (
          <li key={song.id}>
            {song.name}
            <button onClick={() => removeSong(song)}>删除</button>
          </li>
        ))}
      </ul>
      <button onClick={() => addSong({ id: 1, name: "新歌1" })}>添加歌曲</button>
      <DragDropContext onDragEnd={reorderSongs}>
        <Droppable droppableId="playlist">
          {(provided) => (
            <ul {...provided.droppableProps} ref={provided.innerRef}>
              {songs.map((song, index) => (
                <Draggable draggableId={song.id} index={index}>
                  {(provided) => (
                    <li {...provided.draggableProps} {...provided.dragHandleProps}>
                      {song.name}
                    </li>
                  )}
                </Draggable>
              ))}
              {provided.placeholder}
            </ul>
          )}
        </Droppable>
      </DragDropContext>
    </div>
  );
};

export default Playlist;