在開發 React App 時，遵循一些 best practices 會使您的程式碼品質提高，這篇文章列出一些給您參考。
- 原文出處：https://dev.to/iambilalriaz/react-best-practices-ege
強烈推薦 VS Code 作為 IDE
Visual Studio Code 有幾個超好用的 React 功能。強大的外掛生態系，對開發者大有幫助：
- Prettier
- ES Lint
- JavaScript (ES6) code snippets
- Reactjs code snippets
- Auto import
使用 ES6 語法
程式碼越漂亮越好。在 JavaScript 中，採用 ES6 語法可以讓程式碼更簡潔。
Arrow Functions
// ES5
function getSum(a, b) {
return a + b;
}
// ES6
const getSum = (a, b) => a + b;
Template Literal
// ES5
var name = "Bilal";
console.log("My name is " + name);
// ES6
const name = "Bilal";
console.log(`My name is ${name}`);
const $ let
const $ let 有各自的變數作用域。const 宣告的變數不能修改，let 宣告的變數可以修改。
// ES5
var fruits = ["apple", "banana"];
// ES6
let fruits = ["apple", "banana"];
fruits.push("mango");
const workingHours = 8;
Object Destructuring
var person = {
name: "John",
age: 40,
};
// ES5
var name = person.name;
var age = person.age;
// ES6
const { name, age } = person;
Defining Objects
var name = "John";
var age = 40;
var designations = "Full Stack Developer";
var workingHours = 8;
// ES5
var person = {
name: name,
age: age,
designation: designation,
workingHours: workingHours,
};
// ES6
const person = { name, age, designation, workingHours };
ES6 的語法特性、彈性，很多值得您一試。
JSX 使用 map 時記得加上 key
array map 時，永遠記得替每個元素加上獨立的 key 值。
const students = [{id: 1, name: 'Bilal'}, {id: 2, name: 'Haris'}];
// in return function of component
<ul>
{students.map(({id, name}) => (
<li key={id}>{name}</li>
))}
</ul>;
元件名稱使用 PascalCase
const helloText = () => <div>Hello</div>; // wrong
const HelloText = () => <div>Hello</div>; // correct
變數和函數名稱使用 camelCase
const working_hours = 10; // bad approach
const workingHours = 10; // good approach
const get_sum = (a, b) => a + b; // bad approach
const getSum = (a, b) => a + b; // good approach
ID 和 css class 名稱使用 kebab-case
<!--bad approach-->
<div className="hello_word" id="hello_world">Hello World</div>
<!--good approach -->
<div className="hello-word" id="hello-world">Hello World</div>
永遠要檢查物件＆陣列的 null & undefined
忘記檢查的話，常常會導致一堆錯誤。
所以要保持檢查的習慣。
const person = {
name: "Haris",
city: "Lahore",
};
console.log("Age", person.age); // error
console.log("Age", person.age ? person.age : 20); // correct
console.log("Age", person.age ?? 20); //correct
const oddNumbers = undefined;
console.log(oddNumbers.length); // error
console.log(oddNumbers.length ? oddNumbers.length : "Array is undefined"); // correct
console.log(oddNumbers.length ?? "Array is undefined"); // correct
避免 Inline Styling
Inline styling 會讓 jsx 程式碼變得很亂。用單獨的 css 文件拆分出來比較好。
const text = <div style={{ fontWeight: "bold" }}>Happy Learing!</div>; // bad approach
const text = <div className="learning-text">Happy Learing!</div>; // good approach
在 .css 文件中：
.learning-text {
font-weight: bold;
}
避免 DOM 操作
用 React state 為主，別用 DOM 操作
糟糕做法：
<div id="error-msg">Please enter a valid value</div>
document.getElementById("error-msg").visibility = visible;
推薦做法：
const [isValid, setIsValid] = useState(false);
<div hidden={isValid}>Please enter a valid value</div>;
使用 isValid 來管理 UI 顯示邏輯。
在 useEffect 記得清乾淨每個事件監聽器
加過的事件監聽器，都要記得清乾淨：
const printHello = () => console.log("HELLO");
useEffect(() => {
document.addEventListener("click", printHello);
return () => document.removeEventListener("click", printHello);
});
避免重複開發，多寫通用元件
讓程式碼越乾淨越好。相似的東西可以寫通用元件。再根據 props 內容傳遞來處理相異處即可：
const Input=(props)=>{
const [inputValue, setInputValue]=useState('');
return(
<label>{props.thing}</label>
<input type='text' value={inputValue} onChange={(e)=>setInputValue(e.target.value)} />
)
}
在其他元件中，就能這樣用：
<div>
<Input thing="First Name" />
<Input thing="Second Name" />
</div>
檔案要分類一下
相關檔案可以分類成一個資料夾。
例如在 React 寫一個導覽列，那就可以開一個資料夾，相關的 .js 與 .css 檔案放裡面。
寫 functional components 為主
簡單顯示一些東西、沒用到 state 的話，那寫 functional components 比寫 class components 好。
如果你會寫 react hooks 的話，那就連 state 都完全不成問題。
養成編寫輔助函數的習慣
有時你在 React App 中會需要一些通用功能。
這種情況，可以開一個 helper-functions.js 檔案，在裡面寫輔助函數，就可以到處使用了。
使用三元運算子代替 if/else if
使用 if/else if 語句會使程式碼變得龐大。使用三元運算子，就簡潔、清楚多了：
// Bad approach
if (name === "Ali") {
return 1;
} else if (name === "Bilal") {
return 2;
} else {
return 3;
}
// Good approach
name === "Ali" ? 1 : name === "Bilal" ? 2 : 3;
新增 index.js 檔案，讓匯入元件更簡單
如果你在 actions 資料夾中有一個 index.js 檔案，當你想在元件中導入時，會像這樣：
import { actionName } from "src/redux/actions";
actions 後面的 index.js 可以省略不寫，就不用這樣囉唆了：
import { actionName } from "src/redux/actions/index";
Destructuring of Props
物件屬性名稱可以拆出來，後面用起來比較方便。
假設你的元件有 name、age 和 designation 這些 props：
// Bad approach
const Details = (props) => {
return (
<div>
<p>{props.name}</p>
<p>{props.age}</p>
<p>{props.designation}</p>
</div>
);
};
// Good approach
const Details = ({ name, age, designation }) => {
return (
<div>
<p>{name}</p>
<p>{age}</p>
<p>{designation}</p>
</div>
);
};
不要嘗試在同一函數中，去碰修改過的 state 變數
在一個函數中，如果你正在為一個狀態變數賦值，在同一個函數中，是拿不到新值的
const Message = () => {
const [message, setMessage] = useState("Hello World");
const changeMessage = (messageText) => {
setMessage("Happy Learning");
console.log(message); // It will print Hello World on console
};
return <div>{message}</div>;
};
使用 === 運算子代替 ==
在比較兩個值時，嚴格檢查變數型別比較好：
"2" == 2 ? true : false; // true
"2" === 2 ? true : false; // false
以上 Best Practices 供您參考，祝福您不斷變強！
共有 0 則留言
文字內容提供幾種功能：
1) --- 會變成分隔線（上一行必須是空白）
2) # 會變成一級標題
3) ## 會變成二級標題
4) ### 會變成三級標題
5) **粗體文字**會顯示粗體文字
6) ```當第一行與最後一行會顯示程式碼
7) 請搜尋 Markdown 語法，了解各種格式
1) --- 會變成分隔線（上一行必須是空白）
2) # 會變成一級標題
3) ## 會變成二級標題
4) ### 會變成三級標題
5) **粗體文字**會顯示粗體文字
6) ```當第一行與最後一行會顯示程式碼
7) 請搜尋 Markdown 語法，了解各種格式
熱門文章
