(Giới thiệu về Reactjs)

ReactJS Jan 26, 2022
React là một thư viện UI được phát triển bởi Facebook, hỗ trợ xây dựng các single page application nhanh chóng bằng các component có tính tương tác cao, có khả năng tái sử dụng.

Độ phổ biến của React

Dù ra mắt cũng đã lâu nhưng React hiện tại vẫn đang là thư viện để xây dựng các web app phổ biến nhất so với các framework như Angular hay Vue.

React linh hoạt trong việc phát triển các dự án vừa và lớn, có khả năng mở rộng cao. Cấu trúc Jsx dễ làm quen giúp cho việc viết code nhanh và tối ưu trong quá trình biên dịch. Cộng đồng phát triển mạnh mẽ nên không phải lo khi gặp issue khó.

Các thương hiệu nổi bật sử dụng React như Facebook, instagram, shopee, tiki,...

Ngoài phát triển các ứng dụng web, React còn có thế phát triển cả ứng dụng mobile bằng React native, giúp tiết kiệm chi phí phát triển.

Tuy vậy nhưng React vẫn có những hạn chế nhất định. Kích thước bundle của React khá lớn ảnh hưởng đến performance của ứng dụng. Quá trình học React khá khó cho những người mới tiếp cận. Do đó chúng ta nên cân nhắc lựa chọn công nghệ khi phát triển một dự án.

Cấu tạo của một component React

Một ứng dụng React được tạo nên từ một hay nhiều component có quan hệ với nhau. Một component React có 2 thành phần cơ bản là prop và state.

  • prop: Prop là dữ liệu đầu vào của component giúp cho các component có thể giao tiếp với nhau. Prop là dữ liệu tĩnh chỉ thay đổi khi đầu vào thay đổi.
  • state: state giống như biến "data" bên Vuejs, giúp tạo dữ liệu local cho component, nó thể hiện trạng thái của một component.State là dữ liệu động có thể thay đổi bằng phương thức setState, khi state thay đổi component cũng re-render để update UI. State chỉ có thể sử dụng bên trong component sinh ra nó
Cấu tạo của một component React

Có 2 cách để khai báo một component đó là sử dụng class component hoặc function component.

React hook

React hook được thêm vào từ v16.8 của React, giúp sử dụng state, lifecycle và các feature khác của React mà không cần đến class component. Hướng tới function programming, giảm đáng kể kích thước bundle so với class OOP.

Các hook cơ bản thường được sử dụng

useState

useState nhận đầu vào là giá trị khởi tạo của 1 state và trả ra 1 mảng gồm có 2 phần tử, phần tử đầu tiên là state hiện tại, phần tử thứ 2 là 1 function dùng để update state. useState dùng để khởi tạo và xử lý state trong 1 component.

Ví dụ về useState

useEffect

useEffect giúp xử lý các side effects, useEffect sẽ tương đương với các hàm componentDidMount, componentDidUpdatecomponentWillUnMount trong LifeCycle của class component.

useEffect gồm có 2 tham số là effectFunctionarrayDependencies.

  • effectFunction: gọi là side-effect function, thường thực hiện logic chương trình khi useEffect được gọi. Có 2 loại effect là effect cần cleanup và effect không cần cleanup.
  • arrayDependencies: mảng phụ thuộc, cơ bản là để xác định khi nào thì hàm side-effect được gọi.
Ví dụ về useEffect

useMemo

useMemo giống như computed bên Vue, nó sẽ lưu lại kết quả tính toán trước đó và chỉ tính toán lại khi dependencies thay đổi.

  • Nhận vào 2 tham số: function và dependencies.
  • Return về memoized value.
  • Nếu dependencies rỗng sẽ không bao giờ tính toán lại value mới.
Ví dụ về useMemo

Như trong ví dụ trên, listString sẽ được tạo lại mỗi khi component Home render lại (như khi count thay đổi khiến component render lại). Giả sử trong 1 component ta có 50 biến listString như thế thì mỗi lần component render lại sẽ phải tạo lại cả 50 biến, như vậy sẽ rất ảnh hưởng đến performance. Thay vào đó ta sẽ sử dụng useMemo để lưu trữ lại những biến như này, và đặt phụ thuộc trong dependencies cho nó để kiểm soát khi nào nó sẽ được tính toán lại.

