React.js — 第06天
IPFS
![](https://assets.matters.news/embed/4342860c-32e3-41ff-86d8-c9602157655a.jpeg)
擴充元件(Extensions)
ES7+ React/Redux/React-Native snippets | URL
![](https://assets.matters.news/embed/7c8ba2ac-a442-4500-b29d-dd3b8c87b3a9.jpeg)
Auto Import
試試看 | Here
![](https://assets.matters.news/embed/9e6b36b1-9a94-4f0f-8654-044c6987f901.jpeg)
資料夾結構(Folder Structure)
![](https://assets.matters.news/embed/cbc4a10f-600d-479d-bf58-e49f3fcd740e.jpeg)
❤️快速初始設定
安裝完上述擴充元件,透過指令,快速建立 jsx!
超級快捷鍵(Shortcut)?!
![](https://assets.matters.news/embed/9c057d2d-b1db-4bef-847b-9f340b9d4f48.jpeg)
![](https://assets.matters.news/embed/49e4f7e0-1f51-41e0-a883-fc889039ff21.jpeg)
另外一個指令
![](https://assets.matters.news/embed/f174bd83-6e20-4c95-82cf-e0a74347ba34.jpeg)
![](https://assets.matters.news/embed/84c19843-7281-4a6d-b358-0959b3b4b35c.jpeg)
新 jsx
![](https://assets.matters.news/embed/bd8e17df-3524-4fbb-bf02-ce03a609f430.jpeg)
![](https://assets.matters.news/embed/962b9aae-2ea8-42fe-8201-018d47289011.jpeg)
![](https://assets.matters.news/embed/ab19279a-92c1-4adb-be9b-65f7ca32259c.jpeg)
app.js
將props傳入
![](https://assets.matters.news/embed/41fb0596-507a-443f-a0eb-32128048b817.jpeg)
card-list.component.jsx
記得使用map,一定要有key!
![](https://assets.matters.news/embed/b1896ae5-3c6a-4b89-ab8a-05964538052c.jpeg)
![](https://assets.matters.news/embed/e3b9bd57-1f1c-430c-9d2f-92ed1d6312be.jpeg)
總結
- react 渲染(renders) 時機點都在 mount
- 重渲染(re-renders)的時機點在,當props 改變, setState被呼叫
喜欢我的作品吗?别忘了给予支持与赞赏,让我知道在创作的路上有你陪伴,一起延续这份热忱!
![](https://imagedelivery.net/kDRCweMmqLnTPNlbum-pYA/prod/avatar/d817bb18-ddf9-48cf-8377-7ad47ca8c94a.jpeg/public)
- 来自作者
- 相关推荐