MonLes
MonLes

嘗試從都市叢林回到魔法森林。 更多作品 | https://linktr.ee/monles

React.js — 第04天



一頁式應用程式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)
);
}




更多raw code |app.js 在 github

More info in MDN | Here



更多有關 Promise

if (true)



if (false)


CC BY-NC-ND 2.0

Like my work?
Don't forget to support or like, so I know you are with me..

Loading...
Loading...

Comment