不廢話的React教學 [03] - 元件的state

系列目錄

React元件 class based 與 functional 差異
在開始之前必須提一下,上一篇雖然提到寫元件可以用class或是function的方式來撰寫,但是如果你的元件使用到狀態(stateful)的話,那就必須以class的方式來撰寫,functional只適合無狀態元件(stateless)

那什麼是state呢?
簡單來說就是元件內部之狀態,舉凡會動的東西都會有狀態。
e.g. 時鐘、使用者輸入都可能觸發或使用到狀態

那就開始吧!
今天來做一個打招呼的網頁,這個東西很簡單就是讓你透過input輸入名稱(使用state記住)然後顯示在網頁上面

這次內容可能比較多,大部分我都把它註解在程式碼裡面了,不過這邊還是在提一下

1. class內部方法使用前需要先bind()來綁定
2. this指的是實體化的自己本身
3. 狀態需要有初始值在類別建構子constructor
4. 改變狀態需要使用setState()
5. ref:一般js我們使用document.getElementById()來獲取節點,但是在react不推薦直接操作DOM節點,這被視為非受控的(ref推薦參考文章)



Demo
See the Pen react state by Philip (@p208p2002) on CodePen.
---

程式碼
---

留言

這個網誌中的熱門文章

[Arduino]電子秤平 重量感測條+HX711AD模組

cpe練習筆記 UVa401 Palindromes

cpe練習筆記 UVa10019 Funny Encryption Method