React Hook(useState, useEffect...等)

在React中 函式內一般變數若更新 畫面上不會跟著更動 所以要用useState等方法，就可以連動畫面

function App() {
  const [count, setCount] = useState(0); //寫成 let count = 0 數字就不會動

  return (
    <>
      {count}
      <button
        type="button"
        onClick={() => {
          setCount(count + 1);
        }}
      >
        {count}
      </button>
    </>
  );
}

useState 在input的應用(onChange) [button 中用onClick]

function App() {
  const [text, settext] = useState(0);
  return (
    <>
      {text} {/*渲染到畫面上*/}
      <input
        type="text"
        value={text}
        onChange={(e) => {
          //onChange => 如果input有改變 進行{}內的動作
          settext(e.target.value); //將input輸入的內容更新至text的值，且會渲染到畫面上
        }}
      />
    </>
  );
}

useState 注意事項

const [text, settext] = useState(0)
1.不可直接用array.push or pop 等方法直接更動變數text
2.需使用setText去變更
3.不要放在if等判斷式中以防出錯 建議放在元件最上層

useEffect 生命週期(觸發條件)

useEffect(() => {}); //任何更新都觸發
useEffect(() => {}, []); //只有初始化觸發一次
useEffect(() => {}, [count]); //更動count就觸發

useEffect + setInterval

const [arr, setArr] = useState([]);
function mergeArrayData() {
    const newArray = [{ num: 1 }, { num: 2 }, { num: 3 }];

    setArr((pre) => [...pre, ...newArray]); //不可寫成set([...arr, ...newArray]) => button可用
  }
  
useEffect(() => {
    setInterval(() => {
      mergeArrayData();
    }, 1000);
  }, []);
}

bootstrap 取得DOM 在 useEffect

及 //useRef(避免重複render[渲染])的寫法

let myModal;
function App() {               //+  const modalRef = useRef(null);
  const openModal = () => { 
    myModal.show();
  };

  useEffect(() => {
    myModal = new bootstrap.myModal("#newModal"); 
    //myModal = new bootstrap.myModal(modalRef.current);
  });
  return (
    <>
      <button onClick={openModal}>Open</button>
      <div id="newModal"></div>  //<div ref={modalRef}></div>
    </>
  );
}