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

本文轉載自查看原文 2017-03-22 10:15 3812 react.js/ dom/ react/ javascript

作者：Andrew Wong
編譯：胡子大哈

翻譯原文：http://huzidaha.com/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 ( <ReactCSSTransitionGroup transitionName="loadingItem" transitionAppear={true} transitionAppearTimeout={500} transitionEnterTimeout={500} transitionLeaveTimeout={300}> <img className="feed__loading-item" src={img} /> </ReactCSSTransitionGroup> ) }

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

    export default class Feed extends Component { ... render() { return ( <div className="feed"> ... {this.props.items.length > this.state.loadedItems.length && <LoadingItem /> } ... </div> ) } }

通過 `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 ( <div className="feed"> <h1 className="feed__h1">{this.props.name}</h1> {this.state.loadedItems.map((item, i) => <FeedItem imgPath={item.imgPath} name={item.name} renderModal={this.props.renderModal} key={i} /> )} {this.props.items.length > this.state.loadedItems.length && <LoadingItem /> } <div className="hidden"> {this.props.items.map((item, i) => <img src={item.imgPath} onLoad={this.onLoad.bind(this, item)} key={i} /> )} </div> </div> ) } }