React（條件 列表渲染）及其生命週期

下面用成績等級和遊戲段位來實際來操作舉例一下，以便於理解

//vue中：用v-if 

//angular中:用 ngif
// 條件渲染: if
// rcc
import react,
from
"react"
;export
default
class
extends
component
;// 條件渲染: 依賴原生的if判斷 -- 製作函式 根據不同條件返回不同的 jsx
// 非事件觸發: 不涉及this指向問題
showres()
else
if(score >=
60&& score <90)
else
}showrank()
else
if(score <40)
else
if(score <60)
else
if(score <80)
else
}render()
中的** 在頁面渲染時 會自動觸發! */
}您的分數是:
<
/h3>
>
減分<
/button>
>
加分<
/button>
<
/div>);
}}

onclick=

注釋方法中的this指向

普通函式: 使用bind繫結this

this.函式.bind(this，其它引數)

採用箭頭函式保障this

()=> this.方法名(引數)

下面隨便寫幾個列表，使用for迴圈來獲取下標放到 jsx 語法中，形成新的陣列，從而把陣列的每一項渲染到頁面上。

//vue 中：v-for

//angular:ngfor
import react,
from
"react"
;export
default
class
extends
component,,
,,,]
; name =
["小意"
,"小愛"
,"小樂"
,"二傻"
,"二貨"
,"二胖"];
names_btns =
[亮亮<
/button>
,東東<
/button>
,然然<
/button>
,小新<
/button>
,華哥<
/button>,]
;// 自動化處理:使用for 迴圈遍歷陣列 每一項放到 jsx 語法中，形成新的陣列
showrbtns()
>
<
/button>
; arr.
push
(btn);}
);return arr;
}showlist()
style=
}>
*<
/li>);
});return arr;
}showtrs()
}// 為什麼要有管道/過濾器: vue/angular 在html中寫js不方便
// react就是js 不存在寫js不方便的情況
let *** =
["女"
,"男"
][item.gender]
;// 陣列[序號]
arr.
push
(>
<
/td>
<
/td>
<
/td>
<
/td>
<
/tr>);
});return arr;
}render()
<
/div>
*/}<
/div>
<
/div>
"1">
序號<
/td>
姓名<
/td>
年齡<
/td>
性別<
/td>
<
/tr>
<
/thead>
<
/tbody>
<
/table>
<
/div>);
}}

import react,

from
"react"
;export
default
class
extends
component
簡化為 () => ***
showbtns=(
)=>
this
.names.
map(
(item, index)
=>
>
<
/button>);
showlis=(
)=>
this
.names.
map(
(item, index)
=>
>
<
/li>);
// showbtns() ;
// });
// // return arr;
// }
render()
<
/ul>
<
/div>);
}}

過程中的關鍵節點 都會觸發對應的函式 —鉤子函式

// 生命週期

//rcc
import react,
from
"react"
;export
default
class
extends
component
;render()
)}>
切換son元件的顯示
<
/button>
/>:""
}>
增加age:
<
/button>
<
/div>);
}}//子元件
class
sonextends
component
;componentdidmount()
// 面試問題: 如何提高 react 渲染效率
// 此生命週期的返回值 將會決定頁面要不要重新整理
shouldcomponentupdate
(props, state)
//false代表不更新ui
console.
log(
"num是奇數, 重新整理ui");
return
true;}
// props: 父子傳參的值, 類似於vue 的 props 屬性
// 則 props = 
componentdidupdate
(old_props, old_state)
componentwillunmount()
render()
)}>
<
/button>
<
/div>);
}}

react條件列表渲染

條件渲染 1.條件判斷 constructor props render else return 封裝到函式中 constructor props render gettitlejsx else return titlejsx 2.三元運算子class extends react.component...

React學習 條件渲染 列表渲染 表單渲染

如下 lang en charset utf 8 name viewport content width device width,initial scale 1.0 documenttitle head div body src crossorigin script src crossorigin...

React條件渲染

在乙個新的元件內根據不同的條件返回不同內容的元件 function greeting props return 將元素存入乙個變數，作為變數表示式再渲染 let button null if isloggedin else 當條件滿足再渲染，true expression總是會返回expressio...