tips：接下去會(huì)在github寫(xiě)博客，簡(jiǎn)書(shū)不再更新和修改文章窍株，歡迎大家逛逛我的新博客點(diǎn)擊查看 ，我會(huì)盡量用更容易理解的方式寫(xiě)好每一篇博客,大家一起學(xué)習(xí)交流??。
前言
今天寫(xiě)的一個(gè)react版的滾動(dòng)字幕悔常，思路是用js操作展示內(nèi)容的scrollWidth,然后用setInterval 循環(huán)調(diào)用function ，function內(nèi)容大體思路是對(duì)文字內(nèi)容userDOM.style.transform = 'translateX(-'+ i +'px)',每次橫向左移動(dòng)ipx的距離给赞，形成滾動(dòng)效果机打，當(dāng)i>=scrollWidth的時(shí)候，將i歸零片迅，形成循環(huán)滾動(dòng)残邀。(這里操作了dom，不是很好)
這里先解釋一下瀏覽器scrollWidth，scrollWidth芥挣，offsetWidth三種寬度的區(qū)別
情況1：
元素內(nèi)無(wú)內(nèi)容或者內(nèi)容不超過(guò)可視區(qū)驱闷，滾動(dòng)不出現(xiàn)或不可用的情況下。
scrollWidth=clientWidth空免，兩者皆為內(nèi)容可視區(qū)的寬度空另。
offsetWidth為元素的實(shí)際寬度。
情況2：
元素的內(nèi)容超過(guò)可視區(qū)鼓蜒，滾動(dòng)條出現(xiàn)和可用的情況下痹换。
scrollWidth>clientWidth。
scrollWidth為實(shí)際內(nèi)容的寬度都弹。
clientWidth是內(nèi)容可視區(qū)的寬度娇豫。
offsetWidth是元素的實(shí)際寬度。
出問(wèn)題了
為了以便調(diào)用后端接口前先模擬展示畅厢，將靜態(tài)生成的內(nèi)容寫(xiě)死的文字內(nèi)容換成動(dòng)態(tài)加載冯痢，還采取了隨機(jī)生成用戶(hù)ip和獲獎(jiǎng)內(nèi)容，結(jié)果獲取到的scrollWidth（元素內(nèi)容的實(shí)際寬度框杜，包括被隱藏的部分）只是內(nèi)容可視區(qū)的寬度浦楣，顯然是不行的，所以無(wú)法滾動(dòng)全部咪辱，我們需要的是元素內(nèi)容的實(shí)際寬度振劳。為什么會(huì)出現(xiàn)這種情況呢？如果文字內(nèi)容是靜態(tài)生成的油狂，內(nèi)容寫(xiě)死的历恐，并不會(huì)出現(xiàn)這種問(wèn)題。
問(wèn)題出在哪里专筷？
出在動(dòng)態(tài)加載還要考慮到react的生命周期弱贼，componentWillMount(將要掛載)->render(dom渲染)->componentDidMount(已經(jīng)掛載)，這個(gè)滾動(dòng)函數(shù)寫(xiě)在了componentDidMount中磷蛹，也就是頁(yè)面dom結(jié)構(gòu)渲染完了文字內(nèi)容才開(kāi)始動(dòng)態(tài)生成吮旅，結(jié)果scrollWidth抓取到的文字內(nèi)容是空的，只能獲取了內(nèi)容可視區(qū)的寬度味咳。
問(wèn)題找出來(lái)了庇勃，該如何解決呢？
最簡(jiǎn)單粗暴的方式就是把動(dòng)態(tài)加載文字內(nèi)容的函數(shù)放在componentWillMount(將要掛載)中槽驶，在render頁(yè)面之前就把該部分內(nèi)容加載完畢责嚷，這樣render頁(yè)面的時(shí)候scrollWidth將抓取到早已加載好的文字內(nèi)容了，可是這樣會(huì)造成打開(kāi)頁(yè)面后捺檬，頁(yè)面空白一會(huì)再层，在渲染出頁(yè)面的內(nèi)容來(lái)贸铜，這段空白期間就是componentWillMount加載你的數(shù)據(jù)內(nèi)容去了。如果數(shù)據(jù)內(nèi)容少還好說(shuō)聂受，萬(wàn)一量很大了蒿秦，那就尷尬了，嚴(yán)重影響用戶(hù)體驗(yàn)蛋济。
更好的解決辦法是
仍把動(dòng)態(tài)加載文字內(nèi)容的函數(shù)放在componentDidMount中棍鳖，并在此采用window.onload 調(diào)用滾動(dòng)函數(shù)，也就是等頁(yè)面都渲染完了碗旅，文字內(nèi)容也ok了渡处，才會(huì)調(diào)用滾動(dòng)函數(shù)（scrollWidth，setInterval祟辟，transform ）医瘫。
這下，解決了生命周期以及用戶(hù)體驗(yàn)旧困，加載性能的問(wèn)題醇份。??
如有錯(cuò)誤和不足，懇請(qǐng)指出指導(dǎo)^ ^
