1.組件名稱必須是大寫字母開頭,且調(diào)用它的時候必須先定義或引用它。
2.組件的返回值必須只有一個根元素;
3.props不可修改
4.使用componentDidMount來掛載東西
5.使用componentWilUnmount來卸載東西
6.正確使用狀態(tài)state
①不能直接更新狀態(tài),要使用this.setState(),構(gòu)造函數(shù)是唯一能夠初始化this.state的地方;
②狀態(tài)更新可能是異步的,所以不能依靠它的值來計算下一個狀態(tài),優(yōu)化:使用第二中setState形式,接受一個函數(shù),參數(shù)為上一次的狀態(tài);
③狀態(tài)更新合并,淺合并,也就是當更新其中一個屬性值的時候,其他的屬性值也會合并到更新的狀態(tài)中;
7.數(shù)據(jù)自頂向下流動,單向數(shù)據(jù)流
8.事件:
綁定事件屬性命名為駝峰命名
采用jsx語法需要傳入函數(shù)作為事件處理函數(shù),而不是字符串
不能使用return false 來阻止默認行為,只能用preventDefault;
9.當使用class語法來定義一個組件的時候,事件處理器會成為類的一個方法。類的方法默認不綁定this的。如果綁定this,要在構(gòu)造函數(shù)中用bind重新指定。如果忘記在構(gòu)造函數(shù)中綁定并將它傳入給事件,當調(diào)用函數(shù)的時候返回undefined。
10.通常情況下,如果你沒有在方法后面添加(),應該為這個方法在構(gòu)造函數(shù)中綁定this。this.fangfa = this.fangfa.bind(this);
也可以用另外兩個方法:①使用屬性初始化器來正確綁定回調(diào)函數(shù);fangfa = () =>{};
②在回調(diào)函數(shù)中使用箭頭函數(shù):onClick = {(e)=>this.fangfa(e)};但如果作為屬性值傳遞給低級組件的話,會出現(xiàn)額外的重新渲染,不建議使用。
11.向事件處理程序添加參數(shù)
①onClick = { (e)=>this.fangfa(id,e) }
②onClick = {this.fangfa.bind(this,name)} 注:在函數(shù)中,事件對象e 排在所有的參數(shù)后面 -----> fangfa(name,e){}
12.條件渲染組件
①聲明變量并使用if條件渲染組件
②與運算符&&
因為在js中,true && expression ===>expression
false && expression ====>false
③三目運算符
④rander方法返回null
13.元素位于map()方法內(nèi)時需要設置鍵屬性key
14.數(shù)組元素中使用key在兄弟間是獨一無二的,然而不需要是全局唯一的。
15.key是給react的提示,不是傳遞給用戶的組件,如果組件中需要使用與key相同的值,請使用其他屬性名顯示傳遞。
- <input type = "text" > <textarea> <select> 都是通過傳入value屬性來實現(xiàn)對組件的控制。
17.組件與模塊