反应：UI 状态更新时闪烁

Question

我有一个组件可以显示从 Spotify API 返回的搜索数据。但是，每次我更新状态时 UI 都会闪烁：

输入：

            <DebounceInput
                debounceTimeout={300}
                onChange={handleChange}
            />

挂钩：

const [searchResults, setSearchResults] = useState(null)

API 与 Apollo 通话：

 const searchSpotify = async (query) => {
    const result = await props.client.query({
        query: SearchTracks,
        variables: {
            query
        }
    })
    const tracks = result.data.searchedTracks
    setSearchResults(tracks)
}

渲染：

        {searchResults &&
            <div className="search-results">
                    {searchResults.map((song) => (
                            <SongInfo key={song.id} {...song} />
                    ))}
            </div>
        }

我注意到它只发生在第一次加载时。例如，如果我再次键入查询，它会显示而不会闪烁。有没有更好的方法来实现这个 UI 不闪烁？

Answer 1

我认为发生的事情是您正在对导致奇怪行为的每个击键执行搜索查询。

使用 lodash debounce 避免在每次击键时都进行搜索。那应该解决闪烁问题。（此外，添加加载状态会有所帮助）

示例去抖组件

import React, {Component} from 'react'
import { debounce } from 'lodash'

class TableSearch extends Component {

  //********************************************/

  constructor(props){
    super(props)

    this.state = {
        value: props.value
    }

    this.changeSearch = debounce(this.props.changeSearch, 250)
  }

  //********************************************/

  handleChange = (e) => {
    const val = e.target.value

    this.setState({ value: val }, () => {
      this.changeSearch(val)
    })
  }

  //********************************************/

  render() {

    return (
        <input
            onChange = {this.handleChange}
            value = {this.props.value}
        />
    )
  }

  //********************************************/

}

Answer 2

以下是导致闪烁的帧。我认为正在发生的事情是加载图像需要一些时间。当他们装载物品时，物品的高度降低了。您应该确保 SongInfo 布局不依赖于图像是否已加载。

图片未加载 - 项目已折叠：

图像已加载：

反应：UI 状态更新时闪烁

React: UI Flickering When State Updated

javascript

reactjs

react-apollo

apollo-client

react-hooks