Question

我对当前的项目有些困惑，这是我的第一个大反应项目，所以我认为这里可能缺少一些简单的即时消息。我决定使用钩子，因为它看起来更好，尽管我尝试使用类组件重写时也遇到了同样的问题。

基本上，我有一个页面，该页面应显示音乐专辑和这些专辑中歌曲的链接，当单击链接时，链接应将Spotify iframe放入DOM。但是当点击发生时，需要花费很长时间，有时10秒才能使差异显示在页面上

代码：

import React, { useState, useEffect } from 'react'
import FullWidthBanner from './FullWidthBanner';
import Axios from 'axios';

const Song = (props) => {

    return (
        <div>
            <div className={(props.active) ? "songContainer" : "songContainer colourTransition"}>
                <div onClick={() => { props.handleClick(props.name); }} style={{ 'backgroundColor': props.color, "zIndex": (props.active) ? "250" : "300" }} className="songTitle">
                    <h1>{(props.active) ? "LOADING" : props.name}</h1>
                </div>
                {(props.active || props.clickCount) ? <iframe src={props.src} style={{ "zIndex": (props.active) ? "300" : "250" }} width="300" height="380" frameborder="0" allowtransparency="true" allow="encrypted-media"></iframe> : null}
            </div>
        </div>
    )
}

const Album = (props) => {
    const [songs, setSongs] = useState(props.songs);

    const handleClick = (name) => {
        for (var key in songs) {
            songs[key].active = 0;
        }
        let activeSong = songs.filter((song) => {
            return song.name == name;
        });
        let index = songs.indexOf(activeSong[0]);
        songs[index].active = 1;
        songs[index].clickCount++;
        setSongs(songs);
    }

    return (
        <div className="alContainer">
            {songs.map((song) => {
                return (
                    <Song {...song} handleClick={handleClick} />
                )
            })}
        </div>
    )
}

const AlbumMeta = (props) => {
    return (
        <div className="albumMetaContainer">
            <img src={props.artwork} width="200" height="200" alt={"The album artwork for Sam Malcolm's album " + props.name} />
            <div className="infoContainer">
                <h1>{props.name}  <i>{props.year}</i></h1>
                <p>{props.description}</p>
                <div>
                    {(props.spotifyLink) ? <a style={{ 'borderColor': props.highlight }} href={props.spotifyLink} target="_blank" className="smBtn" >View on Spotify</a> : null}
                    {(props.itunesLink) ? <a style={{ 'borderColor': props.highlight }} href={props.itunesLink} target="_blank" className="smBtn" >View on iTunes</a> : null}
                </div>
            </div>
        </div>
    )
}

const Albums = (props) => {

    const [albums, setAlbums] = useState([]);

    useEffect(() => {
        Axios.get('/api/albums').then((response) => {
            setAlbums(response.data);
        })
    }, [])

    return (
        <div className="albumsContainer">
            <FullWidthBanner caption="Photo: Joe Bloggs" backgroundPosition="top center" src="/path/to/image.jpg" title="Music" />
            {albums.map((album) => {
                return (
                    <div>
                        <AlbumMeta {...album} highlight={props.highlight} />
                        <Album {...album} />
                    </div>
                )
            })}
        </div>
    )
}


export default Albums

我觉得这里有更好的写法。有趣的是，当我从useEffect中删除第二个参数而导致无限循环时，单击页面会立即更新页面，这很奇怪。

Answer 1

浏览此https://codesandbox.io/embed/magical-leaf-hw8r4

我更改了一些小的内容，并在其中添加了一些评论。这个对我有用。 iframe在1-2秒内加载歌曲。

为什么此反应组件要花很多时间才能重新渲染，有没有更好的书写方式？

1 个答案: