React 是一個(gè)強(qiáng)大的 JavaScript 庫(kù)，用于構(gòu)建用戶界面。掌握一些技巧，可以幫助你編寫(xiě)更干凈、更高效、更易于維護(hù)的代碼。本文將探討五個(gè)基本的 React 技巧，助你寫(xiě)出更高性能、更易讀的代碼。
1. 使用三元運(yùn)算符代替邏輯與（&&）運(yùn)算符來(lái)渲染元素
在 React 中，我們常常需要根據(jù)某些條件來(lái)?xiàng)l件性地渲染組件或元素。然而，使用&&運(yùn)算符進(jìn)行條件渲染可能會(huì)在評(píng)估結(jié)果為假值（例如false、null、undefined、0或''）時(shí)變得棘手。為了避免意外的渲染行為，建議使用三元運(yùn)算符。
&&行為示例：
{
0 && <h1>Hello world 5</h1>;
}
{
0 ? <h1>Hello world 6</h1> : null;
}
第一個(gè)示例（{0 && <h1>Hello world 5</h1>}）將在 UI 中渲染0，因?yàn)?/span>0在 JavaScript 中是假值，React 將其解釋為false。但 React 不會(huì)渲染為空，而是渲染假值本身（0）。
第二個(gè)示例（{0 ? <h1>Hello world 6</h1> : null}）將不渲染任何內(nèi)容。由于條件是0（假值），三元運(yùn)算符將評(píng)估為null，React 不會(huì)渲染任何內(nèi)容。
使用三元運(yùn)算符的更好方法：
與其依賴&&運(yùn)算符，你可以使用三元運(yùn)算符確保在條件為假值時(shí)渲染正確的后備內(nèi)容。
{
0 ? <h1>Hello world 5</h1> : null;
}
在這種情況下，如果條件是假值（0），React 將渲染null，這意味著不渲染任何內(nèi)容，提供了更可預(yù)測(cè)和預(yù)期的行為。
2. 使用useState惰性初始化
React 的useState鉤子可以接受一個(gè)函數(shù)作為其初始值，允許你惰性地初始化狀態(tài)。這在初始狀態(tài)的計(jì)算成本較高或依賴于僅應(yīng)運(yùn)行一次的某些計(jì)算時(shí)特別有用。
為什么使用惰性初始化？
性能提升：如果初始狀態(tài)涉及昂貴的計(jì)算或數(shù)據(jù)獲取，惰性初始化有助于將這些成本推遲到實(shí)際需要時(shí)。
避免不必要的計(jì)算：你傳遞給useState作為初始值的函數(shù)僅在組件掛載期間執(zhí)行一次，并且在后續(xù)渲染中不會(huì)被重新計(jì)算。
示例：
import React, { useState } from'react';
const ExpensiveComponent: React.FC = () => {
const [count, setCount] = useState(() => {
// 昂貴的計(jì)算
console.log('Computing initial state');
returnMath.random(); // 例如，生成一個(gè)隨機(jī)數(shù)
});
return<div>Initial Random Value: {count}</div>;
};
exportdefault ExpensiveComponent;
在這個(gè)示例中：
useState(() => Math.random())僅在初始渲染時(shí)調(diào)用函數(shù)一次。
這確保了僅在計(jì)算成本高昂時(shí)才生成隨機(jī)數(shù)，提高了性能。
3. 使用惰性加載組件提高性能
React 的React.lazy()和Suspense是惰性加載組件的絕佳工具，這有助于將你的 JavaScript 分割成更小的包，并僅在需要時(shí)加載它們。這顯著減少了初始加載時(shí)間，并提高了你的應(yīng)用性能。
示例：
import React, { Suspense } from 'react';
const LazyComponent = React.lazy(() => import('./LazyComponent'));
function App() {
return (
<Suspense fallback={<div>Loading...</div>}>
<LazyComponent />
</Suspense>
);
}
在這個(gè)示例中：
React.lazy()允許你動(dòng)態(tài)導(dǎo)入LazyComponent。
Suspense組件用于在惰性加載的組件完全渲染之前顯示加載狀態(tài)。
通過(guò)使用惰性加載，你的應(yīng)用只會(huì)加載初始渲染所需的組件，并按需獲取其他組件，增強(qiáng)了性能，特別是在大型應(yīng)用中。
4. 在 JavaScript 中使用可選鏈
如果你正在使用 JavaScript，可選鏈（?.）是在訪問(wèn)對(duì)象的深層嵌套屬性時(shí)的救星。它防止了在嘗試訪問(wèn)undefined或null的屬性時(shí)發(fā)生的錯(cuò)誤。可選鏈在現(xiàn)代 JavaScript 中可用，并允許你安全地訪問(wèn)屬性，而無(wú)需手動(dòng)檢查null或undefined。
示例：
function MyComponent({ data }) {
const address = data?.info?.address ?? 'Address not available';
return <div>{address}</div>;
}
在這個(gè)示例中：
data?.info?.address安全地訪問(wèn)address屬性，如果data或info是undefined或null，不會(huì)拋出錯(cuò)誤。
??運(yùn)算符在address是undefined時(shí)提供默認(rèn)值。
沒(méi)有可選鏈，你需要手動(dòng)檢查每個(gè)級(jí)別，這很快會(huì)導(dǎo)致代碼混亂且難以閱讀。可選鏈保持了代碼的清晰和無(wú)錯(cuò)誤。
5. 使用useRef以避免重新渲染
在 React 中，當(dāng)你處理表單并且不需要組件在每次輸入變化時(shí)重新渲染時(shí)，使用useRef而不是useState更好。useRef直接存儲(chǔ)輸入字段的值，并且在值變化時(shí)不觸發(fā)重新渲染，這使得它對(duì)大型表單來(lái)說(shuō)更高效。
示例：
import React, { useRef } from 'react'; const MyForm: React.FC = () => { const nameRef = useRef<HTMLInputElement>(null); const handleSubmit = (event: React.FormEvent) => { event.preventDefault(); if (nameRef.current) { alert(`Name: ${nameRef.current.value}`); } }; return ( <form onSubmit={handleSubmit}> <label> Name: <input type='text' ref={nameRef} /> </label> <button type='submit'>Submit</button> </form> ); }; export default MyForm;
在這個(gè) TypeScript 示例中：
useRef用于跟蹤輸入值，而不會(huì)導(dǎo)致組件在每次輸入變化時(shí)重新渲染。
nameRef.current用于在表單提交時(shí)直接訪問(wèn)輸入的值。
當(dāng)表單值不需要觸發(fā)重新渲染以進(jìn)行驗(yàn)證或動(dòng)態(tài)更新時(shí)，使用useRef特別有用，使其成為性能敏感表單的極佳選擇。
結(jié)論
通過(guò)在你的代碼中應(yīng)用這五個(gè) React 技巧，你可以顯著提高性能、可讀性和可維護(hù)性。以下是快速回顧：
- 使用三元運(yùn)算符進(jìn)行條件渲染，而不是
&&。 - 實(shí)施組件的惰性加載以改善初始加載時(shí)間。
- 使用 JavaScript 中的可選鏈進(jìn)行更安全的屬性訪問(wèn)。
有了這些技術(shù)，你的 React 應(yīng)用將更高效、更易于維護(hù)，從而帶來(lái)更好的用戶體驗(yàn)和更平滑的開(kāi)發(fā)過(guò)程。編碼愉快！
原文地址：https://dev.to/geraldhamiltonwicks/5-react-tricks-to-improve-code-quality-and-performance-2m88
該文章在 2024/12/28 12:25:33 編輯過(guò)
400 186 1886
