10 tuyệt chiêu React một dòng lệnh mọi lập trình viên UI nên biết

React JS đã trở thành một thư viện phổ biến để xây dựng giao diện người dùng, và vì lý do chính đáng. Nó linh hoạt, hiệu quả và cho phép chúng ta tạo ra những thứ khá tuyệt vời. Nhưng đôi khi, chúng ta thấy mình đang viết nhiều code hơn mức cần thiết.

Hôm nay, chúng ta sẽ cùng nhau khám phá thế giới của những dòng lệnh React siêu ngắn gọn - những đoạn mã nhỏ gọn nhưng vô cùng hữu ích, có thể giúp cuộc sống của bạn dễ dàng hơn rất nhiều.

Cho dù bạn là người mới bắt đầu với React hay là một chuyên gia dày dạn kinh nghiệm, những dòng lệnh này chắc chắn sẽ là những công cụ đắc lực trong bộ công cụ của bạn.

1. Câu lệnh hiển thị có điều kiện ngắn gọn

Hãy bắt đầu với một kịch bản React cổ điển: hiển thị có điều kiện. Bạn biết đấy, khi bạn muốn hiển thị một cái gì đó chỉ khi một điều kiện nhất định được đáp ứng. Theo cách truyền thống, bạn có thể sử dụng câu lệnh if hoặc toán tử ba ngôi. Nhưng hãy xem điều này:

{condition && <Component />}

Câu lệnh đơn giản này sử dụng toán tử logic AND (&&) để hiển thị một component chỉ khi điều kiện là true. Nó đơn giản, rõ ràng và hoàn thành công việc mà không cần bất kỳ điều gì rườm rà.

Điều tuyệt vời của dòng lệnh này nằm ở cách JavaScript đánh giá các biểu thức logic. Nếu điều kiện trước && là false, toàn bộ biểu thức là false và React không hiển thị bất kỳ thứ gì. Nhưng nếu nó là true, React sẽ chuyển sang đánh giá những gì đứng sau &&, trong trường hợp này là component của chúng ta.

Kỹ thuật này hoàn hảo cho những lúc bạn có một tình huống có hoặc không đơn giản. Có thể bạn muốn hiển thị thông báo chào mừng chỉ dành cho người dùng đã đăng nhập hoặc hiển thị ưu đãi đặc biệt chỉ trong những giờ nhất định. Dù trường hợp nào, dòng lệnh này cũng sẽ giúp bạn.

2. Câu lệnh Prop mặc định ngắn gọn

Tiếp theo, hãy nói về prop mặc định. Tất cả chúng ta đều biết tầm quan trọng của việc xử lý các trường hợp mà prop có thể không được chuyển đến một component. Cách thông thường liên quan đến việc đặt defaultProps hoặc sử dụng các tham số mặc định trong chữ ký hàm. Nhưng đây là một dòng lệnh nhanh chóng thực hiện được mánh khóe đó:

const {prop = defaultValue} = props;

Dòng này sử dụng phép gán hủy cấu trúc với một giá trị mặc định. Nếu prop không được xác định trong props, nó sẽ quay trở lại defaultValue. Cách tiếp cận này siêu rõ ràng và xảy ra ngay trong phần thân hàm. Nó đặc biệt hữu ích khi bạn đang xử lý nhiều prop và không muốn làm lộn xộn chữ ký hàm của mình hoặc thêm một đối tượng defaultProps riêng biệt.

Hãy tưởng tượng bạn đang xây dựng một component Button có thể có các kích thước khác nhau. Bạn có thể sử dụng nó như thế này:

const Button = ({ size = 'medium', children }) => {
  return <button className={`btn-${size}`}>{children}</button>;
};

Bây giờ, nếu ai đó sử dụng Button của bạn mà không chỉ định kích thước, nó sẽ mặc định là 'medium'. Gọn gàng, phải không?

3. Câu lệnh cập nhật trạng thái đơn giản

Quản lý trạng thái là một phần lớn của phát triển React và đôi khi chúng ta cần cập nhật trạng thái dựa trên giá trị trước đó của nó. Dưới đây là một dòng lệnh giúp việc này trở nên dễ dàng:

