每個開發人員都必須知道的基本 React 技巧

React 非常強大，但掌握它意味著超越基礎知識並學習一些鮮為人知的技巧來簡化開發。以下是我個人最喜歡的 20 個 React 技巧的概述，它們可以提高您的工作效率並幫助您編寫更乾淨、更有效的程式碼。讓我們直接進入範例！

---

1. 條件渲染的短路評估

透過短路評估避免使用冗長的 if 語句進行條件渲染。

{isLoading && <Spinner />}

這將呈現 >只有當 isLoading 為 true 時，保持 JSX 乾淨。

---

2. 帶有類別名稱庫的動態類別名稱

類別名稱庫可以輕鬆有條件地應用類別。

npm install classnames

import classNames from 'classnames';

const buttonClass = classNames({
  'btn': true,
  'btn-primary': isPrimary,
  'btn-secondary': !isPrimary,
});

<button className={buttonClass}>Click Me</button>

---

3. 使用 useMemo 記住昂貴的計算

如果計算成本很高，請將其儲存起來，這樣 React 就不會進行不必要的重新計算。

const sortedData = useMemo(() => data.sort(), [data]);

僅當資料變更時才重新計算排序資料。

---

4. 使用 useEffect 對輸入進行去抖

透過消除輸入變更的抖動來避免不斷的重新渲染。

const [value, setValue] = useState('');
const [debouncedValue, setDebouncedValue] = useState('');

useEffect(() => {
  const handler = setTimeout(() => setDebouncedValue(value), 500);
  return () => clearTimeout(handler);
}, [value]);

<input value={value} onChange={(e) => setValue(e.target.value)} />

---

5. 可重複使用邏輯的自訂掛鉤

將邏輯封裝在自訂掛鉤中以跨元件重複使用它。

function useFetch(url) {
  const [data, setData] = useState(null);

  useEffect(() => {
    fetch(url).then(res => res.json()).then(setData);
  }, [url]);

  return data;
}

const Component = () => {
  const data = useFetch('/api/data');
  return <div>{data ? JSON.stringify(data) : 'Loading...'}</div>;
};

---

6. 使用 React.lazy 延遲載入元件

透過拆分組件來最佳化載入時間。

const LazyComponent = React.lazy(() => import('./LazyComponent'));

function App() {
  return (
    <React.Suspense fallback={<div>Loading...</div>}>
      <LazyComponent />
    </React.Suspense>
  );
}

---

7. 使用 useRef 存取之前的 Props 或 State

要存取先前的狀態值，請使用 useRef。

const [count, setCount] = useState(0);
const prevCount = useRef(count);

useEffect(() => {
  prevCount.current = count;
}, [count]);

console.log(`Previous: ${prevCount.current}, Current: ${count}`);

---

8. 透過將函數傳遞給 useCallback 來避免重新渲染

如果某個函數不需要更改，請使用 useCallback 來記憶它。

const increment = useCallback(() => setCount(count + 1), [count]);

---

9. 解構道具以實現更簡潔的程式碼

在函數參數中解構 props。

const User = ({ name, age }) => (
  <div>{name} is {age} years old</div>
);

---

10. React.Fragment 用於在沒有額外 Div 的情況下將元素分組

包裹元素而不增加額外的 DOM 節點。

<>
  <p>Paragraph 1</p>
  <p>Paragraph 2</p>
</>

---

11. 捕獲 JavaScript 錯誤的錯誤邊界

捕獲子組件中的錯誤以防止整個應用程式崩潰。

class ErrorBoundary extends React.Component {
  state = { hasError: false };

  static getDerivedStateFromError() {
    return { hasError: true };
  }

  render() {
    if (this.state.hasError) return <h1>Something went wrong.</h1>;
    return this.props.children;
  }
}

Jagroop2001 (Jagroop) · GitHub

?‍?全端開發人員 | ？機器學習開發人員 | ？開發關係專業版 – ？可供租借 - Jagroop2001

github.com

12. 使用 PropTypes 進行 Prop 驗證

透過定義 prop 類型儘早發現錯誤。

{isLoading && <Spinner />}

---

13. 使用 useReducer 的狀態減速器

對於複雜的狀態邏輯，useReducer 可以更有效率。

npm install classnames

---

14. useLayoutEffect 進行 DOM 操作

在 DOM 更新之後、繪製之前運行效果。

import classNames from 'classnames';

const buttonClass = classNames({
  'btn': true,
  'btn-primary': isPrimary,
  'btn-secondary': !isPrimary,
});

<button className={buttonClass}>Click Me</button>

---

15. 用 Context 和 useContext 封裝狀態邏輯

無需道具鑽探即可建立全域狀態。

const sortedData = useMemo(() => data.sort(), [data]);

---

16. 避免在 JSX 中定義內嵌函數

內嵌定義函數會導致重新渲染。相反，在外部定義它們。

const [value, setValue] = useState('');
const [debouncedValue, setDebouncedValue] = useState('');

useEffect(() => {
  const handler = setTimeout(() => setDebouncedValue(value), 500);
  return () => clearTimeout(handler);
}, [value]);

<input value={value} onChange={(e) => setValue(e.target.value)} />

---

17. 在 JSX 中使用可選鏈來實現安全的屬性存取

優雅地處理 null 或未定義的值。

function useFetch(url) {
  const [data, setData] = useState(null);

  useEffect(() => {
    fetch(url).then(res => res.json()).then(setData);
  }, [url]);

  return data;
}

const Component = () => {
  const data = useFetch('/api/data');
  return <div>{data ? JSON.stringify(data) : 'Loading...'}</div>;
};

---

18. 使用 key 屬性避免重新渲染問題

渲染清單時始終使用唯一鍵。

const LazyComponent = React.lazy(() => import('./LazyComponent'));

function App() {
  return (
    <React.Suspense fallback={<div>Loading...</div>}>
      <LazyComponent />
    </React.Suspense>
  );
}

---

19. 使用命名導出導出元件以實現更好的導入控制

命名匯出讓匯入特定元件變得更加容易。

const [count, setCount] = useState(0);
const prevCount = useRef(count);

useEffect(() => {
  prevCount.current = count;
}, [count]);

console.log(`Previous: ${prevCount.current}, Current: ${count}`);

然後依需求導入：

const increment = useCallback(() => setCount(count + 1), [count]);

---

20. 可重複使用組件模式：高階組件（HOC）

用 HOC 包裹組件以添加額外的邏輯。

const User = ({ name, age }) => (
  <div>{name} is {age} years old</div>
);

---

掌握這些技巧將幫助你編寫更簡潔、可讀、高效的 React 程式碼！快樂編碼！

以上是每個開發人員都必須知道的基本 React 技巧的詳細內容。更多資訊請關注PHP中文網其他相關文章！