与React全家桶一起用爱发电，构建网易云音乐PC客户端（四）

大家好，我是「风不识途」。本系列教程旨在指导大家使用React全家桶构建一个网易云音乐PC客户端，重点在于完成音乐播放器列表的功能。教程深入浅出，循序渐进，适合前端开发人员学习和实践。

在上一篇文章中，我们已经完成了音乐播放器的基本功能。在本篇文章中，我们将重点完成音乐播放器列表的功能。

音乐播放器列表

音乐播放器列表是音乐播放器的重要组成部分，它可以帮助用户管理和播放音乐。音乐播放器列表的功能主要包括：

• 添加音乐
• 删除音乐
• 播放音乐
• 暂停音乐
• 停止音乐
• 切换音乐
• 调节音量
• 显示音乐信息

实现音乐播放器列表

为了实现音乐播放器列表的功能，我们需要使用React全家桶中的以下组件：

• useState：用于管理音乐播放器列表的状态
• useEffect：用于在组件挂载和更新时执行某些操作
• useReducer：用于管理音乐播放器列表的复杂状态
• createContext：用于创建音乐播放器列表的上下文
• useContext：用于在组件中使用音乐播放器列表的上下文

首先，我们使用useState创建音乐播放器列表的状态：

const [musicList, setMusicList] = useState([]);

然后，我们使用useEffect在组件挂载时获取音乐列表：

useEffect(() => {
  const getMusicList = async () => {
    const response = await fetch('/api/music');
    const data = await response.json();
    setMusicList(data);
  };

  getMusicList();
}, []);

接下来，我们使用useReducer创建音乐播放器列表的复杂状态：

const reducer = (state, action) => {
  switch (action.type) {
    case 'ADD_MUSIC':
      return [...state, action.payload];
    case 'DELETE_MUSIC':
      return state.filter(music => music.id !== action.payload);
    case 'PLAY_MUSIC':
      return state.map(music => {
        if (music.id === action.payload) {
          return { ...music, isPlaying: true };
        } else {
          return { ...music, isPlaying: false };
        }
      });
    case 'PAUSE_MUSIC':
      return state.map(music => {
        if (music.id === action.payload) {
          return { ...music, isPlaying: false };
        } else {
          return music;
        }
      });
    case 'STOP_MUSIC':
      return state.map(music => {
        return { ...music, isPlaying: false };
      });
    case 'SWITCH_MUSIC':
      return state.map(music => {
        if (music.id === action.payload.currentMusicId) {
          return { ...music, isPlaying: false };
        } else if (music.id === action.payload.nextMusicId) {
          return { ...music, isPlaying: true };
        } else {
          return music;
        }
      });
    case 'ADJUST_VOLUME':
      return state.map(music => {
        if (music.id === action.payload.musicId) {
          return { ...music, volume: action.payload.volume };
        } else {
          return music;
        }
      });
    default:
      return state;
  }
};

const [musicState, dispatch] = useReducer(reducer, []);

然后，我们使用createContext创建音乐播放器列表的上下文：

const MusicContext = createContext(null);

最后，我们使用useContext在组件中使用音乐播放器列表的上下文：

const MusicProvider = ({ children }) => {
  return (
    <MusicContext.Provider value={{ musicList, musicState, dispatch }}>
      {children}
    </MusicContext.Provider>
  );
};

这样，我们就完成了音乐播放器列表的功能。在下一篇文章中，我们将重点完成音乐播放器控制器的功能。