簡介：簡潔 React 程式碼的力量
嘿，UI 開發人員朋友們！你準備好升級你的 React 遊戲了嗎？今天，我們將深入探討 React 的世界——那些漂亮、緊湊的程式碼片段，可以讓你的生活變得更輕鬆。無論您是 React 新手還是經驗豐富的專業人士，這些俏皮話都一定能為您的工具箱增添一些額外的活力。
React JS 已成為建立使用者介面的首選庫，這是有充分理由的。它靈活、高效，讓我們可以創造一些非常棒的東西。但有時，我們發現自己寫了不必要的程式碼。這就是這些俏皮話派上用場的地方。它們就像 React 世界的瑞士軍刀——雖小，但威力如此之大！
所以，拿起你最喜歡的飲料，放鬆一下，讓我們探索 10 個 React 俏皮話，它們會讓你更聰明地編碼，而不是更困難。準備好？讓我們直接跳進去吧！
-
條件渲染快捷方式
讓我們從一個經典的 React 場景開始：條件渲染。您知道，當您只想在滿足特定條件時才顯示某些內容。傳統上，您可以使用 if 語句或三元運算子。但看看這個：
{condition && <Component />}這個小 gem 使用邏輯 AND 運算子 (&&) 僅當條件為真時才渲染元件。它簡單、乾淨，並且可以毫不費力地完成工作。
它是如何運作的
這句話的美妙之處在於 JavaScript 如何計算邏輯表達式。如果 && 之前的條件為 false，則整個表達式為 false，且 React 不會渲染任何內容。但如果這是真的，React 會繼續評估 && 之後的內容，在本例中是我們的元件。
何時使用它
當你有一個簡單的是或否的情況時，這種技術是完美的。也許您只想為登入用戶顯示歡迎訊息，或僅在特定時間內顯示特別優惠。不管怎樣，這句話已經可以滿足你的需求了。
2.預設道具快速鍵
接下來，我們來談談預設道具。我們都知道處理 props 可能無法傳遞給元件的情況是多麼重要。通常的方法是設定 defaultProps 或在函數簽名中使用預設參數。但這裡有一個俏皮的俏皮話可以解決這個問題：
const {prop = defaultValue} = props;該行使用具有預設值的解構賦值。如果props中未定義prop ，它將回退到defaultValue 。
為什麼它很棒
這種方法非常乾淨，並且發生在函數體內。當您處理多個 props 並且不想弄亂函數簽名或加入單獨的 defaultProps 物件時，它特別方便。
現實世界的例子
假設您正在建立一個可以具有不同大小的 Button 元件。你可以這樣使用它：
const Button = ({ size = 'medium', children }) => {
return <button className={`btn-${size}`}>{children}</button>;
};現在，如果有人使用您的按鈕而不指定尺寸，它將預設為「中」。很整潔，對吧？
-
狀態更新快捷方式
狀態管理是React開發的重要組成部分，有時我們需要根據狀態之前的值來更新狀態。這是一個讓這件事變得輕而易舉的一句話：
setCount(prevCount => prevCount + 1);這使用狀態設定器的函數形式，它接收先前的狀態作為參數。
背後的魔力
此方法可確保您始終使用最新的狀態值，這在狀態更新可能批次或延遲的情況下至關重要。
何時實現這一目標
每當您需要根據先前的值更新狀態時，請使用此選項。它在計數器、切換布林值或新狀態依賴舊狀態的任何情況下特別有用。
-
陣列操作快速鍵
在 React 中使用陣列是一項常見任務，尤其是在處理專案清單時。這是一個單行程式碼，可以幫助您將一項新增到處於狀態的陣列中，而無需更改原始專案：
setItems(prevItems => [...prevItems, newItem]);這使用展開運算子來建立一個新陣列，其中包含所有先前的專案，並在末尾加上新的專案。
為什麼它很重要
在 React 中，不變性是效能和可預測性的關鍵。這一行確保您建立一個新陣列而不是修改現有陣列，這正是 React 想要的。
實際應用
假設您正在建立待辦事項清單應用程式。當使用者新增任務時，您可以使用此行來更新您的狀態：
const addTask = (newTask) => {
setTasks(prevTasks => [...prevTasks, newTask]);
};簡單、乾淨、有效！
-
物件更新捷徑
與陣列類似，更新狀態中的物件是 React 中的常見操作。這是一個單行程式碼，可讓您更新物件的特定屬性而不改變原始物件：
setUser(prevUser => ({ ...prevUser, name: 'New Name' }));這使用擴充運算子來建立一個具有前一個使用者的所有屬性的新物件，但用新值覆寫“name”屬性。
它的美麗
此方法保持不變性，同時允許您僅更新所需的屬性。這就像在說：“除了這些特定的變化之外，保持一切不變。”
當你會愛上這個
當您處理表單或任何需要根據使用者輸入或其他事件更新物件的一部分的場景時，這一行話就會大放異彩。
-
Ref 回呼快捷鍵
React 中的 Refs 對於直接存取 DOM 元素非常有用。這是一個設定 ref 回呼的單行程式碼：
<input ref={node => node && node.focus()} />這將建立一個在渲染時自動聚焦的輸入元素。
它是如何運作的
ref 回呼接收 DOM 節點作為參數。此單行程式碼檢查節點是否存在（以避免 ref 為 null 時出現錯誤），然後對其呼叫 focus 方法。
完美的用例
此技術非常適合建立可存取的表單，您希望在表單載入時自動關注第一個輸入欄位。
-
風格快捷方式
React 中的內聯樣式有時可能有點冗長。這是一條使它們更簡潔的一行：
<div style={{ color: 'red', fontSize: '14px' }} />這使用物件文字在一行中定義多種樣式。
為什麼它很酷
雖然我們通常更喜歡 CSS 類別來設定樣式，但有時內聯樣式是必要或方便的。這一行讓你的 JSX 保持乾淨可讀。
何時使用它
這對於根據 props 或狀態更改的動態樣式特別有用，或者當您不想設定單獨的 CSS 檔案時用於快速原型設計。
-
類別名稱快捷方式
條件類別名稱是 React 中的常見模式。這是讓這過程順利進行的一句台詞：
<div className={`base-class ${condition ? 'active' : ''}`} />這使用模板文字和三元運算子來有條件地加入類別。
聰明的一點
三元中的空字串確保條件為 false 時不會加入額外的空格，從而保持類別名稱的乾淨。
真實場景
這對於導航選單中的活動狀態或基於使用者互動切換視覺狀態之類的事情來說是完美的。
-
錯誤邊界捷徑
錯誤邊界是健全的 React 應用程式的重要組成部分。這是一個建立簡單錯誤邊界的單行程式碼：
class ErrorBoundary extends React.Component { state = { hasError: false }; static getDerivedStateFromError = () => ({ hasError: true }); render = () => this.state.hasError ? <h1>Something went wrong.</h1> : this.props.children; }雖然從技術上講，這是一行中的多個語句，但它以非常簡潔的方式建立了完整的錯誤邊界元件。
分解它
這個單行程式碼定義了一個類別元件，該元件具有用於追蹤錯誤的狀態、一個用於在發生錯誤時更新狀態的靜態方法，以及一個顯示錯誤訊息或正常渲染子層級的渲染方法。
當它派上用場時
將其包裹在應用程式中您想要優雅地捕獲和處理錯誤的任何部分，以防止整個應用程式崩潰。
-
備忘錄快捷方式
最後但並非最不重要的一點是，讓我們來看看用於記憶功能元件的單行程式碼：
const MemoizedComponent = React.memo(({ prop1, prop2 }) => <div>{prop1} {prop2}</div>);這將建立一個功能元件的記憶版本，只有在其 props 發生變化時才會重新渲染。
神奇的觸感
React.memo 是一個高階元件，當 props 相同時，它會跳過渲染，這對於經常使用相同 props 渲染的元件來說可以大大提升效能。
最適合用於
這對於渲染成本昂貴或位於元件樹深處並經常接收相同道具的純功能元件來說非常有用。
結論：擁抱 React One-Liners 的力量
好了，夥計們！十個強大的 React 行話可以讓你的程式碼更乾淨、更有效率，而且我敢說，寫起來更有趣。從條件渲染到錯誤邊界，這些緊湊的片段具有真正的衝擊力。
請記住，雖然這些俏皮話很棒，但它們並不總是適合每種情況的最佳解決方案。關鍵是要了解它們如何運作以及何時使用它們。與編碼中的所有事情一樣，可讀性和可維護性應該始終是您的首要任務。
所以，下次當你深入 React 專案時，請嘗試一下這些俏皮話。它們可能會節省您一些時間並使您的程式碼更加優雅。誰知道呢？您甚至可能會用新發現的 React 魔法給其他開發人員留下深刻的印象。
不斷探索，不斷學習，最重要的是，繼續享受 React 的樂趣！畢竟，這就是我們 UI 開發人員的動力，對吧？祝大家編碼愉快！
要點：
-
單行程式碼可以顯著減少 React 程式碼中的樣板程式碼。
-
理解這些模式可以讓你成為更有效率的 React 開發人員。
-
使用單行程式碼時，請務必考慮可讀性和可維護性。
-
在您的專案中試驗這些片段，看看它們最適合的位置。
-
請記住，我們的目標不僅僅是更短的程式碼，而是更清晰、更具表現力的程式碼。
那麼，你最喜歡的 React 一句台詞是什麼呢？你還有其他可以發誓的人嗎？與其他開發人員分享並保持對話。我們可以共同突破 React 的可能性，並建立更令人驚嘆的使用者介面。下次見，祝 React 快樂！
原文出處：https://dev.to/nnnirajn/10-react-one-liners-every-ui-developer-should-know-c97
1) --- 會變成分隔線（上一行必須是空白）
2) # 會變成一級標題
3) ## 會變成二級標題
4) ### 會變成三級標題
5) **粗體文字**會顯示粗體文字
6) ```當第一行與最後一行會顯示程式碼
7) 請搜尋 Markdown 語法，了解各種格式