8 react 列表渲染 （for 迴圈）

function

numberlist (props) )
return
(    )}
const numbers = [1,2,3,4,5]
reactdom.render(  ,
document.getelementbyid('root')
)

function

listitems (props) )
const sideby = items.map(item => 
--)  
return
(    
)}const items = [, ]
reactdom.render(  ,
document.getelementbyid('root')
)

1. react 的迴圈渲染是利用 陣列的遍歷 api (map)  返回乙個react dom 的集合，插入到 jsx 中

2. 遍歷時必須有唯一索引 key 提高遍歷的效率。萬不得已可以使用 index

3. jsx 語法中可以直接巢狀遍歷

function

numberlist (props) 
let numbers = [1,2,3,4,5,6]
reactdom.render(  ,
document.getelementbyid('root')
)

8 react 高階元件

1 高階元件 封裝 高階元件使用得是react得一種模式，增強現有元件得功能 乙個高階元件就是乙個函式，這個函式接收得是元件類作為引數得，並且返回得是乙個新元件，再返回得新元件中有輸入引數元件不具備得功能 以上提到得所有得元件都不是元件得例項，是類，輸入得這個元件也可以是無狀態元件函式 2 高階元件...

React 列表渲染

第一種 將列表內容拼裝成陣列放置到模板中。第二種 將資料拼裝成陣列的jsx物件。import react from react import reactdom from react dom let arr 小明 小黑 小白 let arrhtml 小明,小黑,小白 class welcome ext...

React基礎 列表渲染

doctype html en utf 8 viewport content width device width,initial scale 1.0 document title node modules react umd react.development.js script node mod...