Những bài học chính từ kinh nghiệm của tôi với tư cách là một nhà phát triển React


Ảnh của Sanah Suvarna trên Unsplash

Hôm nay, tôi đã suy ngẫm về những thách thức và những điều mới tôi học được trong vài năm qua, đặc biệt liên quan đến lập trình hoặc khoa học máy tính nói chung. Công bằng mà nói, tôi đã khám phá ra nhiều điều mới, từ IoT, tầm nhìn máy tính, học sâu, phát triển blockchain và hơn thế nữa về mặt lập trình.

Tôi đang nghĩ đến việc tạo một loạt bài viết về hành trình của tôi trong tất cả những công nghệ này, và tôi muốn bắt đầu với hành trình và kinh nghiệm làm việc với React. Tại sao lại là React đầu tiên? Không có lý do cụ thể nào, nhưng đó là công nghệ tôi đang làm việc nhiều nhất gần đây và tôi nghĩ rằng tôi có một thông điệp tốt để truyền tải đến các bạn.

Bài đăng này sẽ không tập trung vào viết mã mà tập trung vào những khoảnh khắc và bài học mà tôi đã học được sau khi làm việc với React trong nhiều dự án, từ các ứng dụng cá nhân nhỏ đến một số doanh nghiệp lớn và các ứng dụng hướng tới khách hàng khác.

Không ngừng học hỏi

Tôi biết phần này không giống như một bài học cụ thể về React, nhưng nó rất cần thiết. vậy hãy đọc hết nhé!

Giống như hầu hết mọi thứ trong khoa học máy tính, Chỉ hằng số là sự thay dổi duy nhất. Là nhà phát triển, nhiệm vụ của chúng tôi là luôn cập nhật các phương pháp hay nhất cho ngôn ngữ lập trình, khuôn khổ, mẫu, thiết kế, v.v.

Khi tôi bắt đầu với React, mỗi thành phần là một lớp và chúng tôi không có bất kỳ tính năng “ưa thích” nào như hook, mà tôi không thể nghĩ đến một dự án nào bây giờ mà tôi không sử dụng chúng.

Tốc độ giới thiệu các thay đổi buộc chúng ta phải liên tục đọc tài liệu và các bài đăng trên blog để hiểu những gì mới, tại sao chúng ta nên sử dụng nó và làm như thế nào. Nhưng đừng nghĩ đó là một gánh nặng. Tất cả những thay đổi này được giới thiệu có chủ đích trong các khuôn khổ và ngôn ngữ lập trình để làm cho cuộc sống của chúng ta dễ dàng hơn hoặc mang lại trải nghiệm tốt hơn cho người dùng; trong mọi trường hợp, đó là một tình huống có lợi.

Minimalism là người bạn tốt nhất của bạn

React là tất cả các component, và mỗi component này sẽ chịu trách nhiệm cho hành vi của ứng dụng. Nhưng đôi khi, câu hỏi khó là khi nào nên phát triển một thành phần hiện có so với khi nào để tạo một component mới.

Sau khi xây dựng nhiều ứng dụng và cấu trúc lại các ứng dụng đó một vài lần, tôi có thể nói rằng điều tốt nhất là tạo ra các component tối thiểu nhất có thể. Các component càng nhỏ thì độ phức tạp của mỗi component càng nhỏ. Và vâng, tôi hiểu điều đó thêm sự phức tạp khi interlinked, nhưng tin tôi đi, lợi ích vượt sẽ xa hơn bạn nghĩ.

Tôi đã xem xét các component có rất nhiều trạng thái, tất cả là do có rất nhiều điều đã xảy ra trên các component đó. Nó rất khó đọc vì mọi thứ đã bị trộn lẫn sau khi tái cấu trúc. Chúng tôi đã kết thúc với nhiều component, mỗi component chỉ có một vài dòng mã. Nó giống như một phép thuật, dễ đọc hơn rất nhiều, để gỡ lỗi.

Một lời khuyên khác về cùng chủ đề này là giữ các tác dụng phụ và logic kinh doanh của bạn càng tách biệt với giao diện người dùng càng tốt. Tôi biết đôi khi giải quyết nó trong thành phần rất hấp dẫn, nhưng nếu bạn muốn tiết kiệm thời gian cho mình trong tương lai, hãy chia nhỏ chúng ra.

Bạn có thích các thành phần trông đơn giản như thế này không? Logic tách khỏi các yếu tố trực quan và các yếu tố trực quan được nhóm lại để giúp chúng dễ dàng sử dụng lại và bảo trì.

function UserApprovalForm ({changeApproveStatus, status}) {
 return (
   <>
     <ChangeButton
         onClick = {changeApproveStatus}
         text = "Approved?"
     />,
     <UserInformation status = {status} />
   </>
 );
}

