平常開發小筆記(this小操做)

沒事兒玩些小操做仍是蠻開心的,畢竟閒下來人就有點慌,真是搬磚的命,難怪沒女友搬磚就能很開心了。react

項目第一階段快告一段落了,而後就作起二期的準備了,功能變更應該不會太大仍是table、search、header、detail。持續寫功能很少的頁面話就有點無聊了,那就玩點花哨的吧,不把本身玩死就行了,搞個根據配置建立頁面的組件的功能吧!編程

table基類後端

頁面玩出花仍是要走這幾步:緩存

1.根據初始參數請求list數據函數

2.搜索完善請求參數(更新請求參數),再請求list數據優化

3.翻頁(更新頁碼部分請求參數),再請求list數據this

4.讀取本地緩存數據若是有數據就手動操做請求。code

噪點操做component

導出、新增.......對象

關於this的小操做在這些噪點操做裏面,首先這些操做有的頁面有有的沒有。通常寫react操做這些操做都包含一個操做函數或組合操做。

class test extends Component {
   constructor(props) {
      super(props);
      this.func = this.func.bind(this)
   }
   // 省去千萬條代碼
   ................
}

因此本身想這些不肯定的操做能不能由外部傳入,可是外部傳入的函數放到內部能不能訪問到this這是一個問題,而且初始執行constructor實例化的時候能不能掛到對象屬性上這是一個問題。看常常在constructor中寫的this綁定的方式其實大概的意思就是在this上建立一個屬性指向一個函數而後調用bind修改運行時this指向。因此就寫了一個上面的擴充事件的方法,作了相似於constructor裏面寫綁定的功能。

而後操做事件的在視圖上面的顯示放到renderSearch裏面做爲參數,作到無論視圖上要添加什麼功能都能訪問到新增的事件而且綁定時不會出現this爲空的狀況。

更新流程優化

以前裏面寫了一個state更新操做的方法,還挺好的可是用的時候看以前的代碼是放到componentWillUpdate裏的。然而,咱們用的是16以後的版本因此這個極可能就要被拋棄了。因此本身作了個優化,改用了最新的生命週期函數。可是這個是一個靜態方法並不屬於實例,因此不少this操做沒辦法作。

這裏優化的一個又和上面的槽點操做有關,首先以前寫的這個更新state的方法是用來處理重複更新的操做的,因此list請求這個更新流程是全部地方都有的,可是若是作更新或者提交之類的操做無論須要新建操做函數,相應的也要在更新流程裏面添加操做。這個地方也就想從裏面撥出一些到外面,因而寫了一個用來執行更新流程的函數。固然目前是這麼個想法,而後寫了,可是總感受實現上仍是不太好功能函數還有優化的地方。

具體上的想法大概是,在更新時候的執行回調函數里加入一個外部傳入的函數打斷一下內部的更新過程,作到能從外部參與更新的效果,參照了一下後端老哥寫的面向切面編程的思路。若是有多個更新流程須要執行,等到更新執行完以後再返回更新完的統一state數據。

感受關於this這一點算是吃透一大半了,不過仍是有些點不很肯定。

相關文章
相關標籤/搜索