5 mẹo JavaScript để cải thiện mã ReactJS của bạn ngay hôm nay

Cách sử dụng toán tử chuỗi tùy chọn trong JavaScript

Trong JavaScript, trước tiên chúng ta cần đảm bảo rằng một đối tượng tồn tại trước khi chúng ta có thể truy cập một thuộc tính từ nó.

Nếu đối tượng có giá trị là undefined hoặc null, nó sẽ dẫn đến lỗi kiểu.

Trong ví dụ của chúng ta ở đây, chúng ta có một ứng dụng React nơi người dùng có thể chỉnh sửa các bài đăng mà họ đã thực hiện.

Chỉ khi isPostAuthor đúng - nghĩa là người dùng được xác thực có cùng id với id của tác giả bài đăng - thì chúng ta mới hiển thị component EditButton.

export default function EditButton({ post }) {

  const user = useAuthUser();  

  const isPostAuthor = post.author.userId !== user && user.userId;

    

  return isPostAuthor ? <EditButton /> : null;

}

Vấn đề với mã này là usergiá trị của chúng ta có thể có giá trị là undefined. Đây là lý do tại sao chúng ta phải sử dụng &&toán tử để đảm bảo userlà một đối tượng trước khi chúng ta cố gắng lấy thuộc userIdtính.

Nếu chúng ta truy cập một đối tượng trong một đối tượng, chúng ta sẽ phải bao gồm một &&điều kiện khác . Điều này có thể khiến mã của chúng ta trở nên tẻ nhạt và khó hiểu.

May mắn thay, một tính năng JavaScript mới cho phép chúng ta kiểm tra và xem liệu một đối tượng có tồn tại hay không trước khi truy cập thuộc tính mà không sử dụng điều kiện kết thúc là toán tử chuỗi tùy chọn.

Để đảm bảo một đối tượng tồn tại trước khi cố gắng truy cập vào một thuộc tính của nó, chỉ cần đặt một dấu chấm hỏi ngay sau đó:

export default function EditButton({ post }) {

  const user = useAuthUser();  

  const isPostAuthor = post.author.userId !== user?.userId;

    

  return isPostAuthor ? <EditButton /> : null;

}

>>> Đọc thêm: ReactjS Hook và những điều mà lập trình viên cần biết

Điều này sẽ ngăn chặn bất kỳ lỗi kiểu nào và cho phép chúng ta viết logic có điều kiện rõ ràng hơn nhiều.

Cách sử dụng trả về ngầm định với dấu ngoặc đơn trong JavaScript

Trong các ứng dụng React, chúng ta có thể viết các thành phần bằng cú pháp khai báo hàm bằng function từ khóa hoặc chúng ta có thể sử dụng hàm mũi tên, hàm này phải được đặt thành một biến.

Điều quan trọng cần lưu ý là các thành phần sử dụng function từ khóa phải sử dụng return từ khóa trước khi trả về bất kỳ JSX nào.

export default function App() {

  return (

    <Layout>

      <Routes />

    </Layout>

  );

}

Chúng ta có thể trả về nhiều dòng mã JavaScript từ một hàm có trả về ngầm định (không sử dụng returntừ khóa), bằng cách gói mã được trả về trong một tập hợp các dấu ngoặc đơn.

Đối với các thành phần được tạo bằng các hàm mũi tên, chúng ta không cần phải bao gồm returntừ khóa - chúng ta chỉ có thể trả về JSX của chúng ta với một tập hợp các dấu ngoặc đơn.

const App = () => (

  <Layout>

    <Routes />

  </Layout>

);

export default App;

Ngoài ra, bất cứ khi nào bạn đang lặp lại danh sách các phần tử có .map()hàm React , bạn cũng có thể bỏ qua từ khóa return và trả về JSX của mình chỉ với một tập hợp các dấu ngoặc đơn trong phần nội dung của hàm.

function PostList() {

  const posts = usePostData();  

    

  return posts.map(post => (

    <PostListItem key={post.id} post={post} />  

  ))

}

Cách sử dụng toán tử Nullish Coalescing trong JavaScript

Trong JavaScript, nếu một giá trị nhất định là falsy (như null, undefined, 0, '', NaN), chúng ta có thể sử dụng hoặc ( ||) có điều kiện để cung cấp một giá trị dự phòng.

Ví dụ: nếu chúng ta có một thành phần trang sản phẩm và chúng ta muốn hiển thị giá của một sản phẩm nhất định, bạn có thể sử dụng ||điều kiện để hiển thị giá hoặc hiển thị văn bản "Sản phẩm không có sẵn".

export default function ProductPage({ product }) {    

  return (

     <>

       <ProductDetails />

       <span>{product.price || "Product is unavailable"} // if price is 0, we will see "Product is unavailable"

     </>

  );

}

Tuy nhiên, có một lỗi nhỏ với mã hiện có của chúng ta.

Nếu giá có giá trị 0là giả, thay vì hiển thị chính giá đó, chúng ta sẽ hiển thị dòng chữ "Sản phẩm không có sẵn" - không phải là những gì chúng ta muốn.

Chúng ta cần một toán tử chính xác hơn để chỉ trả về phía bên phải của biểu thức nếu phía bên trái là nullhoặc undefinedthay vì bất kỳ giá trị sai nào.

Điều này hiện có sẵn trong toán tử liên kết nullish . Nó sẽ trả về toán hạng bên phải khi toán hạng bên trái của nó là nullhoặc undefined. Nếu không, nó sẽ trả về toán hạng bên trái của nó:

