React 動態渲染圖片，提升用戶體驗

FullStackDeveloper 發布于2019-08-20 15:16 / 3029人閱讀

摘要：給服務器發送一個獲取圖片文件的請求，但是先不在中渲染，直到整個文件都下載完成以后再渲染出來占位符是提前讓用戶產生預期，預期圖片正在加載。

作者：Andrew Wong

編譯：胡子大哈

翻譯原文：http://huziketang.com/blog/posts/detail?postId=58d14215a6d8a07e449fdd2b

英文原文：Improve Your UX by Dynamically Rendering Images via React

轉載請注明出處，保留原文鏈接以及作者信息

市場上競爭是非常殘酷的，眾所周知，僅僅有一個好的 idea 不足以使你的公司成為獨角獸，執行力也同樣重要。但是最終都會內化到產品中，進而歸結為一個因素——用戶體驗。

用戶體驗并不是你的產品看起來多好看，還有它的性能如何？使用起來是否方便？——也就是讓你的用戶使用起來感到滿意。

我們都有過這樣的經歷，打開一個 app 或者網頁的時候看到如下的圖片，從上到下一點點顯示：

對于高分辨率的圖片和視網膜屏幕，像這種圖片從上到下慢慢展現的情況非常常見，通常我們只能靜靜地等著它渲染完畢。

這個問題是可以解決的

通常有兩個很容易想到的解決方案：CDN 和本地緩存（你的瀏覽器會自動做本地緩存）都可以使圖片加載更快。但是從技術上，我們還可以用很 trick 的方法，通過使用戶感知產生錯覺而提升用戶體驗。

下面就介紹兩步 trick 的方法提升富媒體應用的用戶體驗。

第一步 - 使用占位符

（用占位符表明媒體正在加載）

占位符是一個目前很流行的方法，以前通常是用一個加載轉輪來表示正在加載，使用占位符是和用戶交流的一種方式，告訴用戶正在加載的內容是——圖片。

Facebook 和 LinkedIn 是使用技術來提升用戶體驗很好的兩個例子。

第二步 - 在 DOM 中動態加載圖片

接下來優化方法是先把圖片完全下載下來，再顯示在屏幕上。這樣就會避免邊下載邊顯示而產生的從上到下一點點渲染的情況。我們使用 React 的 onLoad 事件來實現這一功能。給服務器發送一個獲取圖片文件的請求，但是先不在 DOM 中渲染，直到整個文件都下載完成以后再渲染出來

占位符是提前讓用戶產生預期，預期圖片正在加載。而動態加載是在圖片下載完成以后才顯示，有效地避免了圖片從上到下一點點渲染的情況，進一步提升了用戶體驗。

觀看在線 Demo

我要代碼！ 占位符方法

對于占位符組件（本例子中使用 LoadingItem），我們可以隨心地展示想要展示的圖片，代碼如下：

    export default function () {
      return (
        
          
        
      )
    }

在我們的 Feed 組件的渲染中，只要還有 FeedItems 沒有加載完成，就可以使用 LoadingItem：

    export default class Feed extends Component {
      ...
      render() {
        return (
          
            ...
            {this.props.items.length > this.state.loadedItems.length &&
              
            }
            ...
          
        )
      }
    }

通過 onLoad 動態渲染圖片

我們的 Feed 組件代碼如下：

    export default class Feed extends Component {
      constructor(props) {
        super(props)
        this.state = { loadedItems: [] }
      }
      onLoad(feedItem) {
        this.setState(({ loadedItems }) => {
          return { loadedItems: loadedItems.concat(feedItem) }
        })
      }
      render() {
        return (
          
            {this.props.name}
            {this.state.loadedItems.map((item, i) =>
              
            )}
            {this.props.items.length > this.state.loadedItems.length &&
              
            }
            
              {this.props.items.map((item, i) =>
                
              )}
            
          
        )
      }
    }

這段代碼中發生了什么？底部有一個隱藏的

用來下載圖片文件。當文件下載完畢，onLoad 事件被觸發，更新狀態。那么新的加載項，也就是剛剛下載好的圖片，將會被渲染到 DOM 中。

本文結束

是不是很簡單，簡單的說明希望能夠幫助正在受這一問題困擾的朋友。下面給出例子和代碼。

觀看在線 Demo

查看完整源代碼

希望本文能對你的知識提升有所幫助，歡迎大家與我交流，關注我的【知乎專欄 - 前端大哈】。

我最近正在寫一本《React.js 小書》，對 React.js 感興趣的童鞋，歡迎指點。

云服務器 GPU云服務器用戶體驗用戶體驗部用戶體驗的用戶體驗反饋

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/82123.html

The Cost Of JavaScript 2018 精讀

摘要：目前我們的業務項目采用的來進行優化和首屏性能提升。可變性需要讓開發人員降低開發時的基準線，來保證每一個用戶的體驗。對于路由的切分以及庫的引入來說，這一個原則至關重要。快速生成一份站點的性能審查報告。 The Cost Of JavaScript 2018 關于原文原文是在Medium上面看到的，Chrome工程師Addy Osmani發布的一篇文章，這位的Medium上面的自我介紹里...

lushan 2019-08-26 12:19 評論0 收藏0
前端每周清單第 34 期：Vue 現狀盤點與 3.0 展望，React 代碼遷移與優化，圖片優化詳論

摘要：工程實踐立足實踐，提示實際水平內聯函數與性能很多關于性能優化的文章都會談及內聯函數，其也是常見的被詬病為拖慢性能表現的元兇之一不過本文卻是打破砂鍋問到底，論證了內聯函數并不一定就會拖慢性能，過度的性能優化反而會有損于應用性能。 showImg(https://segmentfault.com/img/remote/1460000011481413?w=1240&h=825); 前端每周...

CoderStudy 2019-08-21 16:56 評論0 收藏0
在React項目中，如何優雅的優化長列表

摘要：合理的優化長列表，可以提升用戶體驗。這樣保證了無論如何滾動，真實渲染出的節點只有可視區內的列表元素。具體效果如下圖所示對于比無優化的情況，優化后的虛擬列表渲染速度提升很明顯。是基于來實現的，但是是一個維的列表，而不是網狀。 ??對于較長的列表，比如1000個數組的數據結構，如果想要同時渲染這1000個數據，生成相應的1000個原生dom，我們知道原生的dom元素是很復雜的，如果長列表...

yearsj 2019-08-23 13:51 評論0 收藏0
在React項目中，如何優雅的優化長列表

摘要：合理的優化長列表，可以提升用戶體驗。這樣保證了無論如何滾動，真實渲染出的節點只有可視區內的列表元素。具體效果如下圖所示對于比無優化的情況，優化后的虛擬列表渲染速度提升很明顯。是基于來實現的，但是是一個維的列表，而不是網狀。 ??對于較長的列表，比如1000個數組的數據結構，如果想要同時渲染這1000個數據，生成相應的1000個原生dom，我們知道原生的dom元素是很復雜的，如果長列表...

Java_oldboy 2019-08-29 17:28 評論0 收藏0