[TOC] ## 前言 本文主要摘錄react項目實踐的時候一些典型的問題。 ### 滑動時不能阻止默認事件報錯 報錯：[Intervention] Unable to preventDefault inside passive event listener due to target being treated as passive 分析：由于瀏覽器必須要在執行事件處理函數之后，才能知道有沒有掉用過 preventDefault() ，這就導致了瀏覽器不能及時響應滾動，略有延遲。 所以為了讓頁面滾動的效果如絲般順滑，從 chrome56 開始，在 window、document 和 body 上注冊的 touchstart 和 touchmove 事件處理函數，會默認為是 passive: true。瀏覽器忽略 preventDefault() 就可以第一時間滾動了。 舉例： ``` window.addEventListener('touchmove', func) 效果和下面一句一樣 window.addEventListener('touchmove', func, { passive: true }) ``` //導致問題 如果在以上這 3 個元素的 touchstart 和 touchmove 事件處理函數中調用 e.preventDefault() ，會被瀏覽器忽略掉，并不會阻止默認行為。 解決方案： 1、注冊處理函數時，用如下方式，明確聲明為不是被動的 window.addEventListener('touchmove', func, { passive: false }) 2、應用 CSS 屬性 touch-action: none; 這樣任何觸摸事件都不會產生默認行為，但是 touch 事件照樣觸發。 更多介紹：[touch-action引起無法滑動的問題](https://juejin.im/post/5bcd8c7051882578247075dd) ### react 設置復雜對象屬性在頁面前進后退時的問題 場景： setState 如果數據復雜的時候，那么在頁面離開組件銷毀時，再進入渲染時復雜對象的屬性并沒有被重置，而簡單對象屬性有被重置，如果這兩者有對應關系，就會導致此時通過頁面前進后退導致的銷毀組件狀態不一致。 解決方案：目前過度階段的解決方案是在componentWillUnmount 的時候 吧數據全部重置到初始狀態解決的。 延伸思考： 類似的問題導致的原因還是對簡單和復雜對象的設置和銷毀有問題，如何從源頭解決才是根本 ### 頁面前進后退對生命周期以及數據的影響 有關頁面前進后退對生命周期以及數據的影響是如何的要做深入的研究，如何利用頁面監聽做自己想要的數據設置和交互設置。 ### 頁面棧與生命周期的關聯性設計 包括頁面棧的使用，跳轉到哪些指定頁面，而不是歷史頁面的前進和后退 ### redux去真正適合解決哪些問題 redux或者mobox的本質還是用來解決跨組件、跨頁面共享數據的，如果某些時候就用redux的方案是否科學合理，因為redux是集中管理，過多的管理里只有一個頁面會用而不會分發的數據思考下來總是有點不妥的 ### 如何系統的做頁面狀態的保留，體驗的優化 ### 頁面刷新時 與 頁面棧前進后退的區分思考，對生命周期的影響 ### 當id變化時 組件不更新的問題 主要是同一個組件用來渲染不同的組件，當id變化時，組件不更新的問題。這個主要解決方案是：在componentWillReceiveProps的生命周期里重新獲取數據進行渲染。 其他方案可以是：將detail組件的部分進行封裝，用函數組件實現。 ### state中的值為復雜類型時，數據沒有自動清除 場景：頁面為一個調查問卷，每個題目都有選項，并且標注著是否為選中的布爾類型。默認為false 的。當組件銷毀的時候，checked并沒有全部重置為false,那么就會導致ui與數據不一致的bug ``` this.state = { questionArr : [{ title:'sf', options:[{ title:'option 1', checked:false }] }] } ``` 解決方案：在組件要銷毀時，代碼進行重置 ``` componentWillUnmount() { let { questionArr } = this.state let questionArrCp = questionArr.map(item => { item.options && item.options.map((choice, index) => choice.checked = false) return item }) this.setState({ questionArr:questionArrCp }) } ``` ### 跨域報錯 - [github issue鏈接](https://github.com/CompuIves/codesandbox-client/issues/667) 在使用codesanbox的時候報錯，具體報錯如下： ``` A cross-origin error was thrown. React doesn't have access to the actual error object in development. ``` 解決方案：