初探 React - 用計數器來當範例


Posted by Rich on 2021-08-17

將一般 HTML 改成 JSX 。並寫成 React 組件。

function Counter() {
  return (
  <div className="container">
      <div className="chevron chevron-up"}>
    </div>
      <div className="number" >
        256
      </div>
    <div className="chevron chevron-down">
      </div>
    </div>
  )
}

這是來自PJ大大這邊的範例。
好像蠻簡單的,就是用一個 function 把整個 HTML 包起來,然後回傳回去。

現在加上一點簡單的事件監聽。

function Counter() {
  const [count, setCount] = useState(256)
  return (
  <div className="container">
      <div className="chevron chevron-up" onClick={ () => {
          setCount(count + 1)
          }}>
    </div>
      <div className="number" >
        {count}
      </div>
    <div className="chevron chevron-down" onClick={ () => {
          setCount(count - 1)
          }}>
      </div>
    </div>
  )
}

onClick 是一個事件監聽器,裡面我們要放觸發事件時要執行的方法。
再來看 const [count, setCount] = useState(256)setCount(count + 1)
React 會針對變化的部份重新渲染。我們用 useState 告訴 React 要改變的資料和方法。
useState,他會回傳一個陣列。陣列第一個元素是要監聽的資料。第二個元素則是一個 function ,傳入你要改變資料的方法。然後 useState(裡面放 count 的初始值)
另外,這裡宣告一律用 const。我的理解是,我們只希望 count 是被 setCount 改變。雖然用 let 也可以跑。但這樣不正確。
成果:
一個計數器










Related Posts

Single Page Application 的應用

Single Page Application 的應用

Modelsim 基礎教學

Modelsim 基礎教學

[T-SQL] Cursor範例

[T-SQL] Cursor範例


Comments