react 開發過程當中的總結/概括

一、點擊元素,獲取綁定該事件的父級元素,使用 e.currentTarget。e.target 獲取的是,出發該事件的元素,該元素有多是所綁定事件的元素的子元素。react

  

二、使用 react router4數組

  history 只能傳遞給兒子組件,不能傳遞給孫子組件react-router

  若是孫子組件須要,能夠經過 props 傳遞過去函數

  

三、關於 react-router 不一樣頁面 根據地址欄標識的不一樣請求渲染不一樣的內容this

this.props.history.push({ pathname:'', state:{} });

  把頁面跳轉時要傳遞的參數放到 state 裏面,這樣頁面刷新的時候經過 location.state 也能讀取到該值spa

 四、昨天忽然想重構下代碼,整理下 state,結果碰到了一個調試很久沒找到的問題調試

問題代碼:code

1 // metric 是一個數組,保存在 store 裏面,經過 mapStateToProps 傳遞的
2 that.props.metric.map((val)=>{ 3    // addColorSelect 根據 metric 每一個值添加相應的設置
4  configureStore.dispatch(addColorSelect(val)); 5 })

問題:觸發相應的操做,發現怎麼樣,dispatch 裏面的函數沒有相應的執行結果。而後因爲思惟太發散,一度找錯了解決方向component

今天早上冷靜的調試了下,發現了問題所在router

因爲個人 val 直接用的是 store 中 metric 的值,在 action 返回值中,metric 的每一個值都攜帶了 type 字段。這與 addColorSelect 對應 action 的 type 產生了衝突,因此沒有想要的效果

解決問題代碼:

1 that.props.metric.map((val)=>{ 2     delete val.type;//刪除val中攜帶的action.type便可
3  configureStore.dispatch(addColorSelect(val)); 4 })

總結:看來找錯誤必定不要病急亂投醫,認真看值傳遞的方向以及特定屬性內容仍是很重要的

五、不要隨便使用 state 的狀態來進行判斷,由於 state 更改是須要通過聲明周期函數的,若是修改state後,一味根據 state 狀態進行判斷,有時會出現臆想不到的錯誤。

  合理的作法是,根據某個值更新 state 狀態,而後根據該值進行下一步操做,判斷.....

  今天就遇到一個坑,就是明明能夠經過 flag 標示來判斷元素該是隱藏仍是顯示,卻恰恰用了 state,這樣致使個人顯示狀態老是滯後一步,用了好長時間才找到問題所在,我心裏也是嗚嗚嗚嗚的。若是使用 flag 直接判斷的話,而後修改 state,我就不須要去管 state 在執行流程,任他怎麼執行,個人顯示狀態是正確的便可

六、在進行寫一個功能比較多的項目的時候,學會藉助思惟導圖,進行邏輯梳理。由於作公司項目的時候,一次行評完需求進行開發,致使需求太多越作越混亂,因此開發時花費一部分事件進行邏輯梳理會起到事半功倍的做用。小夥伴們學起來哦~

七、獲取真實的DOM元素方法:

  a一、首先給組件的元素添加 ref 屬性,例如:<div ref='thisDom'><div/>

  a二、在 componentDidMount 函數中經過 this.refs.thisDom 就能夠獲取到。之因此是在 componentDidMount 中獲取是由於,在組件第一次 render 的時候纔會讀取到 ref ,並賦值給                  this的 refs 屬性。

八、某個組件的操做,觸發另一個組件內容的更改。能夠經過藉助 PubSub-js 來解決,具體作法以下:

  a一、首先在一個組件中註冊一個 pubsub 方法,例如:在組件A的 constructer中註冊,this.tocken = PubSub.subscribe('事件名稱', 觸發事件的回調函數)

  a二、爲防止事件屢次被註冊,在組件 componentWillUnmount 函數中須要銷燬事件 PubSub.unsubscribe(this.token)

  a三、在須要觸發該事件的地方寫 PubSub.sublish('對應的事件名稱','要傳入回調函數中的內容')

   a四、⚠️須要注意的是,不管回調函數傳入什麼,第一個參數永遠是 '事件名稱'

相關文章
相關標籤/搜索