Viết React Code sạch hơn như thế nào? (Phần 2)

Tác giả: Reed Barger

Tiếp tục chuỗi bài chia sẻ về cách viết React code như thế nào để gọn gàng và dễ đọc nhất, các React developers có thể tham khảo thêm phần tiếp theo với bài viết này.

5. Xóa càng nhiều JavaScript khỏi JSX càng tốt

Một cách khác rất hữu ích nhưng thường bị các devs bỏ qua khi dọn dẹp các thành phần không cần thiết trong code của mình đó là xóa càng nhiều JavaScript khỏi JSX càng tốt.

Hãy xem qua ví dụ dưới đây:

// src/components/FeaturedPosts.js

import useFetchPosts from '../hooks/useFetchPosts.js';

export default function FeaturedPosts() {
  const posts = useFetchPosts()

  return (
    <ul>
      {posts.map((post) => (
        <li onClick={event => {
          console.log(event.target, 'clicked!');
        }} key={post.id}>{post.title}</li>
      ))}
    </ul>
  );
}

Với đoạn code trên chúng ta có thể dễ dàng thấy rằng JSX đã trở nên khó đọc hơn nhiều. Cho rằng hàm được bao gồm như một hàm nội tuyến, vì thế đã khiến mục đích của thành phần này cũng như các chức năng liên quan của nó bị che khuất.

Vậy chúng ta có thể làm gì để khắc phục các vấn đề này? Các devs có thể trích xuất hàm nội tuyến, được kết nối với hàm onClick thành một trình xử lý riêng biệt. Khi làm như vậy, JSX có thể đọc được code một lần nữa:

// src/components/FeaturedPosts.js

import useFetchPosts from '../hooks/useFetchPosts.js';

export default function FeaturedPosts() {
  const posts = useFetchPosts()
  
  function handlePostClick(event) {
    console.log(event.target, 'clicked!');   
  }

  return (
    <ul>
      {posts.map((post) => (
        <li onClick={handlePostClick} key={post.id}>{post.title}</li>
      ))}
    </ul>
  );
}

6. Định dạng kiểu nội tuyến để code đơn giản hơn

Mô hình chung cho các React dev là viết các kiểu nội tuyến – inline styles trong JSX của mình. Nhưng điều này có thể làm cho code trở nên khó đọc hơn và khó viết thêm JSX:

// src/App.js

export default function App() {
  return (
    <main style={{ textAlign: 'center' }}>
      <Navbar title="My Special App" />
    </main>
  );
}

function Navbar({ title }) {
  return (
    <div style={{ marginTop: '20px' }}>
      <h1 style={{ fontWeight: 'bold' }}>{title}</h1>
    </div>
  )
}

Ở đây sẽ áp dụng khái niệm tách biệt mối quan tâm này cho các kiểu JSX bằng cách chuyển các kiểu nội tuyến vào một CSS stylesheet, ở đó cho phép bạn nhập vào bất kỳ thành phần nào.

Một cách thay thế để viết lại các kiểu nội tuyến là sắp xếp chúng thành các đối tượng như bên dưới

// src/App.js

export default function App() {
  const styles = {
    main: { textAlign: "center" }
  };

  return (
    <main style={styles.main}>
      <Navbar title="My Special App" />
    </main>
  );
}

function Navbar({ title }) {
  const styles = {
    div: { marginTop: "20px" },
    h1: { fontWeight: "bold" }
  };

  return (
    <div style={styles.div}>
      <h1 style={styles.h1}>{title}</h1>
    </div>
  );
}

7. Giảm prop drilling với React context

Một pattern thiết yếu khác để sử dụng cho các dự án React là sử dụng React Context.

Chẳng hạn nếu bạn muốn chia sẻ dữ liệu người dùng trên nhiều thành phần, thay vì nhiều props lặp lại (một pattern được gọi là props drilling), có thể sử dụng context feature được tích hợp trong thư viện React.

Trong trường hợp này, nếu muốn sử dụng lại dữ liệu người dùng trên các Navbar và FeaturesPosts components, tất cả những gì cần làm là wrap toàn bộ ứng dụng trong một thành phần của provider.

Tiếp theo, có thể chuyển dữ liệu người dùng xuống value prop và sử dụng context đó trong các individual components với sự trợ giúp của useContexthook

// src/App.js

import React from "react";

const UserContext = React.createContext();

export default function App() {
  const user = { name: "Reed" };

  return (
    <UserContext.Provider value={user}>
      <main>
        <Navbar title="My Special App" />
        <FeaturedPosts />
      </main>
    </UserContext.Provider>
  );
}

// src/components/Navbar.js

function Navbar({ title }) {
  const user = React.useContext(UserContext);

  return (
    <div>
      <h1>{title}</h1>
      {user && <a href="/logout">Logout</a>}
    </div>
  );
}

// src/components/FeaturedPosts.js

function FeaturedPosts() {
  const posts = useFetchPosts();
  const user = React.useContext(UserContext);

  if (user) return null;

  return (
    <ul>
      {posts.map((post) => (
        <li key={post.id}>{post.title}</li>
      ))}
    </ul>
  );
}

Trên đây là tổng hợp những cách các React developers có thể áp dụng để cải thiện code của mình. Việc áp dụng chúng một cách hiệu quả sẽ giúp cho code dễ đọc hơn, gọn gàng hơn và tăng thêm hiệu quả cho các dự án làm việc liên quan đến React.

Bài viết phỏng dịch theo bài viết gốc tại freecodecamp.org

Có thể bạn quan tâm:

• Viết React Code sạch hơn như thế nào? (Phần 1)
• Mental model trong React
• Tự viết hiển thị Helloworld đầu tiên bằng ReactJS

Xem thêm Việc làm Developer hấp dẫn trên TopDev