Khám Phá 10 Mẹo React Ngắn Gọn Mọi Lập Trình Viên UI Nên Làm Chủ
React JS đã trở thành một trong những thư viện phổ biến nhất để xây dựng giao diện người dùng, nhờ vào tính linh hoạt và hiệu suất cao của nó. Tuy nhiên, trong quá trình phát triển, nhiều lập trình viên thường viết quá nhiều mã mà vẫn có thể tối ưu hóa. Hôm nay, chúng ta sẽ cùng tìm hiểu 10 mẹo React một dòng lệnh, những đoạn mã ngắn gọn nhưng mang lại hiệu quả lớn trong quá trình phát triển của bạn.
Dù bạn là người mới bắt đầu hay đã có kinh nghiệm dày dạn với React, những mẹo này sẽ là những công cụ hữu ích giúp bạn tiết kiệm thời gian và làm cho mã của bạn gọn gàng hơn.
1. Hiển Thị Có Điều Kiện Ngắn Gọn
Nếu bạn muốn hiển thị một thành phần trong React chỉ khi một điều kiện nhất định được thỏa mãn, bạn có thể sử dụng toán tử logic AND (&&):
{condition && <Component />}Câu lệnh này vô cùng đơn giản và dễ hiểu. Nếu điều kiện là true, component sẽ được hiển thị; còn nếu là false, nó sẽ không hiển thị gì cả. Đây là một cách tuyệt vời để quản lý hiển thị dựa trên điều kiện.
2. Câu Lệnh Prop Mặc Định Ngắn Gọn
Khi làm việc với props trong React, có thể bạn sẽ cần thiết lập giá trị mặc định cho các props không được truyền vào. Câu lệnh sau đây sử dụng phép gán hủy cấu trúc với giá trị mặc định:
const {prop = defaultValue} = props;Với cách này, nếu prop không được xác định, nó sẽ mặc định bằng defaultValue, giúp mã của bạn dễ hiểu và gọn gàng hơn.
3. Cập Nhật Trạng Thái Đơn Giản
Khi cần cập nhật trạng thái dựa trên giá trị hiện tại, bạn có thể sử dụng:
setCount(prevCount => prevCount + 1);Câu lệnh này đảm bảo bạn luôn sử dụng giá trị trạng thái mới nhất, rất quan trọng trong các tình huống có thể gộp hoặc trì hoãn các bản cập nhật trạng thái.
4. Câu Lệnh Xử Lý Mảng Ngắn Gọn
Khi quản lý danh sách mục trong React, bạn có thể thêm một mục vào một mảng trong trạng thái bằng cách sử dụng:
setItems(prevItems => [...prevItems, newItem]);Điều này giúp duy trì tính bất biến trong React và đảm bảo hiệu suất tốt hơn.
5. Cập Nhật Đối Tượng Một Cách Ngắn Gọn
Để cập nhật một thuộc tính cụ thể của một đối tượng trong trạng thái mà không làm thay đổi bản gốc, bạn có thể sử dụng:
setUser(prevUser => ({ ...prevUser, name: 'New Name' }));Câu lệnh này rất hữu dụng khi bạn chỉ cần thay đổi một vài thuộc tính của một đối tượng.
6. Thiết Lập Tham Chiếu Trở Lại
Tham chiếu trong React cho phép bạn truy cập trực tiếp các phần tử DOM. Để tự động lấy nét một trường nhập liệu, bạn có thể sử dụng:
<input ref={node => node && node.focus()} />Điều này sẽ tự động lấy nét vào trường nhập liệu khi nó được hiển thị, rất hữu ích cho trải nghiệm người dùng.
7. Câu Lệnh Style Ngắn Gọn
Khi sử dụng các inline styles, bạn có thể viết chúng một cách gọn gàng hơn:
<div style={{ color: 'red', fontSize: '14px' }} />Điều này giúp cho mã JSX của bạn dễ đọc và giữ cho cấu trúc của nó rõ ràng hơn.
8. Tên Lớp Có Điều Kiện Đơn Giản
Sử dụng template literals để thêm lớp có điều kiện:
<div className={`base-class ${condition ? 'active' : ''}`} />Với cách này, bạn có thể dễ dàng quản lý tên lớp có điều kiện trong các thành phần React của mình.
9. Tạo ErrorBoundary Đơn Giản
Để tạo một ErrorBoundary đơn giản trong React, bạn có thể sử dụng:
class ErrorBoundary extends React.Component { state = { hasError: false }; static getDerivedStateFromError = () => ({ hasError: true }); render = () => this.state.hasError ? <h1>Something went wrong.</h1> : this.props.children; }Mặc dù điều này được viết trong một dòng, nó tạo ra một component hoàn chỉnh giúp bạn quản lý lỗi hiệu quả.
10. Ghi Nhớ Các Component Chức Năng
Cuối cùng, để tối ưu hóa hiệu suất, hãy sử dụng:
const MemoizedComponent = React.memo(({ prop1, prop2 }) => <div>{prop1} {prop2}</div>);Điều này giúp bạn ghi nhớ các component chỉ khi các props của nó thay đổi, giảm thiểu việc render lại không cần thiết.
Hy vọng rằng những mẹo ngắn gọn này sẽ giúp bạn làm việc với React một cách hiệu quả hơn. Luôn nhớ rằng, việc viết mã gọn gàng không chỉ giúp tiết kiệm thời gian mà còn giúp bạn dễ dàng bảo trì và phát triển dự án của mình hơn trong tương lai.
source: viblo