setCount(prevCount => prevCount + 1);

Điều này sử dụng dạng hàm của trình đặt trạng thái, nhận trạng thái trước đó làm đối số. Cách tiếp cận này đảm bảo rằng bạn luôn làm việc với giá trị trạng thái cập nhật nhất, điều này rất quan trọng trong các trường hợp mà các bản cập nhật trạng thái có thể được nhóm hoặc trì hoãn.

Sử dụng câu lệnh này bất cứ khi nào bạn cần cập nhật trạng thái dựa trên giá trị trước đó của nó. Nó đặc biệt hữu ích trong các trường hợp như bộ đếm, chuyển đổi giá trị boolean hoặc bất kỳ tình huống nào mà trạng thái mới phụ thuộc vào trạng thái cũ.

4. Câu lệnh xử lý mạng ngắn gọn

Làm việc với mảng trong React là một nhiệm vụ phổ biến, đặc biệt là khi xử lý danh sách các mục. Dưới đây là một dòng lệnh giúp bạn thêm một mục vào một mảng trong trạng thái mà không làm thay đổi bản gốc:

setItems(prevItems => [...prevItems, newItem]);

Điều này sử dụng toán tử spread để tạo một mảng mới với tất cả các mục trước đó, cộng với mục mới ở cuối. Trong React, tính bất biến là chìa khóa cho hiệu suất và khả năng dự đoán. Dòng lệnh này đảm bảo bạn đang tạo một mảng mới thay vì sửa đổi mảng hiện có, chính xác là điều React muốn.

Giả sử bạn đang xây dựng một ứng dụng danh sách việc cần làm. Khi người dùng thêm một nhiệm vụ mới, bạn có thể sử dụng dòng lệnh này để cập nhật trạng thái của mình:

const addTask = (newTask) => {
  setTasks(prevTasks => [...prevTasks, newTask]);
};

5. Câu lệnh đơn giản để cập nhật đối tượng

Tương tự như mảng, cập nhật đối tượng trong trạng thái là một thao tác phổ biến trong React. Dưới đây là một dòng lệnh cho phép bạn cập nhật các thuộc tính cụ thể của một đối tượng mà không làm thay đổi bản gốc:

setUser(prevUser => ({ ...prevUser, name: 'New Name' }));

Điều này sử dụng toán tử spread để tạo một đối tượng mới với tất cả các thuộc tính của người dùng trước đó, nhưng ghi đè thuộc tính 'name' bằng một giá trị mới. Cách tiếp cận này duy trì tính bất biến trong khi cho phép bạn chỉ cập nhật các thuộc tính bạn cần. Nó giống như nói, "Giữ mọi thứ giống nhau, ngoại trừ những thay đổi cụ thể này."

Dòng lệnh này tỏ rõ sự hiệu quả khi bạn đang xử lý các biểu mẫu hoặc bất kỳ trường hợp nào mà bạn cần cập nhật một phần của đối tượng dựa trên đầu vào của người dùng hoặc các sự kiện khác.

6. Câu lệnh gọi tham chiếu trở lại

Tham chiếu trong React rất hữu ích để truy cập trực tiếp các phần tử DOM. Dưới đây là một dòng lệnh thiết lập một tham chiếu trở lại:

<input ref={node => node && node.focus()} />

Điều này tạo ra một phần tử đầu vào tự động lấy nét khi nó được hiển thị. Tham chiếu trở lại nhận nút DOM làm đối số. Dòng lệnh này kiểm tra xem nút có tồn tại hay không (để tránh lỗi nếu tham chiếu là null) và sau đó gọi phương thức focus trên nó.

Kỹ thuật này rất phù hợp để tạo các biểu mẫu có thể truy cập, trong đó bạn muốn tự động lấy nét vào trường nhập liệu đầu tiên khi biểu mẫu được tải.

7. Câu lệnh Style ngắn gọn hơn

Các Inline Style trong React đôi khi có thể hơi dài dòng. Dưới đây là một dòng lệnh giúp chúng ngắn gọn hơn:

<div style={{ color: 'red', fontSize: '14px' }} />

