[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('[email protected]');
     return (
       <>
         <input
           value={inputValue}
           onInput={(e) => {
             const newValue = e.target.value;
             setInputValue(newValue);
           }}
         />
         <p>我的email: {inputValue}</p>
       </>
     );
   };