null ?? 'fallback';

// "fallback"




0 ?? 42;

// 0

Cách sửa mã của chúng ta mà chúng ta có ở trên chỉ đơn giản là thay thế hoặc có điều kiện bằng toán tử liên kết nullish để hiển thị giá chính xác của 0.

export default function ProductPage({ product }) {    

  return (

     <>

       <ProductDetails />

       <span>{product.price ?? "Product is unavailable"}

     </>

  );

}

Cách sử dụng toán tử trải đối tượng để cập nhật trạng thái trong JavaScript

Khi nói đến việc sử dụng trạng thái trong React, chúng ta có một số tùy chọn: chúng ta có thể tạo nhiều biến trạng thái với useStatehook cho các giá trị nguyên thủy riêng lẻ hoặc quản lý nhiều giá trị trong một biến trạng thái bằng cách sử dụng một đối tượng.

Trong ví dụ dưới đây, chúng ta có một trang đăng ký, nơi chúng ta đang theo dõi tên người dùng, email và mật khẩu của người dùng hiện tại.

Khi họ gửi biểu mẫu đăng ký, chúng ta xác thực nội dung biểu mẫu mà họ đã nhập và xử lý việc đăng ký người dùng.

import React from 'react'




export default function SignUpPage() {

  const [state, setState] = React.useState({ username: '', email: '', password: '' });

    

  function handleSubmit(event) {   

    event.preventDefault();

    validateForm(state);

    signUpUser(state)

  }




  function handleChange(event) {

    const {name, value} = event.target;

    setState({ ...state, [name]: value });

  }

    

  return (

    <form onSubmit={handleSubmit}>

      <input name="username" onChange={handleChange} />

      <input name="email" onChange={handleChange} />

      <input name="password" onChange={handleChange} />

      <button type="submit">Submit</button>

    </form>

  );

}

Ngoài ra, lưu ý rằng khi sử dụng useStatehook, bạn phải trải rộng ở tất cả các trạng thái trước đó để cập nhật một cặp giá trị khóa riêng lẻ.

Bất cứ khi nào người dùng nhập vào một đầu vào và sự kiện thay đổi diễn ra, handleChangehàm sẽ được gọi.

Sau đó, chúng ta không chỉ cập nhật giá trị của một đầu vào nhất định theo namethuộc tính của nó , mà chúng ta còn phổ biến trong tất cả các giá trị trạng thái hiện tại của tên người dùng, email và mật khẩu. chúng ta rải tất cả các giá trị này dưới dạng các thuộc tính riêng lẻ trong đối tượng mới mà chúng ta đang thiết lập ở trạng thái với ...- toán tử trải phổ đối tượng.

Cách sử dụng Ternaries để áp dụng có điều kiện các lớp /props trong JavaScript

Ternaries là một toán tử cần thiết để sử dụng khi viết các điều kiện trong các thành phần React.

chúng ta thường sử dụng các cụm từ trong JSX của chúng ta vì chúng là các biểu thức và phân giải thành một hoặc một giá trị khác có thể được hiển thị. Điều này cho phép chúng thường được sử dụng để hiển thị hoặc ẩn các thành phần và phần tử.

Tuy nhiên, điều đáng chú ý là chúng ta có thể sử dụng các dấu ngoặc kép khi nói đến bất kỳ giá trị nào trong JSX của chúng ta.

Điều đó có nghĩa là, thay vì sử dụng các thư viện của bên thứ ba classnamesđể thêm hoặc xóa các lớp vào các phần tử React của chúng ta một cách có điều kiện, chúng ta có thể làm như vậy với một hệ ba nội tuyến và một mẫu JavaScript theo nghĩa đen.

Bạn có thể thấy trong ví dụ ở đây rằng nếu người dùng của chúng ta đã chọn chế độ tối, chúng ta đang áp dụng một lớp body-dark. Nếu không, chúng ta áp dụng lớp body-lightđể cung cấp cho ứng dụng của chúng ta các kiểu thích hợp cho mọi thứ bên trong Routesthành phần của chúng ta .

export default function App() {

  const { isDarkMode } = useDarkMode();

    

  return (

    <main className={`body ${isDarkMode ? "body-dark" : "body-light"}`}>

      <Routes />

    </main>

  );

}

Cần lưu ý rằng logic có điều kiện này cũng có thể được áp dụng cho bất kỳ phần mềm hỗ trợ nào, không chỉ tên lớp hoặc kiểu nội tuyến.

chúng ta có một ví dụ khác ở đây, trong đó ứng dụng của chúng ta đang phát hiện xem người dùng có đang sử dụng thiết bị di động hay không bằng một móc nối đặc biệt. Nếu vậy, chúng ta chuyển một giá trị chiều cao cụ thể thông qua giá đỡ heightcho Layoutthành phần của chúng ta .

export default function App() {

  const { isMobile } = useDeviceDetect();

    

  return (

    <Layout height={isMobile ? '100vh' : '80vh'}>

      <Routes />

    </Layout>

  );

}

Trên đây là một số thông tin về Hook trong ReactJs bạn có thể tham khảo thêm để ứng dụng vào các dự án sắp tới của mình! Bạn cũng có thể tìm hiểu thêm thông tin về ReactJs qua khóa học lập trình ReactJs và các khóa học lập trình khác của Viện công nghệ thông tin T3H.