[第05堂] Hook

useState

建立兩個空 array 分別存放 state 以及 setters


const [state, setState] = useState(initialState);

useEffect

useEffect 有兩個參數，第一個參數是函式，第二個參數則是陣列。










useEffect(()=>{},[]);

useEffect(() => {
     // 畫面渲染時會執行的function
    
    return () => {
     // 關閉頁面前會執行的function (在component 即將卸載前觸發)
    };
     
});

useLocation


const location = useLocation();

useHistory



const history = useHistory();
history.goBack();
history.push("/");

useNavigate


const navigate = useNavigate();
navigate("/login");

useParams


const params= useParams();

useSearchParams













const [searchParams,setSearchParams]= useSearchParams();

const changeSearchParams=()=>{
    setSearchParams({ id:"1",  page:"10" })
    // url=/detail?id=1&page=10
}

return (
    <div>
        <div>編號 ：{searchParams.get("id")}</div>
        <button onClick={changeSearchParams}>修改</button>
    </div>
)