React.js — 第04天
IPFS
![](https://assets.matters.news/embed/3a0bb0d3-9dbd-427f-be2b-fa75b39789e9.jpeg)
一頁式應用程式Single Page Application (SPA)
- React 不是框架( framework), 也沒有路由(router)
- 這也是react-router的由來
- SPA 提供高效能表現,透過每次只重新載入被客戶端要求的部分
- 因為javascript只在瀏覽器(客戶端)被執行,而不是在伺服器。
e.g. Url is https://sample.com/index.html 當我們想要到關於我的頁面 Url is https://sample.com/index.html#aboutme
生命週期LifeCycle
在react中,開發者們總想知道何時渲染、何時重渲染。
因為我們希望讓使用者被置入(be placed)(越快越好)
componentDidMount
- component第一次被加入DOM
- 在一個 component’s 的整個生命中,只呼叫一次
componentDidMount() { fetch('https://jsonplaceholder.typicode.com/users') }
fetch( ) & Promise
Promise
是一個表示非同步(async)運算的最終完成或失敗的物件- fetch()回傳一個Promise,你可以使用async/await 語法來簡化程式碼
fetch()
如果你想先在瀏覽器中測試回傳值
componentDidMount() { fetch("https://jsonplaceholder.typicode.com/users") .then((response)=>console.log(response) ); }
![](https://assets.matters.news/embed/0900c7a6-4f66-41c0-8d69-be8fe6543d58.jpeg)
![](https://assets.matters.news/embed/7702b5ac-57a9-49b5-aecc-99167e2a49a3.png)
![](https://assets.matters.news/embed/bae18599-e1c1-431a-a1c6-f9b65d2ff501.jpeg)
更多有關 Promise
if (true)
![](https://assets.matters.news/embed/261d844d-2054-49c3-949c-5fba0958cd93.png)
![](https://assets.matters.news/embed/326b7c77-8435-4eff-a719-55c6572937ef.jpeg)
if (false)
![](https://assets.matters.news/embed/0029b00f-7ab1-47be-8035-30d6862fff0f.png)
![](https://assets.matters.news/embed/dbd174b5-4912-44b0-90fd-3816ec97faeb.jpeg)
喜欢我的作品吗?别忘了给予支持与赞赏,让我知道在创作的路上有你陪伴,一起延续这份热忱!
![](https://imagedelivery.net/kDRCweMmqLnTPNlbum-pYA/prod/avatar/d817bb18-ddf9-48cf-8377-7ad47ca8c94a.jpeg/public)
- 来自作者
- 相关推荐