react

楔子 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....

楔子 最近小夥伴問了，React 的 jsx 基本的結構長如何，是如何轉換的之類的，順便記錄一下網路大神的資料摘錄。 React 有一個 createElement 的方法可以把資料轉成 react 特殊的結構 React.createElement('div', props={}) 收到特殊的結構之後再由 ReactDOM.render 來進行放在 html 上的位置 ReactDOM.render(jsDOM, document.getElementById('root')) React Basic React vs ReactDOM 摘錄一些 Kent 的示範 code 來演示一下，element 1 ~ 3 就是各種 jsDOM 的寫法，比較特別的是 React.createElement 可以有 2 ~3 個輸入參數 第一個參數指的是 HTML 的 DOM 種類(eg. div span …) 第二個參數輸入的是該 DOM 的 props 第三個參數輸入的是 children const element1 = React.createElement('div', {className: 'container'}) const element2 = React.createElement('div', {className: 'container'}, 'Hello', '', 'World') const element3 = React....

楔子 useContext 是 hook 系列很常使用的東西，通常就在「跨」 components 之間使用，有時加減也好用也有點濫用，說說比較常使用的情境吧.. 例如像 Global Theme 在所有的 component 都包上一層，像 Material UI 就採用這種模式.. 那像假設 firebase Oauth 的情況時，要用嗎?還是可以用 custom hook?其實這二種方式都有人用，看自已的習慣而以.. 一般式 這是比較正常的方式，最外層包一個 Provider 再利用 render prop 來操作 import React from 'react'; export const UserContext = React.createContext(); export default function App() { return ( <UserContext.Provider value="user"> <User /> </UserContext.Provider> ) } function User() { return ( <UserContext.Consumer> {value => <h1>{value}</h1>} </UserContext.Consumer> ) } Kent c dodds 但其實如果使用 Kent 的起手式，其實蠻優美的.. Kent useContext code...

楔子 最近有些小夥伴在彼此討論時，常常出現一些不太知道原因，但改一改就好了，就隨手做一下筆記也方便提醒自已。 狀況一: 分不清楚有沒有回傳值 functo go1 () { return 1 } // 有回傳值 functin go2 () { console.log(3) } // 無回傳值 const go3 = () => 2 const go4 = () => { console.log(4) } // 無回傳值 function addOne (x) { return x } const go5 = () => addOne(3) const go6 = () => { 7 } const go7 = (x) => ({x}) 從上面的問題來看，最直覺的就是要有 return 字眼就是代表有回傳值，所以 go1 go2 很容易判斷。...

楔子 摘錄 Kent 的 React Advance Pattern: Compond Components 這個設計模式有什特殊的點? 如果要做一個切換的鈕的元件，大概就會用一個變數來判斷要如何切換? function App() { const [on, setOn] = React.useState(false) return ( <div> { on ? <div>The button is on</div> : null } { on ? null : <div>The button is off</div> } </div> ) } 這樣的 code 就有點醜，那有沒有可能性把 code 長成這樣 ? function App() { return ( <div> <Toggle> <ToggleOn>The button is on</ToggleOn> <ToggleOff>The button is off</ToggleOff> <ToggleButton /> </Toggle> </div> ) } 來完成 Toogle ToogleOn ToogleOff 這三個元件的寫法呢?...

使用情境 一開始的 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 嗎?...