iT邦幫忙

2021 iThome 鐵人賽

DAY 30
0
Modern Web

JavaScript 基礎修練系列 第 30

[Day30] React - 淺談 Component 的State

React Component 只能透過資料狀態的改變來更新 UI,而 React 元件有兩種資料來源:

  • Props: 透過外部(父元件)傳進來的元件,是唯讀 (read-only) 的資料
  • State: 元件內部控制自己的狀態 ,是可以自由讀寫的。

每當 React 偵測到 Props 或 State 有更新時,元件就會重新渲染一次

state 即是元件的狀態,可記住元件的一些資料,透過state來保存、控制以及修改自己可變的狀態。

  1. this.state ⇒ 在class component下設定state初始值

  2. useState ⇒ 在functional component下設定state初始值

    useState 會回傳一個array [],裡面包含兩個值,第一個值是 state、第二個值是用來更新 state 的 函式 。每當 state 值改變,就會觸發 re-render (重新渲染)。

    const MyComponent = () => {
      const [inputValue, setInputValue] = React.useState('example123@gmail.com');
      return (
        <>
          <input
            value={inputValue}
            onInput={(e) => {
              const newValue = e.target.value;
              setInputValue(newValue);
            }}
          />
          <p>我的email: {inputValue}</p>
        </>
      );
    };
    

上一篇
[Day29] React - 淺談 Component 的Props
系列文
JavaScript 基礎修練30

1 則留言

0
Vida Lin
iT邦新手 5 級 ‧ 2021-10-01 09:51:59

恭喜葛格完賽啦/images/emoticon/emoticon07.gif

我要留言

立即登入留言