Điều này sử dụng một đối tượng literal để xác định nhiều kiểu dáng trong một dòng. Mặc dù chúng ta thường thích các lớp CSS để tạo kiểu, nhưng có những lúc kiểu dáng nội tuyến là cần thiết hoặc thuận tiện. Dòng lệnh này giữ cho JSX của bạn gọn gàng và dễ đọc.

Điều này đặc biệt hữu ích cho các kiểu dáng động thay đổi dựa trên prop hoặc trạng thái hoặc để tạo mẫu nhanh chóng khi bạn không muốn thiết lập một tệp CSS riêng biệt.

8. Câu lệnh tên lớp (Class name) đơn giản

Tên lớp có điều kiện là một mẫu phổ biến trong React. Dưới đây là một dòng lệnh giúp quá trình này diễn ra suôn sẻ:

<div className={`base-class ${condition ? 'active' : ''}`} />

Điều này sử dụng một template literal và toán tử ba ngôi để thêm có điều kiện một lớp. Chuỗi rỗng trong toán tử ba ngôi đảm bảo rằng không có khoảng trắng bổ sung nào được thêm vào khi điều kiện là false, giữ cho tên lớp của bạn gọn gàng.

Điều này hoàn hảo cho những thứ như trạng thái hoạt động trong menu điều hướng hoặc chuyển đổi trạng thái trực quan dựa trên tương tác của người dùng.

9. Câu lệnh ngắn gọn hơn cho ErrorBoundary

ErrorBoundary là một phần quan trọng của các ứng dụng React mạnh mẽ. Dưới đây là một dòng lệnh tạo ra một ErrorBoundary đơn giản:

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ù về mặt kỹ thuật, đây là nhiều câu lệnh trong một dòng, nhưng nó tạo ra một component ranh giới lỗi hoàn chỉnh theo cách rất ngắn gọn. Dòng lệnh này xác định một component lớp với trạng thái để theo dõi lỗi, một phương thức tĩnh để cập nhật trạng thái khi xảy ra lỗi và một phương thức hiển thị hiển thị thông báo lỗi hoặc hiển thị các phần tử con bình thường.

Quấn điều này xung quanh bất kỳ phần nào của ứng dụng mà bạn muốn bắt và xử lý lỗi một cách duyên dáng, ngăn toàn bộ ứng dụng bị lỗi.

10. Câu lệnh ghi nhớ (Memo) hữu ích

Cuối cùng nhưng không kém phần quan trọng, hãy xem một dòng lệnh để ghi nhớ các component chức năng:

const MemoizedComponent = React.memo(({ prop1, prop2 }) => <div>{prop1} {prop2}</div>);

Điều này tạo ra một phiên bản được ghi nhớ của một component chức năng chỉ hiển thị lại nếu prop của nó thay đổi. React.memo là một component bậc cao hơn bỏ qua việc hiển thị khi prop giống nhau, điều này có thể là một cải thiện hiệu suất lớn cho các component hiển thị thường xuyên với cùng một prop.

Điều này rất phù hợp cho các component chức năng thuần túy tốn kém để hiển thị hoặc ở sâu trong cây component và nhận được cùng một prop thường xuyên.

Hãy nhớ rằng, mặc dù những dòng lệnh đơn giản trong bài viết này rất tuyệt vời, nhưng chúng không phải lúc nào cũng là giải pháp tốt nhất cho mọi trường hợp. Điều quan trọng là phải hiểu cách chúng hoạt động và khi nào nên sử dụng chúng. Như với tất cả mọi thứ trong lập trình, khả năng đọc và khả năng bảo trì phải luôn là ưu tiên hàng đầu của bạn.

Vì vậy, lần tới khi bạn đang dấn thân vào một dự án React, hãy thử những dòng lệnh này. Chúng có thể giúp bạn tiết kiệm thời gian và làm cho code của bạn trở nên gọn gàng hơn một chút. Bạn thậm chí có thể gây ấn tượng với đồng nghiệp của mình bằng kỹ năng React mới tìm thấy của bạn đó.

Cảm ơn các bạn đã theo dõi.