React 六角学院-学习笔记(React Hooks)

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>    </>  );}