useCallback

useCallback cũng giống như useMemo, thay vì return về 1 memoized value thì nó return về 1 memoized callback.

  • Nhận vào 2 tham số: function và dependencies.
  • Return về memoized callback.
  • Nếu dependencies rỗng sẽ không bao giờ tạo ra function mới.
Ví dụ về useCallback

useRef

Khi ta muốn thao tác tới các phần tử DOM ví dụ như focus vào input nào đó, hoặc lấy giá trị trước đó của state ta có thể dùng useRef.

Sử dụng useRef để xử lý focus input
Sử dụng useRef để lấy giá trị trước đó của state

Ngoài ra còn có các hook khác như useDispatch, useContext,... Hoặc chúng ta có thể tự tạo các custom hook riêng.

LifeCycle trong React

Lifecycle hay vòng đời của một component là quá trình component đó được hiển thị lên DOM, update dữ liệu trong suốt thời gian tồn tại và remove khỏi DOM.
Chúng ta có thể hiểu nó như quá trình khi chúng ta sinh ra, lớn lên rồi chết đi, đó là lifecycle.

LifeCycle React khi sử dụng class component

Lifecycle trong class component khá phức tạp và dài dòng, từ khi React hook ra đời, các lifecycle React được gói gọn trong useEffect.

Lifecycle trong function component với useEffect
  • Khi dependencies là [] nó sẽ giống như mounted của Vue và componentDidMount của class component, nó chỉ chạy 1 lần duy nhất khi component render lần đầu tiên.
  • Khi dependencies là 1 biến hay 1 function nào đó, đoạn effect function sẽ chạy mỗi khi giá trị trong dependencies thay đổi. Nó giống với Watch của Vue và componentWillReceiverProps của class component.
  • Khi useEffect return về 1 function nó sẽ dọn dẹp các function đã thực thi sau khi component bị unmount, ví dụ như unsubscribe, clearInterval, … Nó giống như Destroyed của Vue và componentWillUnMount của class component.
  • Khi không có array dependencies, các effect function sẽ được gọi liên tục mỗi khi component render lại, giống như updated của Vue và componentDidUpdate của class component.
    Xem thêm tại https://tech.miichisoft.net/gioi-thieu-ve-react-hooks/

Context API

Trong một ứng dụng React, khi muốn chia sẻ data giữa các component trong 1 tree như từ ông sang cháu, thì ta phải truyền prop từ ông sang cha, rồi từ cha sang cháu và ngược lại. Khi quan hệ giữa các component trong tree lớn hơn như có thêm anh, chị, em, họ hàng,... thì việc truyền prop giữa các component rất phức tạp.
Do đó Context Api ra đời giúp cho việc chia sẻ data trong 1 tree component dễ dàng.

pasted-image-0-1024x515

Context Api gồm có phần provide và phần consume:

  • Provide: nơi tạo ra state ( root tree ).
  • Consume: nơi lấy state để sử dung ( các child ).

Tạo 1 context cơ bản:

  1. Đầu tiên chúng ta sẽ tạo 1 context bằng createContext với user là state muốn chia sẻ, setUser là phương thức để thay đổi giá trị user.
  2. Sau đó tạo 1 custom hook để sử dụng Context tại các component khác.
  3. Khai báo phần Provider để wrap lấy các children bên trong tree.
Bọc AuthProvider vào tree cần sử dụng
Sử dụng Context tại component con trong tree App

Context Api chỉ có tác dụng trong 1 tree component, khi muốn chia sẻ state ở cấp độ global giữa nhiều tree ta có thể sử dụng thư viện hỗ trợ quản lý state như Redux, nó giống như Vuex của Vue. Tuỳ thuộc vào mức độ state cần quản lý trong ứng dụng.

Trên đây là những phần cơ bản về Reactjs, các bạn có thể đọc thêm từ offical docs của React và các nguồn tài liệu khác.
https://reactjs.org/
https://viblo.asia/p/cung-tim-hieu-ve-cac-hook-trong-react-hooks-Ljy5VYgjlra

Tags

Great! You've successfully subscribed.
Great! Next, complete checkout for full access.
Welcome back! You've successfully signed in.
Success! Your account is fully activated, you now have access to all content.