React使用技巧 一

2021-09-26 14:17:24 字數 526 閱讀 3475

1、react元件開發要求必須在元件的最外層進行包裹,可以使用代替

避免影響頁面布局。

2、react是資料驅動的,頁面上所有需要響應的都是通過改變資料,然後setstate更新頁面,而不是傳統的dom操作。

3、react中的事件命名規則為「小駝峰」命名,如onclick、onchange等。

4、react中需要注意this指向,盡量使用箭頭函式handle=()=>{},或者在事件繫結時使用this.handlefn.bind(this)。

5、react中不允許元件通過this.state.property = value的方式設定state,這樣會嚴重影響的專案效能,只能通過this.setstate({})的方式設定。

6、react中使用map迴圈時需要注意返回的jsx必須有key屬性,並且key值最好不用index,要用不會重複的資料,比如:

)7、es6語法:運算擴充套件運算子...  

this.setstate({

list:[...this.state.list,"value"]

react技巧 學習

1 當jsx中有多重判斷的時候,可以使用一下的方法 else else 也可以使用拆分子元件 const testcomponent a,b else else const conditions true,true 呼叫 2 靜態引入 在頁面上要引入靜態的話,需要通過require來進行引入 img...

React元件通訊技巧

communication.gif 1.父向子通訊 number只是個例子 let number this.state.number 需要注意,number 可以為普通引數 this.引數 也可以是 this.state.引數,其中this.state.引數若發生改變,會導致 child 重新渲染 ...

React元件通訊技巧

1.父向子通訊 number只是個例子 let number this.state.number 需要注意,number 可以為普通引數 this.引數 也可以是 this.state.引數,其中this.state.引數若發生改變,會導致 child 重新渲染 2.子向父通訊 從父元件接函式 ch...