7 cách triển khai kết xuất có điều kiện trong ứng dụng React
Với React, ta có thể xây dựng các Ứng dụng Trang đơn năng động và có tính tương tác cao. Một cách ta sử dụng đầy đủ tính tương tác đó là thông qua kết xuất có điều kiện.Kết xuất có điều kiện như một thuật ngữ mô tả khả năng hiển thị đánh dấu giao diện user khác nhau dựa trên các điều kiện nhất định. Trong React-speak, nó là một cách để hiển thị các phần tử hoặc thành phần khác nhau dựa trên một điều kiện. Khái niệm này thường được áp dụng trong các tình huống sau:
- Hiển thị dữ liệu bên ngoài từ một API
- Hiển thị / ẩn các phần tử
- Chuyển đổi chức năng ứng dụng
- Triển khai các cấp độ quyền
- Xác thực và Ủy quyền
Trong bài viết này, ta sẽ xem xét bảy (7) cách để thực hiện hiển thị có điều kiện như vậy trong các ứng dụng React.
Các thách thức
Như một thách thức, dựa trên giá trị của isLoggedIn trong trạng thái thành phần của ta , ta muốn có thể hiển thị nút Login nếu user chưa đăng nhập và nút Logout nếu user đó.
Đây là thành phần khởi động của ta trông như thế nào:
Trực quan:
Mã:
import React, { Component } from "react"; import ReactDOM from "react-dom"; import "./styles.css"; class App extends Component { constructor(props) { super(props); this.state = { isLoggedIn: true }; } render() { return ( <div className="App"> <h1> This is a Demo showing several ways to implement Conditional Rendering in React. </h1> <button>Login</button> <button>Logout</button> </div> ); } } const rootElement = document.getElementById("root"); ReactDOM.render(<App />, rootElement); Lưu ý … trong các đoạn mã ngụ ý rằng một số mã không được kết nối trực tiếp với điểm được giải thích sẽ ở đó.
1. Sử dụng câu lệnh If… else
Câu lệnh if…else cho phép ta chỉ định rằng một hành động cụ thể được thực hiện nếu một điều kiện đánh giá là true cũng như thực hiện điều gì đó khác nếu nó không. Sử dụng dự án mẫu, ta sẽ xem xét hai cách if…else điều kiện if…else được dùng để thực hiện kết xuất có điều kiện trong React.
Extract kết xuất có điều kiện thành một hàm
Trong JSX, ta có thể kết hợp mã JavaScript với đánh dấu của bạn đảm bảo khả năng tương tác tuyệt vời trong ứng dụng của ta . Để làm điều này, ta sử dụng một tập hợp các dấu ngoặc nhọn {} và viết JavaScript của ta bên trong. Tuy nhiên, báo trước là có một giới hạn đối với những gì có thể được thực hiện trong niềng răng như vậy. Kết quả là đoạn mã dưới đây sẽ không đạt được kết quả mong muốn.
// index.js ... render() { let {isLoggedIn} = this.state; return ( <div className="App"> <h1> This is a Demo showing several ways to implement Conditional Rendering in React. </h1> { if(isLoggedIn){ return <button>Logout</button> } else{ return <button>Login</button> } } </div> ); } ... Để hiểu thêm về hành vi này, hãy truy cập liên kết này.
Để giải quyết vấn đề này, ta extract logic điều kiện thành một hàm như hình dưới đây:
// index.js ... render() { let {isLoggedIn} = this.state; const renderAuthButton = ()=>{ if(isLoggedIn){ return <button>Logout</button> } else{ return <button>Login</button> } } return ( <div className="App"> <h1> This is a Demo showing several ways to implement Conditional Rendering in React. </h1> {renderAuthButton()} </div> ); } ... Lưu ý ta extract logic từ JSX thành một hàm renderAuthButton . Do đó, ta chỉ cần thực thi hàm trong dấu ngoặc nhọn JSX.
Nhiều câu lệnh trả lại
Khi sử dụng phương pháp này, thành phần phải được giữ càng đơn giản càng tốt để tránh việc hiển thị lại lãng phí các thành phần cha hoặc mẹ. Do đó, ta tạo ra một thành phần chức năng mới có tên là AuthButton .
// AuthButton.js import React from "react"; const AuthButton = props => { let { isLoggedIn } = props; if (isLoggedIn) { return <button>Logout</button>; } else { return <button>Login</button>; } }; export default AuthButton; AuthButton trả về các phần tử / thành phần khác nhau tùy thuộc vào giá trị của trạng thái được truyền qua đạo cụ isLoggedIn . Do đó, ta nhập nó vào index.js của ta và chuyển xuống trạng thái thích hợp như được hiển thị bên dưới:
// index.js ... import AuthButton from "./AuthButton"; ... render() { let { isLoggedIn } = this.state; return ( <div className="App"> ... <AuthButton isLoggedIn={isLoggedIn} /> </div> ); } ... Bạn phải tránh làm điều này:
// index.js ... render() { let { isLoggedIn } = this.state; if (isLoggedIn) { return ( <div className="App"> <h1> This is a Demo showing several ways to implement Conditional Rendering in React. </h1> <button>Logout</button>; </div> ); } else { return ( <div className="App"> <h1> This is a Demo showing several ways to implement Conditional Rendering in React. </h1> <button>Login</button> </div> ); } } } ... Đoạn mã trên sẽ đạt được kết quả tương tự nhưng làm phình thành phần một cách không cần thiết trong khi đưa ra các vấn đề về hiệu suất do liên tục hiển thị lại một thành phần không thay đổi.
2. Sử dụng các biến phần tử
Các biến phần tử là phần mở rộng của **Extracting the conditional rendering into a function** như hình trên. Các biến phần tử chỉ đơn giản là các biến chứa các phần tử JSX. Do đó, ta có thể gán các phần tử / thành phần có điều kiện cho các biến này bên ngoài JSX của ta và chỉ hiển thị biến bên trong JSX. Xem demo bên dưới:
// index.js ... render() { let { isLoggedIn } = this.state; let AuthButton; if (isLoggedIn) { AuthButton = <button>Logout</button>; } else { AuthButton = <button>Login</button>; } return ( <div className="App"> <h1> This is a Demo showing several ways to implement Conditional Rendering in React. </h1> {AuthButton} </div> ); } ... Lưu ý cách ta gán các giá trị (thành phần) có điều kiện cho AuthButton và sau đó ta chỉ phải hiển thị nó một cách gọn gàng trong JSX của ta .
3. Sử dụng câu lệnh Switch
Như đã trình bày trước đây, ta có thể trả về có điều kiện đánh dấu khác từ một thành phần dựa trên các điều kiện đã đặt bằng cách sử dụng câu lệnh if…else . Điều tương tự cũng có thể đạt được với câu lệnh switch trong đó ta có thể chỉ định đánh dấu cho các điều kiện khác nhau. Xem ví dụ bên dưới:
// AuthButton.js import React from "react"; const AuthButton = props => { let { isLoggedIn } = props; switch (isLoggedIn) { case true: return <button>Logout</button>; break; case false: return <button>Login</button>; break; default: return null; } }; export default AuthButton; Lưu ý cách ta trả về các node khác nhau dựa trên giá trị của isLoggedIn . Sẽ hợp lý hơn nếu áp dụng phương pháp này khi có nhiều hơn hai giá trị hoặc kết quả có thể có. Bạn cũng có thể loại bỏ câu lệnh break vì câu lệnh return sẽ tự động kết thúc quá trình thực thi.
Lưu ý: Trả về **null** từ một thành phần sẽ khiến nó tự ẩn / không hiển thị gì. Đây là một cách tốt để chuyển đổi khả năng hiển thị của các thành phần.
4. Nhà khai thác bậc ba
Toán tử có điều kiện (bậc ba) là toán tử JavaScript duy nhất có ba toán hạng. Toán tử này thường được sử dụng làm phím tắt cho câu lệnh if.
Nếu bạn đã quen với các toán tử bậc ba, thì bạn biết rằng đó đơn giản là một cách ngắn gọn hơn để viết câu lệnh if. Do đó ta có:
// index.js ... render() { let { isLoggedIn } = this.state; return ( <div className="App"> <h1> This is a Demo showing several ways to implement Conditional Rendering in React. </h1> {isLoggedIn ? <button>Logout</button> : <button>Login</button>} </div> ); } ... Trong trường hợp, cách tiếp cận này làm cho thành phần bị cồng kềnh, cồng kềnh hoặc khó đọc hơn, bạn có thể đóng gói điều kiện trong một thành phần chức năng như được hiển thị bên dưới:
// AuthButton.js import React from "react"; const AuthButton = props => { let { isLoggedIn } = props; return isLoggedIn ? <button>Logout</button> : <button>Login</button>; }; export default AuthButton; 5. Lôgic && (Đánh giá ngắn mạch với &&)
Đánh giá ngắn mạch là một kỹ thuật được sử dụng đảm bảo rằng không có tác dụng phụ nào trong quá trình đánh giá các mức khắc nghiệt trong một biểu thức. Hợp lý && giúp ta chỉ rõ rằng một hành động chỉ nên được thực hiện với một điều kiện, nếu không, hành động đó sẽ bị bỏ qua hoàn toàn. Điều này rất hữu ích cho những trường hợp mà bạn chỉ cần thực hiện một hành động khi một điều kiện nhất định là đúng, nếu không thì không làm gì cả.
Ví dụ: nếu ta chỉ cần hiển thị nút Logout nếu người đó đã đăng nhập, nếu không ta không làm gì cả. Ta sẽ có thông tin như thế này:
// index.js ... render() { let { isLoggedIn } = this.state; return ( <div className="App"> <h1> This is a Demo showing several ways to implement Conditional Rendering in React. </h1> {isLoggedIn && <button>Logout</button>} </div> ); } ... Điều này sẽ hiển thị nút đăng xuất nếu isLoggedIn là true nếu không nó sẽ không hiển thị gì. Ta có thể điều chỉnh điều này để phù hợp với trường hợp sử dụng của ta như được hiển thị bên dưới. Tuy nhiên, điều đó là không nên.
// index.js ... return ( <div className="App"> <h1> This is a Demo showing several ways to implement Conditional Rendering in React. </h1> {isLoggedIn && <button>Logout</button>} {!isLoggedIn && <button>Login</button>} </div> ); } ... Điều này sẽ hiển thị nút bên phải dựa trên giá trị của isLoggedIn . Tuy nhiên, điều này không được khuyến khích vì có nhiều cách tốt hơn, sạch hơn để đạt được hiệu quả tương tự. Ngoài ra, điều này có thể dễ dàng làm cho mã của bạn trông lộn xộn và không trực quan khi thành phần lớn hơn một chút.
6. Sử dụng biểu thức hàm được gọi ngay lập tức (IIFEs)
Trước đó, ta đã đề cập rằng các giới hạn của JSX khiến nó không thể thực thi mọi loại mã JavaScript. Điều này không hoàn toàn đúng vì có nhiều cách để vượt qua hành vi đó. Một trong những cách như vậy là sử dụng IIFEs.
IIFE ( Tôi ngay lập tức tôi nvoked F unction E xpression) là một hàm JavaScript chạy ngay sau khi nó được định nghĩa. Nó được sử dụng ở định dạng bên dưới.
(function () { statements })(); Bạn có thể tìm hiểu thêm về IIFE từ MDN tại đây .
Với kỹ thuật này, ta có thể viết logic có điều kiện trực tiếp bên trong JSX nhưng được bao bọc trong một hàm ẩn danh được gọi ngay lập tức khi đánh giá phần đó của mã của ta . Xem ví dụ bên dưới:
//index.js ... render() { let { isLoggedIn } = this.state; return ( <div className="App"> <h1> This is a Demo showing several ways to implement Conditional Rendering in React. </h1> {(function() { if (isLoggedIn) { return <button>Logout</button>; } else { return <button>Login</button>; } })()} </div> ); } ... Điều này cũng có thể được viết theo cách ngắn gọn hơn một chút bằng cách sử dụng một hàm mũi tên như hình dưới đây:
// index.js ... return ( <div className="App"> <h1> This is a Demo showing several ways to implement Conditional Rendering in React. </h1> {(()=> { if (isLoggedIn) { return <button>Logout</button>; } else { return <button>Login</button>; } })()} </div> ); } ... 7. Sử dụng JSX nâng cao
Một số thư viện nhất định tiết lộ chức năng mở rộng JSX, do đó có thể triển khai hiển thị có điều kiện trực tiếp với JSX. Một trong những thư viện như vậy là Câu lệnh điều khiển JSX. Nó là một plugin Babel chuyển đổi các câu lệnh điều khiển giống thành phần thành các đối tác JavaScript của chúng trong quá trình chuyển đổi. Xem ví dụ bên dưới để biết cách thực hiện điều này.
// index.js ... return ( <div className="App"> <h1> This is a Demo showing several ways to implement Conditional Rendering in React. </h1> <Choose> <When condition={isLoggedIn}> <button>Logout</button>; </When> <When condition={!isLoggedIn}> <button>Login</button>; </When> </Choose> </div> ); } ... Tuy nhiên, cách tiếp cận này không được khuyến khích vì mã bạn viết cuối cùng được chuyển sang một điều kiện JavaScript thông thường. Có lẽ luôn tốt hơn nếu chỉ viết JavaScript hơn là thêm một phụ thuộc bổ sung vào một thứ quá tầm thường.
Mối quan tâm về hiệu suất
Theo nguyên tắc chung, tốt nhất là đảm bảo khi áp dụng kết xuất có điều kiện, bạn:
- Không được tự ý thay đổi vị trí của các thành phần để tránh các thành phần tháo lắp và lắp lại một cách không cần thiết.
- Chỉ thay đổi đánh dấu liên quan đến kết xuất có điều kiện và loại bỏ mọi bit không thay đổi khác của thành phần.
- Không làm cồng kềnh thành phần của bạn một cách không cần thiết trong phương thức
render, do đó làm cho các thành phần bị trì hoãn trong việc kết xuất.
Để biết thêm về cách viết các điều kiện hiệu suất cao trong React, hãy xem bài viết này của Cole Williams.
Kết luận
Ta đã kiểm tra thành công 7 cách để triển khai kết xuất có điều kiện trong React. Mỗi phương pháp đều có ưu điểm riêng và việc lựa chọn sử dụng phương pháp nào hầu hết phụ thuộc vào trường hợp sử dụng. Những điều cần xem xét bao gồm:
- Kích thước đánh dấu được hiển thị có điều kiện
- Số lượng kết quả có thể xảy ra
- Cái nào sẽ trực quan và dễ đọc hơn
Nói chung, hãy ghi nhớ các khuyến nghị sau:
- Khi chỉ có một kết quả mong đợi, Toán tử logic && rất hữu ích.
- Đối với các tình huống boolean hoặc các trường hợp sử dụng chỉ có 2 kết quả có thể xảy ra, bạn có thể sử dụng If… else, Biến phần tử, Toán tử bậc ba và IIFE.
- Đối với các trường hợp có nhiều hơn 2 kết quả, bạn có thể sử dụng câu lệnh Switch, một hàm được extract hoặc thành phần chức năng được extract .
Tuy nhiên, đây chỉ đơn thuần là một đề xuất và sự lựa chọn đi kèm chủ yếu là của bạn.
Đọc thêm
Bạn có thể tìm hiểu thêm thông qua các tài nguyên sau:
- Thành phần thứ tự cao hơn
- Kết xuất có điều kiện với HOC
- Kết xuất có điều kiện - Phản ứng DOCs
- Nếu..else trong JSX
Các tin liên quan
