Bỏ túi Cheatsheet React cho năm 2020 (kèm ví dụ thực tế)

1691

Nhắc đến Cheatsheet thì bài viết này không hẳn chỉ là bản tóm tắt những tính năng của React. Trong quá trình làm việc với React, tôi đã đúc kết một số kiến thức thực tế và pattern từ kinh nghiệm bản thân. Mỗi phần trong bài viết này sẽ hướng dẫn chi tiết về React cùng những ví dụ thực tế.

  5 dự án React buộc phải có trong porfolio của bạn
  React: Thử làm ứng dụng đổi tỷ giá

CORE CONCEPTS

Các element và JSX

  • Cú pháp căn bản cho một React element:

  • Cú pháp JSX là expressions

  • JSX cho phép nest expressions

  • JSX cho phép nest các elements:

  • HTML và JSX có sự khác biệt một ít về cú pháp

  • App React cơ bản nhất yêu cầu 3 thứ
  • ReactDOM.render() để render app
  • Một JSX element (được gọi là root node)
  • Một DOM element để mount app (thường là một div với một id của root trong index.html file)

Component và Prop của React

  • Cấu trúc cho một component React cơ bản

  • Cách sử dụng components

  • Component có thể sử dụng lại trong app

  • Data có thể chuyển đến component với prop

  • Props không thể thay đổi được (mutated)

  • Chúng ta có thể dùng children prop khi muốn chuyển element/component như là props đến các component khác

  • Hiển thị có điều kiện các components với ternaries và short-circuiting

  • Fragment là các components được dùng để hiển thị các loại component mà không cần thêm element vào DOM.
  • Fragments phù hợp với conditional logic

List và key

Dùng .map() để chuyển mảng list of data  vào list of elements:

.map() cũng được dùng cho components như là elements:

Mỗi React element được lặp lại cần một ‘key’ props. Keys là nhân tố cần thiết để React theo dõi từng element được lặp lại với map.

Nếu không có Keys thì sẽ khó để update các element khi data thay đổi. Và Keys phải là các giá trị duy nhất để thể hiện rằng các elements này tách biệt với nhau.

Events và Event Handlers

Events trong React và HTML có sự khác biệt nhỏ

Hai thứ quan trọng nhất trong React events là onClick và onChange

  • onClick xử lý click events trên JSX element (được gọi là buttons)
  • onChange thì xử lý keyboard events (được gọi là inputs)

React Hooks

State và useState

useState cho phép chúng ta khai báo local state trong Function Component:

Ghi chú: Bất kỳ hook trong phần này được lấy từ React packafe và có thể import riêng lẻ.

useState cũng cho chúng ta chức năng ‘setter’ để update các state mà nó tạo

useState có thể sử dụng một hoặc nhiều lần với single component:

useState chấp nhận các value primitive hay object để quản lý state:

Nếu state mới phụ thuộc vào state trước đó, để đảm bảo update đã hoàn tất, chúng ta có thể dùng một function trong setter function đưa ra chính xác state trước đó.

Side effects và useEffect

useEffect cho phép thực hiện side effect bên trong các function component. Vậy các side effect là những gì?

  • Sử dụng side effects khi chúng ta cần “đụng” đến thế giới bên ngoài. Ví dụ như fetching data từ API hay làm việc với DOM.
  • Side effect là các hành động có thể thay đổi component state.

useEffect chấp nhận callback function (hay còn được gọi là ‘effect’ function), được chạy mặc định mỗi lần re-render. Nó chạy một lần khi component mount, cũng là thời điểm phù hợp để thực hiện side effect trong một lifecycle của component.

Để tránh thực hiện callback sau mỗi lần render, chúng ta có thể tạo arguement thứ 2 là một array (mảng) trống:

useEffect cho phép chúng ta thực hiện các effect với các mảng dependencies.

Mảng dependencies là arguement thứ hai, nếu có một trong những giá trị trong mảng thay đổi, thì effect function sẽ chạy lại.

useEffect cho phép chúng ta unsubscribe những effect nhất định bằng cách trả lại function vào lúc cuối:

Fetching data với useEffect

Nên chú ý khi xử lý các promise với các cú pháp async/await ngắn gọn yêu cầu phải tạo thêm function riêng biệt (Vì effect callback function không thể async.)

Performance và useCallback

useCallback là một hook được sử dụng để cải thiện performance của component.

Nếu có một component thường xuyên re-render, useCallback sẽ ngăn chặn tình trạng callback functions trong component được tạo lại mỗi lần component re-render (đồng nghĩa với việc function component re-run).

useCallback re-run chỉ khi một trong những dependencies thay đổi.

Memorization và useMemo

useMemo khá tương tự với useCallback và để cải thiện hiệu năng. Thay vì dùng để callback, nó được dùng để lưu lại kết quả của hàm nào và những giá trị nào sẽ làm thay đổi kết quả đó.

Refs và useRef

Ref là attribute đặc biệt và luôn có sẵn trên tất cả React components. Chúng cho phép chúng ta tạo ra reference đến element/component có sẵn khi mount component.

useRef cho phép chúng ta sử dụng React Refs một cách dễ dàng. Chúng ta gọi useRef (ở top của component đó) và đính kèm giá trị trả về vào attribute ref của element đó để tham chiếu.

Khi đã tạo reference, chúng ta sử dụng property hiện có để chỉnh sửa (modify-mutate) các properties của element đó. Hoặc chúng ta có thể call bất kỳ methods nào trên element đó (như .focus() để focus một input).

Hooks nâng cao

Context và useContext

Trong React, chúng ta nên tránh tạo ra các multiple props để chuyển data xuống 2 hay nhiều level từ một parent component:

Context khá hữu ích dùng để chuyển props xuống các tầng levels của child 

useContect hook có thể xóa render props pattern này, tuy nhiên, để có thể consume context trong bất kỳ function component nào:

Reducers và useReducer

Reducer là function khá đơn giản, được dùng để lấy state object trước đó và một action object và trả về một state object mới. Ví dụ:

React useReducer hook là một cách hữu ích để quản lý state trong React bên cạnh useState, và nó có thể kết hợp với context dùng để quản lý state trong một ứng dụng mà có thể không cần sử dụng đến redux

Ngoài ra, sự kết hợp useReducer và useContext có thể là hệ thống quản lý state cho apps.

Các hooks custom

Các hooks được tạo ra nhằm tái sử dụng behavior dễ dàng giữa các component. Chúng là pattern dễ hiểu hơn các loại khác của class components, như higher-order component hay render props. Chúng ta có thể tự tạo ra hook của riêng mình tùy thuộc vào nhu cầu từng dự án, bên cạnh những gì React đã có sẵn:

Các quy tắc của hooks:

Khi sử dụng React hooks thì có 2 nguyên tắc không nên vi phạm:

  1. Hooks chỉ có thể đuợc call trên top của components (chúng không thể ở trong conditionals, loops hay nested functions).
  2. Hooks chỉ có thể sử dụng trong function components (chúng không thể dùng trong Javascript function bình thuờng hay class components).

Có rất nhiều kiến thức React để học hỏi nhưng trên đây là những gì được trình bày tại bài viết này là những lớp gạch cơ bản nhất trên con đường React master trong năm 2020. Keep coding và chờ những bài viết tiếp theo nhé.

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

Xem thêm việc làm về React trên TopDev

TopDev via Freecodecamp

SHARE
Hi, you can call me Phương. I'm a developer-to-be so hold on, maybe my articles may help.