Truyền dữ liệu giữa các thành phần phản ứng – Cha mẹ, Con cái, Silblings

Tram Ho

React là một thư viện JavaScript được tạo bởi Facebook. Xử lý dữ liệu trong React có thể hơi phức tạp, nhưng không phức tạp như vẻ ngoài của nó. Tôi hiện đã biên soạn ba phương thức Xử lý dữ liệu trong React:

  1. From Parent to Child using Props
  2. From Child to Parent using Callbacks
  3. Between Siblings :
    i. Combine above two methods
    ii. Using Redux
    iii. Using React’s Context API
    Blog này chủ yếu chứa một bản tổng hợp về việc thực hiện các khái niệm này, điều này chắc chắn sẽ có ích cho bất kỳ người mới bắt đầu cố gắng nắm bắt mọi thứ trong nháy mắt.
    **From Parent to Child Using Props **

Hãy xem xét cấu trúc thư mục của chúng Parent Component renders child components in the Application.
App
└── Parent
├── Child1
└── Child2

Đây là hướng dễ dàng nhất của luồng dữ liệu trong React và là hướng cơ bản nhất.

Đơn giản, sử dụng this.props.dataFromParent (chỉ là một biến được sử dụng để gửi props) truy cập dữ liệu được gửi từ Parent to Child.

From Child to Parent Using Callbacks
Chúng ta hãy giả sử rằng tôi cần gửi một tin nhắn từ Child1 to Parent — “Hey Popsie, How’s it going?”. Để làm điều đó, tôi cần phải làm theo một loạt các bước.
Step 1: Xác định hàm gọi lại có tham số mà chúng tôi xem là đã truy cập từ child in the Parent.js
Step 2: Đồng thời, gửi chức năng gọi lại được xác định làm props to the Child1.js

Step 3: Trong Child1.js gửi dữ liệu bằng this.props.callback(dataToParent)

Between Siblings
Khi tôi mới bắt đầu, tôi đã mất một thời gian khó khăn để quyết định chọn phương pháp nào để chia sẻ dữ liệu giữa siblings, có ba phương pháp mà tôi chưa biết để chia sẻ dữ liệu giữa siblings và tất cả đều có đặc quyền và khuyết điểm riêng.
Method 1: Kết hợp hai phương pháp chia sẻ dữ liệu trên.
Tuy nhiên, phương thức này sẽ không hoạt động đối với các cấu trúc thư mục phức tạp vì người ta sẽ phải viết các đoạn mã lớn để gửi dữ liệu giữa các thành phần ở mức độ xa nhau. Dữ liệu, sau đó sẽ phải được đẩy và kéo qua từng cấp trung gian.

Method 2: Sử dụng một cửa hàng toàn cầu duy trì trạng thái của tất cả các thành phần con cần thiết để tương tác và tiêu thụ dữ liệu cần thiết từ store – Redux


Method 3: Use React’s Context API
Có rất nhiều bài viết và blog đã đề cập đến lý do tại sao React nâng cấp lên API ngữ cảnh và cái nào tốt hơn về mặt nào, hai bài viết này sẽ giúp người ta hiểu tất cả:
React Context API — A Replacement for Redux?
You Might Not Need Redux
Tôi đã sử dụng phương pháp này và đã có một chút thiên hướng về việc sử dụng phương pháp này so với Redux.

The major advantage of Context API is that it saves the developer from Prop-Drilling.( Prop-drilling
refers to the technique of passing down variables to sub components.
The main idea is functional programming where you pass the parameters to the next function and so on)


Hãy xem xét cấu trúc thư mục và chúng ta cần truyền dữ liệu giữa Child1 và Child2. [Child1 phải gửi tin nhắn – Em trai SSup ?? Nghiêng đến Child2] Chúng tôi thực hiện điều này theo phương pháp sau bằng API bối cảnh:
App
├── Child1
└── Child2
Step1: Create a Provider Component for the two children.
This Provider mantains the state (data to be used by both components and some callback used to manipulate the states) and returns a contextObject.Provider JSX component )
Step 2: Pass the state and the callback function as props to all children inside the Provider Component.

The provider is the boss for its children (the global store of all the states and
callback functions to manipulate those states). Who-ever needs anything has
to contact the provider first to access the objects.

(a) Để đặt hoặc thao tác tin nhắn bằng Child1, nó phải truy cập Provider và đặt trạng thái của Provider.
(b) Để xem / truy cập dữ liệu bằng Child2, nó phải truy cập Provider để lấy các trạng thái.

Step 4: Implement the desired result in the same manner, but this time, using ContextObject.Consumer as explained below:
Both the children — Child1 and Child2 are the consumers of the Provider. Henceforth, they access the Provider within Consumer Tags.

Làm thế nào để Child2 nhận được dữ liệu bây giờ? Simply, accessing the Provider withing Consumer tags.

Tôi hy vọng điều này cung cấp chi tiết triển khai rõ ràng cho Truyền dữ liệu giữa các thành phần khác nhau trong React. Đề xuất:
Using Context in React

Chia sẻ bài viết ngay

Nguồn bài viết : Viblo