React學(xué)習(xí)筆記2

1.render函數(shù)對(duì)于props和state必須是純函數(shù)

render函數(shù)不能改變props和state的屬性,如果在render中調(diào)用setState則會(huì)陷入死循環(huán)
問(wèn)題容易出現(xiàn)在事件綁定中onClick={this.handleClick(event)},這個(gè)函數(shù)就會(huì)直接執(zhí)行,可能會(huì)修改state或props,此時(shí)應(yīng)該使用箭頭函數(shù)onClick={()=>this.handleClick(event)}

2.受控組件和非受控組件

  • 受控組件
    每當(dāng)表單的狀態(tài)變化時(shí),都會(huì)被寫入到組件的state中,消除了組件的局部狀態(tài),由組件的state來(lái)統(tǒng)一管理
  • 非受控組件
    一個(gè)表單組件沒有value屬性,可以通過(guò)defaulValue設(shè)置默認(rèn)值,需要使用ref props來(lái)訪問(wèn)DOM元素,如果ref訪問(wèn)的是自定義組件,則返回的是組件的實(shí)例,可以通過(guò)findDOMNode來(lái)獲取DOM元素
    受控組件必須要綁定change事件,否則無(wú)法將輸入值改變組件state

3.CSSModule

  • 樣式默認(rèn)局部
    默認(rèn)樣式是局部的,也就是
:local(.normal){
}

全局樣式可以定義為

:global(.btn){
}
:global{
}
  • CSS Modules只會(huì)轉(zhuǎn)變類選擇器

4.React Router Redux

  • 業(yè)務(wù)邏輯和路由狀態(tài)有很強(qiáng)的關(guān)聯(lián)關(guān)系,所以需要用redux來(lái)管理路由的狀態(tài)
  • 對(duì)Router組件來(lái)說(shuō),Router組件是一個(gè)方法,location作為參數(shù),返回的結(jié)果就是View視圖,它會(huì)根據(jù)當(dāng)前url的不同,渲染出不同的組件
  • 路由切換方式主要有pushState和hashChange兩種方式
  • Redux中要改變數(shù)據(jù),必須分發(fā)一個(gè)action,在路由改變的時(shí)候,也要分發(fā)一個(gè)相應(yīng)的action,由相應(yīng)的中間件來(lái)處理這一類的action,同時(shí)改變store中的狀態(tài)
最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡(jiǎn)書系信息發(fā)布平臺(tái),僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容