React入門(一) State屬性

2022-07-07 07:06:10 字數 1487 閱讀 1068

關於react元件例項中state屬性的使用以及注意事項:

1、state的初始化方式(以下**為有構造器的時候)

2、state的使用方法,以ishot為例

3、state的修改方式,必須用setstate進行更新

<

script

type

="text/babel"

>

//建立元件

class weather extends react.component

精!!!!

解決changeweather中this的指向問題,先通過右側this.changeweather.bind(

this

)找到weather類原型中的changeweather方法,並通過bind將this.changeweather函式中的this改為當前weather例項物件並生成新函式,隨後賦給例項物件自身的乙個屬性,也叫changeweather。注意,該句左右兩端的changeweather是不一樣的,左側的changeweather是例項自身的屬性(方法)changeweather,右側的是weather類原型中的changeweather函式。

即:為事件處理函式繫結例項。

this

.changeweather

=this

.changeweather.bind(

this

); }

//render呼叫1+n次,1是初始化的那一次,n是狀態更新的次數。每次狀態更新都要呼叫render,重新拿到最新的返回值。

render() = this.state 等於 const ishot = this.state.ishot

const

=this

.state;

react事件處理中,重寫了onclick等事件,注意在react中,命名方法類似『駝峰法』,其中c要大寫。原生js此處是字串onclick="

demo()

",在react中是函式型式onclick

=注意不能寫成onclick

=,這樣是將demo()函式呼叫的返回值作為**,恒為undefined。所以要去掉小括號,不作為函式呼叫,作為賦值語句,將函式demo作為**,而不是demo的函式呼叫的返回值作為**。

return

<

h1 id='

title

'onclick

=>

今天天氣很,

<

/h1>

}

//changeweather點幾次呼叫幾次。

changeweather());}}

//渲染元件到頁面

reactdom.render(

<

weather

/>,document.getelementbyid('test'))

script

>

React的元件三大屬性之state

學習過程中編寫的 和筆記 import react from react class like extends react.component 將新增方法中的this 強制繫結為元件物件 難點 this.handleclick this.handleclick.bind this 新新增的方法 內部...

說說React元件的State

這個變數如果在元件的整個生命週期中都保持不變就不應該作為元件state。通過其他狀態 state 或者屬性 props 計算得到的變數不應該作為元件state。沒有在元件的render方法中使用的變數不用於ui的渲染,那麼這個變數不應該作為元件的state 這種情況下,這個變數更適合定義為元件的乙個...

學習react改變state狀態

第乙個 父級類元件class 可以傳參name 等於把自己傳過去 子類元件通過props 接收 然後通過 this.props.name.state改變狀態 class deng extends react.component componentdidmount componentdidupdate...