10 phương pháp phản ứng tốt nhất bạn cần tuân theo vào năm 2022
React là một trong những framework giao diện người dùng phổ biến nhất cho JavaScript. Không giống như các khung công tác khác như Angular, nó rất đơn giản. Do đó, bạn quyết định cách viết hoặc cấu trúc mã React của mình như thế nào.
Bài viết này khám phá một số phương pháp mà bạn nên làm theo để cải thiện hiệu suất của ứng dụng React của mình.
Mục Lục
1. Sử dụng các thành phần chức năng và móc thay vì các lớp
Trong React, bạn có thể sử dụng các thành phần lớp hoặc chức năng với hook. Tuy nhiên, bạn nên sử dụng các thành phần chức năng và hook thường xuyên hơn vì chúng tạo ra mã ngắn gọn và dễ đọc hơn so với các lớp.
Hãy xem xét thành phần lớp sau đây hiển thị dữ liệu từ API NASA.
class NasaData extends React.Component {
constructor(props) {
super(props);
this.state = {
data: [],
};
}
componentDidMount() {
fetch("https://api.nasa.gov/planetary/apod?api_key=DEMO_KEY")
.then((res) => res.json())
.then((json) => {
this.setState({
data: json,
});
});
}
render() {
const { data } = this.state;
if (!data.length)
return (
<div>
<h1> Fetching data.... </h1>{" "}
</div>
);
return (
<>
<h1> Fetch data using Class component </h1>{" "}
{data.map((item) => (
<div key={item.id}>{item.title}</div>
))}
</>
);
}
}
Thành phần tương tự có thể được viết bằng cách sử dụng hook.
const NasaData = () => {
const [data, setdata] = useState(null);
useEffect(() => {
fetch("https://api.nasa.gov/planetary/apod?api_key=DEMO_KEY")
.then((res) => res.json())
.then((json) => {
setdata(json);
});
}, [data]);
return (
<>
<h1> Fetch data using Class component </h1>{" "}
{data.map((item) => (
<div key={item.id}>{item.title}</div>
))}
</>
);
};Mặc dù khối mã trên hoạt động tương tự như thành phần lớp, nhưng nó ít phức tạp hơn, tối giản và dễ hiểu hơn, góp phần mang lại trải nghiệm tốt hơn cho nhà phát triển.
2. Tránh sử dụng trạng thái (Nếu có thể)
Trạng thái React theo dõi dữ liệu mà khi thay đổi sẽ kích hoạt thành phần React để hiển thị lại. Khi xây dựng ứng dụng React, hãy tránh sử dụng trạng thái càng nhiều càng tốt vì bạn càng sử dụng nhiều trạng thái, bạn càng phải theo dõi nhiều dữ liệu trên ứng dụng của mình.
Một cách để giảm thiểu việc sử dụng trạng thái là chỉ khai báo nó khi cần thiết. Ví dụ: nếu bạn đang tìm nạp dữ liệu người dùng từ một API, hãy lưu trữ toàn bộ đối tượng người dùng ở trạng thái thay vì lưu trữ các thuộc tính riêng lẻ.
Thay vì làm điều này:
const [username, setusername] = useState('')
const [password, setpassword] = useState('')Làm cái này:
const [user, setuser] = useState({})Khi quyết định cấu trúc dự án, hãy chọn cấu trúc lấy thành phần làm trung tâm. Điều này có nghĩa là có tất cả các tệp liên quan đến một thành phần trong một thư mục.
Nếu bạn đang tạo một Thanh điều hướng thành phần, tạo một thư mục có tên navbar chứa Thanh điều hướng chính thành phần, biểu định kiểu và các tệp nội dung và JavaSript khác được sử dụng trong thành phần.
Một thư mục duy nhất chứa tất cả các tệp của một thành phần giúp bạn dễ dàng sử dụng lại, chia sẻ và gỡ lỗi. Nếu bạn cần xem một thành phần hoạt động như thế nào, bạn chỉ cần mở một thư mục duy nhất.
4. Tránh sử dụng chỉ mục làm đạo cụ chính
React sử dụng các khóa để xác định duy nhất các mục trong một mảng. Với các khóa, React có thể xác định mục nào đã được thay đổi, thêm hoặc xóa khỏi mảng.
Hầu hết thời gian khi hiển thị mảng, bạn có thể sử dụng chỉ mục làm khóa.
const Items = () => {
const arr = ["item1", "item2", "item3", "item4", "item5"];
return (
<>
{arr.map((elem, index) => {
<li key={index}>{elem}</li>;
})}
</>
);
};Trong khi điều này đôi khi hiệu quả, việc sử dụng chỉ mục làm khóa có thể gây ra các vấn đề, đặc biệt nếu danh sách dự kiến sẽ thay đổi. Hãy xem xét danh sách này.
const arr = ["item1", "item2", "item3", "item4", "item5"];Hiện tại, mục danh sách đầu tiên, “Mục 1“Ở chỉ số 0, nhưng nếu bạn đã thêm một mục khác vào đầu danh sách, thì”Mục 1”Chỉ mục sẽ thay đổi thành 1, điều này sẽ thay đổi hành vi của mảng của bạn.
Giải pháp là sử dụng một giá trị duy nhất làm chỉ mục để đảm bảo duy trì danh tính của mục danh sách.
5. Lựa chọn phân mảnh thay vì chia đôi nếu có thể
Các thành phần React cần trả về mã được bao bọc trong một thẻ duy nhất, thường là
Sử dụng
Một ví dụ về việc loại bỏ
const Button = () => {
return <button>Display</button>;
};6. Tuân theo quy ước đặt tên
Bạn nên luôn sử dụng PascalCase khi đặt tên cho các thành phần để phân biệt chúng với các tệp JSX không phải là thành phần khác. Ví dụ: Trương Văn bản, NavMenuvà SuccessButton.
Sử dụng camelCase cho các hàm được khai báo bên trong các thành phần React như handleInput () hoặc showElement ().
7. Tránh mã lặp lại
Nếu bạn nhận thấy rằng bạn đang viết mã trùng lặp, hãy chuyển đổi nó thành các thành phần có thể được sử dụng lại.
Ví dụ: sẽ có ý nghĩa hơn khi tạo một thành phần cho menu điều hướng của bạn thay vì viết mã liên tục trong mọi thành phần yêu cầu menu.
Đó là lợi thế của kiến trúc dựa trên thành phần. Bạn có thể chia nhỏ dự án của mình thành các thành phần nhỏ mà bạn có thể sử dụng lại trong ứng dụng của mình.
8. Sử dụng cấu trúc đối tượng cho đạo cụ
Thay vì chuyển đối tượng đạo cụ, hãy sử dụng cấu trúc đối tượng để chuyển tên prop. Điều này loại bỏ nhu cầu tham chiếu đến đối tượng đạo cụ mỗi khi bạn cần sử dụng nó.
Ví dụ, sau đây là một thành phần sử dụng đạo cụ như hiện tại.
const Button = (props) => {
return <button>{props.text}</button>;
};
Với cấu trúc hủy đối tượng, bạn tham khảo trực tiếp văn bản.
const Button = ({text}) => {
return <button>{text}</button>;
};
9. Tự động hiển thị các mảng bằng cách sử dụng bản đồ
Sử dụng bản đồ() để hiển thị động các khối HTML lặp lại. Ví dụ, bạn có thể sử dụng bản đồ() để hiển thị danh sách các mục trong
const Items = () => {
const arr = ["item1", "item2", "item3", "item4", "item5"];
return (
<>
{arr.map((elem, index) => {
<li key={elem+index}>{elem}</li>;
})}
</>
);
};Đối với mục đích so sánh, đây là cách bạn có thể hiển thị danh sách mà không cần bản đồ(). Cách tiếp cận này rất lặp đi lặp lại.
const List = () => {
return (
<ul>
<li>Item1</li>
<li>Item2</li>
<li>Item3</li>
<li>Item4</li>
<li>Item5</li>
</ul>
);
};
10. Viết thử nghiệm cho từng thành phần phản ứng
Viết các bài kiểm tra cho các thành phần bạn tạo vì nó làm giảm khả năng xảy ra lỗi. Kiểm tra đảm bảo rằng các thành phần đang hoạt động như bạn mong đợi. Một trong những khung thử nghiệm phổ biến nhất cho React là Jest và nó cung cấp một môi trường để bạn có thể thực hiện các thử nghiệm của mình.
Mặc dù React có phần linh hoạt về cách bạn có thể sử dụng nó, nhưng việc làm theo các phương pháp cụ thể sẽ giúp bạn tận dụng tối đa trải nghiệm của mình.
Khi làm theo những lời khuyên này, hãy ghi nhớ dự án và mục tiêu cụ thể của bạn; một số sẽ phù hợp hơn trong một số trường hợp nhất định hơn những trường hợp khác.
Đọc tiếp
Thông tin về các Tác giả
