hook

楔子 context 就語意上指的就是一個「環境」的概念，就如果轉成電腦來說就是「State」的意思。 而在 react component 有幾種情況可以夾帶這些「環境變數」 props state React 提供了另一個手法「context」來簡化語法 The Context API const LocaleContext = React.createContext(); LocaleContext 有二個屬性: Provider & Consumer Provider allows us to “declare the data that we want available throughout our component tree”. Consumer allows “any component in the component tree that needs that data to be able to subscribe to it”. Provider 提供一個 value 的 props <MyContext.Provider value={data}> <App /> </MyContext.Provider> 比較完整的 code // LocaleContext....

楔子 React 改成 functional component 最方便用的方式，在整個 code syntax 也是簡潔，不過當新舊交換時，常常難免會有一些使用上的規範。 rule of hook 直接用 Tyler 的範例來標示 rule function Counter () { // 👍 from the top level function component const [count, setCount] = React.useState(0) if (count % 2 === 0) { // 👎 not from the top level React.useEffect(() => {}) } const handleIncrement = () => { setCount((c) => c + 1) // 👎 not from the top level React.useEffect(() => {}) } } function useAuthed() { // 👍 from the top level of a custom Hook const [authed, setAuthed] = React....

使用情境 一開始的 API 呼叫把值塞進 React 搜尋 autocomplete 前端一開始開啟都會有呼叫 API 情境的狀況發生，比較基本的方式使用大概會長這樣子。 const Users = () => { const [users, setUsers] = useState([]) useEffect(() => { fetchUsers().then((users) => setUsers(users)) }, []) if (!users) return <div>Loading...</div> return ( <ul> {users.map((user) => ( <li>{user.name}</li> ))} </ul> ) } 那如果要使用 async/await 呢? 很直覺的會這樣寫 // 直接在 useEffect 內使用 async useEffect(async () => { const users = await fetchUsers() setUsers(users) }, []) 但會有一個情況發生，還記的 useEffect 有一個 cleanup function 嗎?...