Học ReactJS: Cơ bản tới Nâng cao ( Phần cuối )

Đăng bởi admin - November 18, 2021
Học ReactJS: Cơ bản tới Nâng cao

Học ReactJS không chỉ tìm hiểu về khái niệm đơn thuần mà trước đó chúng ta còn tìm hiểu về component, JSX và cách thức tạo multiple nested component trong ReactJS. Bài viết lần này, những khái niệm Props và State khi học ReactJS sẽ được làm rõ.

1. Props & State là gì?

Có hai kiểu của data trong khi học React đó là props và state. Sự khác biệt giữa hai kiểu thì hơi khó khăn để hiểu ngay từ ban đầu, ít nhất là về mặt khái niệm. Nhưng một khi bạn bắt đầu code, bạn sẽ nhanh chóng tách biệt được hai loại.

Điểm mấu chốt của sự khác nhau là state thì private và chỉ có thể được thay đổi bên trong bản thân component. Props thì mang tính external, và không bị kiểm soát bởi bản thân component. Nó được truyền từ component cao hơn theo phân cấp, hay có thể hiểu đơn giản là truyền từ component cha xuống component con, cái mà điều khiển dữ liệu trước khi truyền xuống.

Vì thế trong khi một component không thể thay đổi props của nó một cách trực tiếp (điều này có thể làm một cách gián tiếp nhưng hãy để nó vào những phần sau), thì nó có thể tự thay đổi state của bản thân.

Props

Chúng ta sẽ bắt đầu xem xét kỹ hơn về props, cũng như hiểu về data flow một chiều trong React, điều này vô cùng quan trọng.

Nào cùng cài đặt app của chúng ta đã làm trong bài trước với một ít dữ liệu, sử dụng props nhé. Đầu tiên chúng ta cần lấy dữ liệu từ một nơi nào đó. Đó có thể là Ajax call để lấy một số dữ liệu từ API, tuy nhiên chúng ta sẽ hard code nó như một variable.

Props trong ReactJS

Cách để đưa props vào một component nhìn rất giống cách mà chúng ta khai báo attribute cho một HTML element.

Props trong ReactJs

Lý do chúng ta sử dụng cặp ngoặc nhọn là vì chúng ta cần nói cho JSX biết rằng đó là một Javascript expression.

Một khi App component được cài đặt như thế này, nó có thể truy xuất vào biến text mà ta đã khai báo ở trên thông qua lời gọi this.props.text. Tuy nhiên, nó không thể trực tiếp thay đổi dữ liệu. Từ góc nhìn của component, props của nó là bất biến (immutable). Nó chỉ là thông tin được cài đặt cho component.

Đây là ví dụ.

Props trong ReactJs

Như các bạn thấy, props được truyền vào trong App component trong phương thức React.render(). Sau đó App component có thể truy xuất biến text thông qua lời gọi this.props.text. Nó cũng có thể truyền dữ liệu xuống component con của nó như chúng ta thấy cách mà Form component được App component cài đặt props trong ví dụ.

Khi dữ liệu đến được Form component, chúng ta thấy đây là điểm kết thúc, dữ liệu sẽ được render ra thẻ h3 như trên.

Đây là cách mà dữ liệu được luân chuyển trong React thông qua props.

 

State

Một cách khác để storing dữ liệu trong React là state. Không giống như props, bất biến dưới góc nhìn của component thì state có thể thay đổi (mutable).

Vì thế nếu bạn muốn dữ liệu trong ứng dụng thay đổi, ví dụ như dựa trên tương tác người dùng, thì dữ liệu phải được lưu trữ trong component state.

State là private và được quản lý bởi chỉ duy nhất một component, nó không thể truyền xuống cho component con. Nếu bạn muốn truyền xuống cho component con thì bạn phải truyền nó như là một props.

Cài đặt state

