不廢話的React教學 [03] - 元件的state
在開始之前必須提一下,上一篇雖然提到寫元件可以用class或是function的方式來撰寫,但是如果你的元件使用到狀態(stateful)的話,那就必須以class的方式來撰寫,functional只適合無狀態元件(stateless)
Demo
---
程式碼
---
那什麼是state呢?
簡單來說就是元件內部之狀態,舉凡會動的東西都會有狀態。
e.g. 時鐘、使用者輸入都可能觸發或使用到狀態
那就開始吧!
今天來做一個打招呼的網頁,這個東西很簡單就是讓你透過input輸入名稱(使用state記住)然後顯示在網頁上面
這次內容可能比較多,大部分我都把它註解在程式碼裡面了,不過這邊還是在提一下
1. class內部方法使用前需要先bind()來綁定
2. this指的是實體化的自己本身
3. 狀態需要有初始值在類別建構子constructor
4. 改變狀態需要使用setState()
5. ref:一般js我們使用document.getElementById()來獲取節點,但是在react不推薦直接操作DOM節點,這被視為非受控的(ref推薦參考文章)
這次內容可能比較多,大部分我都把它註解在程式碼裡面了,不過這邊還是在提一下
1. class內部方法使用前需要先bind()來綁定
2. this指的是實體化的自己本身
3. 狀態需要有初始值在類別建構子constructor
4. 改變狀態需要使用setState()
5. ref:一般js我們使用document.getElementById()來獲取節點,但是在react不推薦直接操作DOM節點,這被視為非受控的(ref推薦參考文章)
---
程式碼
---
留言
張貼留言