說說React元件的State

2021-09-20 08:32:23 字數 1218 閱讀 1622

這個變數如果在元件的整個生命週期中都保持不變就不應該作為元件state。

通過其他狀態(state)或者屬性(props)計算得到的變數不應該作為元件state。

沒有在元件的render方法中使用的變數不用於ui的渲染,那麼這個變數不應該作為元件的state 。這種情況下,這個變數更適合定義為元件的乙個普通屬性。

this.setstate();
let students = this.state.students;this.setstate();//或者this.setstate(prestate => ();
方法this.setstate(prestate => (, prestate.school, )}));//物件擴充套件語法let school = this.state.school;this.setstate( }})
const teacher = () =>  is  years old.

)}

class counterbutton extends react.purecomponent ;  }  render() ))}      >       count:           )  }}

class ul extends purecomponent ;  }  handleclick = () =>  = this.state;    items.push(4);    this.setstate();  }  render() }
會發現,無論怎麼點 add 按鈕, li 都不會變多,因為 pop方法是在原陣列上進行的修改,items的prestate與nextstate 用的是乙個引用, shallowequal 的結果為 true 。改正:

handleclick = () =>  = this.state;  this.setstate();}
this.state = ,    classtwo:   }}

通過object.assign修改狀態

let classone = ;this.setstate(prestate => (, prestate.school, )}));
原文發布時間為:2023年07月03日

掘金

React的元件三大屬性之state

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

react(三)元件內部狀態state使用方式

在react中,驅動元件渲染過程的兩種方式 prop和state。state代表元件的內部狀態,由於react元件不能修改傳入的prop資料,所以需要記錄自身的資料變化,就要使用state。1 初始化state 通常在元件類的建構函式的最後,定義this.state,這個值必須是個物件。2 讀取st...

學習react改變state狀態

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