Giữ các thành phần đơn giản!

Đừng ngại tái cấu trúc

Tôi đã đọc nhiều lần trên internet (có thể là Reddit) rằng bạn cần phải cấu trúc lại vì mã ban đầu rất tệ, và tôi không thể không đồng ý. Tôi tin rằng việc tái cấu trúc không chỉ cần thiết mà còn là một việc bình thường. Tôi thấy đó là ứng dụng của bạn đang phát triển để trở thành bằng chứng trong tương lai.

Đôi khi, chúng tôi cấu trúc lại để làm cho một hàm, thành phần hoặc đoạn mã cụ thể dễ đọc hơn và dễ hiểu hơn. Cứ làm đi! Về lâu dài, bạn sẽ tiết kiệm được rất nhiều thời gian cho bản thân và cả nhóm của mình.

Thật khó nói tại sao bạn lại gặp phải tình huống cần tái cấu trúc lại, nhưng đây là một số ý tưởng:

  • Các bản cập nhật thư viện đã giới thiệu các mẫu, khái niệm, ý tưởng hoặc cách giải quyết vấn đề mới.
  • Mã đã phát triển trong một thời gian với từng bước nhỏ, và theo thời gian, độ phức tạp ngày càng tăng và hiện rất khó để duy trì.
  • Ngừng sử dụng các tính năng

Dưới đây là một ví dụ về cách cấu trúc lại có thể cải thiện khả năng đọc bằng cách cập nhật mã nhờ chức năng mới trong React:

Class example:

class BookList extends React.Component {
 componentDidMount() {
   this.props.fetchBooks(this.props.bookGenre);
 }
 componentDidUpdate(prevProps) {
   if (prevProps.bookGenre !== this.props.booksGenre) {
     this.props.fetchBooks(this.props.bookGenre);
   }
 }
// ... }

Hooks example:

const BookList = ({ bookGenre, fetchBooks }) => {
 useEffect(() => {
   fetchBooks(bookGenre);
 }, [bookGenre]);
// ... }

Hãy xem việc tái cấu trúc như một phương tiện để làm sạch code hơn, đừng quá sợ hãi về việc kìm hãm mọi thứ; Hãy nhớ rằng bạn có các bài test! ;)

React có nhiều hơn những gì bạn biết.

React tốt hơn thư viện của bạn các thư viên khác dùng tốt hơn với React mà bạn muốn học, Có nhiều mẫu và phương pháp tốt hơn, v.v.

Một trong những điều tuyệt vời của React là tính đơn giản của nó, nhưng có những tính năng nâng cao mà có lẽ bạn không sử dụng trong mọi dự án. Tuy nhiên, biết chúng sẽ khiến bạn trở thành một nhà phát triển tốt hơn và giúp bạn giải quyết các nhiệm vụ phức tạp và khó khăn hơn.

Khám phá một số tính năng nâng cao và các mẫu như một phần trong hành trình học tập của bạn. Chuyên nghiệp hóa thư viện và hiểu sâu hơn về cách hoạt động của nó.

Một số ví dụ về những thứ bạn có thể thử:

  • Tài liệu tham khảo và ngữ cảnh
  • Các thành phần có thứ tự cao hơn
  • Các mẫu và chức năng JS nâng cao
  • Ghi nhớ
  • và những người khác

Dưới đây là một ví dụ về một thành phần sử dụng ghi nhớ được lấy từ các tài liệu chính thức:

const memoizedValue = useMemo(() => computeExpensiveValue(a, b), [a, b]);

Khám phá các tính năng nâng cao và hiểu cách chúng hoạt động

Kết luận

Đặc biệt, JavaScript và React là những công nghệ độc đáo giúp chúng tôi phát triển các ứng dụng đáng kinh ngạc. Chúng liên tục phát triển để đáp ứng nhu cầu của người dùng và luôn dẫn đầu khi các nhà phát triển và công ty thích xây dựng sản phẩm của họ.

Luôn cập nhật là điều cần thiết, nhưng vẫn chưa đủ; Kinh nghiệm đến từ việc học những điều mới và hiểu cách chúng hoạt động.

Tôi hy vọng bạn thấy bài viết này hữu ích và vui lòng để lại trong phần bình luận. Đây là những bài học hay nhất của bạn khi làm việc với React. Bạn có đồng ý với tôi không?

Cảm ơn vì đã đọc!

Tham khảo khóa học:

Web Frontend + React dành cho người mới bắt đầu - tại đây.

Hay khóa ReactJs 16 buổi - ở đây nhé.

Bài viết gốc tại đây.