Để cài đặt state, đơn giản chúng ta cài đặt hàm getInitialState() vào component, và trả về bất cứ gì bạn muốn cài đặt trong state của component đó.

Thay đổi state

Để thay đổi state, đơn giản ta gọi hàm this.setState(), và truyền vào state mới như là một tham số.

Ví dụ.

State trong ReactJs

Đoạn code trên cũng cho bạn làm quen với hệ thống event trong React, rất đơn giản. Chúng ta hook một event listener vào trong button, ở trên là onClick. Khi nó được trigger, chúng ta gọi hàm handleClick, cái mà đã được cài đặt trước đó, và luôn sẵn sàng được gọi thông qua từ khóa this.

Trong hàm handleClick, chúng ta gọi this.setState(), cái mà sẽ thay đổi trạng thái của component.

Lưu ý: React event được wrap để chạy trên tất cả các browser, có nghĩa là React giúp bạn đảm bảo event của bạn chạy được trên tất cả các trình duyệt.

Chúng ta nên giữ state ở đâu?

Bạn nên cố gắng giữ số lượng các stateful component ít nhất có thể, và thậm chí giữ tối thiểu lượng dữ liệu trong state. Nếu component cấp dưới cần truy xuất dữ liệu từ state, thì hãy truyền nó thông qua props.

Lưu ý: Stateful component thì luôn luôn là higher level, trong khi Stateless component thường là lower level trong hệ thống phân cấp.

Để hình dung việc state được giữ ở đâu, bạn hãy hỏi bản thân một vài câu hỏi, những câu hỏi này được lấy từ React docs:

  • Xác định mỗi component mà render thông tin gì đó dựa trên state.
  • Tìm một component mà nó chủ sở hữu chung của các component khác (một component nằm bên trên tất cả các component khác trong hệ thống phân cấp thì cần có state)
  • Hoặc là những component là chủ sở hữu chung hoặc là những component nằm trên hệ thống phân cấp sẽ nên giữ state.
  • Nếu bạn không thể tìm ra component nào phù hợp, hãy tạo một component mới đơn giản giữ nhiệm vụ lưu trữ state và đặt nó đâu đó nằm bên trên các component là chủ sở hữu chung trong hệ thống phân cấp.

2. Lời kết

Chỉ gói gọn trong hai thuật ngữ: Props và State mà cũng đã tốn kha khá mồ hôi của anh em khi tìm hiểu về ReactJs. Kết thúc 2 phần của học ReactJS cho các bạn theo hướng full-stack nói chung và front-end nói riêng đã có thể hiểu được ít nhiều những tiện ích cũng như sự phức tạp mà một framework JavaScript như ReactJS đem lại. 

Tất nhiên để thành thạo một ngôn ngữ hay một chương trình mã nguồn mở thì đòi hỏi sự tìm tòi và trau dồi có chọn lọc. Hãy liên tục cập nhập những bài viết mới của FA để cập nhập những kiến thức mới nha.

Nguồn: Codeaholicguy

——————-

Nếu tự học ReactJS quá phức tạp tại sao không tìm đến một khóa học ReactJS để rút ngắn lộ trình tiếp cận ReactJS. 

hoccungFA ReactJs
Có thể bạn quan tâm

“Mình đã thử rất nhiều cách để cân bằng giữa việc học và làm việc”

Đó là những chia sẻ mở đầu của Nguyễn Hữu Hoàng – Hiện đang theo học...
Đăng bởi LinhNTK7 - September 28, 2022

Gặp gỡ chàng lớp trưởng “vạn người mê” của .Net 03

Với kim chỉ nam “Công nghệ là phép thuật cuối cùng còn tồn tại trên thế...
Đăng bởi LinhNTK7 - September 12, 2022

Lộ trình đào tạo IT – Business Analyst

Khi tham gia chương trình đào tạo tại FA, học viên sẽ nhận được sự hỗ trợ...
Đăng bởi GiaDP - July 22, 2022