tips：接下去會在github寫博客，簡書不再更新和修改文章，歡迎大家逛逛我的新博客點擊查看 ，我會盡量用更容易理解的方式寫好每一篇博客,大家一起學習交流??。
前言
今天寫的一個react版的滾動字幕，思路是用js操作展示內容的scrollWidth,然后用setInterval 循環(huán)調用function ，function內容大體思路是對文字內容userDOM.style.transform = 'translateX(-'+ i +'px)',每次橫向左移動ipx的距離，形成滾動效果，當i>=scrollWidth的時候，將i歸零，形成循環(huán)滾動。(這里操作了dom，不是很好)
這里先解釋一下瀏覽器scrollWidth，scrollWidth，offsetWidth三種寬度的區(qū)別
情況1：
元素內無內容或者內容不超過可視區(qū)，滾動不出現或不可用的情況下。
scrollWidth=clientWidth，兩者皆為內容可視區(qū)的寬度。
offsetWidth為元素的實際寬度。
情況2：
元素的內容超過可視區(qū)，滾動條出現和可用的情況下。
scrollWidth>clientWidth。
scrollWidth為實際內容的寬度。
clientWidth是內容可視區(qū)的寬度。
offsetWidth是元素的實際寬度。
出問題了
為了以便調用后端接口前先模擬展示，將靜態(tài)生成的內容寫死的文字內容換成動態(tài)加載，還采取了隨機生成用戶ip和獲獎內容，結果獲取到的scrollWidth（元素內容的實際寬度，包括被隱藏的部分）只是內容可視區(qū)的寬度，顯然是不行的，所以無法滾動全部，我們需要的是元素內容的實際寬度。為什么會出現這種情況呢？如果文字內容是靜態(tài)生成的，內容寫死的，并不會出現這種問題。
問題出在哪里？
出在動態(tài)加載還要考慮到react的生命周期，componentWillMount(將要掛載)->render(dom渲染)->componentDidMount(已經掛載)，這個滾動函數寫在了componentDidMount中，也就是頁面dom結構渲染完了文字內容才開始動態(tài)生成，結果scrollWidth抓取到的文字內容是空的，只能獲取了內容可視區(qū)的寬度。
問題找出來了，該如何解決呢？
最簡單粗暴的方式就是把動態(tài)加載文字內容的函數放在componentWillMount(將要掛載)中，在render頁面之前就把該部分內容加載完畢，這樣render頁面的時候scrollWidth將抓取到早已加載好的文字內容了，可是這樣會造成打開頁面后，頁面空白一會，在渲染出頁面的內容來，這段空白期間就是componentWillMount加載你的數據內容去了。如果數據內容少還好說，萬一量很大了，那就尷尬了，嚴重影響用戶體驗。
更好的解決辦法是
仍把動態(tài)加載文字內容的函數放在componentDidMount中，并在此采用window.onload 調用滾動函數，也就是等頁面都渲染完了，文字內容也ok了，才會調用滾動函數（scrollWidth，setInterval，transform ）。
這下，解決了生命周期以及用戶體驗，加載性能的問題。??
如有錯誤和不足，懇請指出指導^ ^
