Tìm hiểu API ngữ cảnh mới của React

Trong một thế giới có rất nhiều khung công tác front-end khác nhau, thật khó để biết nên chọn cái nào. Tôi có muốn sử dụng Angular đã từng phổ biến không? Hay việc đi sâu vào VueJS sẽ có lợi cho phạm vi kiến thức của tôi?

Sau đó, ta có ReactJS, một khung công tác do Facebook tạo ra dường như đang chiếm lĩnh thế giới khung công tác front-end như vũ bão. Sử dụng các thành phần, DOM ảo và JSX (đó là một ngày khác!), React dường như bao hàm tất cả, biến nó thành một khung công tác mạnh mẽ.

API ngữ cảnh mới gần đây đã được giới thiệu trong React 16.3 như:

Một cách để truyền dữ liệu qua cây thành phần mà không phải chuyển các đạo cụ xuống theo cách thủ công ở mọi cấp

Nghe thật tuyệt! Nào cùng đào vào bên trong.

ảnh chụp màn hình của tài liệu API ngữ cảnh React

Đạo cụ và trạng thái

Trong React, bạn có các props và state . Hai điều rất quan trọng cần hiểu.

Props , viết tắt của thuộc tính, là dữ liệu được chuyển đến thành phần từ thành phần mẹ.

Trạng thái là dữ liệu đang được quản lý trong thành phần. Vì vậy, nếu mỗi thành phần có trạng thái riêng của nó, làm thế nào để ta chia sẻ thông tin đó cho thành phần khác? Bạn có thể sử dụng đạo cụ, nhưng đạo cụ chỉ có thể được chuyển giữa các thành phần cha và con.

Vì vậy, ta phải làm gì nếu ta có nhiều lớp thành phần để chuyển chỉ một bit thông tin? Còn gọi là , chống khoan?

Đề xuất chi tiết (Những gì API ngữ cảnh giải quyết)

Ta hãy xem một ví dụ về prop-khoan để ta có thể hiểu những gì API ngữ cảnh đang giải quyết. Trong ví dụ này, ta sẽ thấy cách ta có thể truyền thông tin từ một thành phần, đến thành phần con, sau đó đến con của thành phần đó.

const Lowest = (props) => (   <div className="lowest">{props.name}</div> )  const Middle = (props) => (   <div className="middle">     <Lowest name={props.name} />   </div> )  class Highest extends Component {   state = {     name: "Context API"   }    render() {     return  <div className="highest">       {this.state.name}       <Middle name={this.state.name} />     </div>   } }

Tôi biết cách đặt tên không giống với thế giới thực nhất, nhưng nó giúp chứng minh khả năng của ngữ cảnh để truyền cho các thành phần lồng nhau. Một tình huống thực tế hơn có thể xảy ra trong giao diện user dựa trên thẻ: CardGrid -> CardContent -> CardFooter -> LikeButton .

Quay lại ví dụ của ta , đây là cách các thành phần Highest -> Middle -> Lowest sẽ được lồng vào nhau:

<Highest>      <Middle>          <Lowest>              {/* we want our content here but dont want to prop pass ALLLL the way down ! */}          </Lowest>      </Middle>  </Highest>

Để ý xem để Người cao nhất và Người thấp nhất nói chuyện thì họ cần Người trung gian làm sứ giả?

Xin chào và này, ta có React Context có thể đảm nhận tất cả công việc cho ta .

API ngữ cảnh của React

React Context cho phép ta có một trạng thái có thể được nhìn thấy trên phạm vi global cho toàn bộ ứng dụng .

Ta phải bắt đầu với trình cung cấp ngữ cảnh ( <Provider /> ) để xác định dữ liệu bạn muốn gửi đi và bạn cần trình cung cấp ngữ cảnh ( <Consumer /> ) lấy dữ liệu đó và sử dụng dữ liệu đó khi được gọi.

Với Context, bây giờ bạn có khả năng khai báo trạng thái một lần và sau đó sử dụng dữ liệu đó, thông qua trình tiêu dùng ngữ cảnh, trong mọi phần của ứng dụng.

Nghe có vẻ khó tin đúng không? Hãy xem cách ta có thể cài đặt điều đó trong một ứng dụng React đơn giản.

Nào cùng xây!

Xây dựng Chuyển tên bằng API ngữ cảnh

Hôm nay ta sẽ cài đặt một ứng dụng React cơ bản. Hãy làm một ứng dụng chuyển tên từ thành phần này sang thành phần khác mà điều đó xảy ra không phải là thành phần con! Tuyệt quá! Ta sẽ có ba cấp độ khác nhau, một cấp sẽ là thành phần cao nhất có tên được lưu trữ trong trạng thái, ta sẽ có thành phần ở giữa và sau đó là thành phần thấp nhất.

Ứng dụng của ta sẽ gửi tên ở trạng thái từ cao nhất đến thấp nhất mà không cần phải nói chuyện ở giữa. Mở bất kỳ trình soạn thảo mã nào bạn muốn sử dụng và bắt đầu viết mã!

Đầu tiên, ta cần dependencies react cho ứng dụng của bạn . Hãy tiếp tục và thêm nó vào phần phụ thuộc của bạn hoặc nếu bạn đang làm việc trong một editor , hãy thực hiện các bước sau để cài đặt nó:

Cài đặt npm global trên máy của bạn nếu bạn chưa có.
npm install —save react
Kiểm tra package.json của bạn cho các react phụ thuộc.

Trong file .js chính của ta , đây là nơi điều kỳ diệu xảy ra. Khi nào ta xây dựng một ứng dụng React, bạn luôn cần phải nhập các phần phụ thuộc của bạn , nếu không thì file đó sẽ không biết sử dụng nó. Vì vậy, ở đầu index.js , hãy nhập những gì ta cần:

import React, { Component } from 'react';

Ta đã nhập xong, bây giờ hãy chuyển sang thành phần. Ta sẽ muốn khai báo ngữ cảnh của ta trong một biến để dễ đọc. Dưới sự nhập khẩu của ta , hãy làm:

const AppContext = React.createContext()

Các lớp thành phần của ta

Thành phần Highest của ta sẽ có trạng thái. Trạng thái của ta sẽ có một tên mà ta muốn chuyển cho thành phần Lowest mà không cần phải nói chuyện với thành phần Middle :

class Highest extends Component {     state = {         name : “React Context API”,     }      render() {         return (          <AppContext.Provider value={this.state}>           {this.props.children}         </AppContext.Provider>         )     } }

Ta sẽ xây dựng thành phần con của bạn để gọi nó là thành phần Middle :

const Middle = () => (   <div>     <p>I’m the middle component</p>     <Lowest />   </div> )

Và thành phần con của thành phần đó sẽ được gọi là Lowest :

const Lowest = () => (   <div>      <AppContext.Consumer>         {(context) => context.name}       </AppContext.Consumer>   </div> )

Hãy xem qua điều này. Bạn sẽ thấy rằng ta có một trạng thái ở Highest mà ta muốn chuyển xuống Lowest . Ta có thuộc tính tĩnh của ta sẽ cho phép ta khai báo những gì ta muốn ngữ cảnh của ta . Trong trường hợp của ta , tên "React Context API".

Provider đang giữ dữ liệu đó để khi dữ liệu đó bị consumed bởi một thành phần khác, họ sẽ biết phải cung cấp cho nó những gì. Trong thành phần Lowest của ta , bạn sẽ thấy rằng ta có Consumer muốn dữ liệu đó mà không cần phải chuyển nó đến thành phần Middle . Thành phần đó thay vào đó chỉ đi chơi, tuyên bố rằng Lowest là con của nó.

Khi nào không sử dụng ngữ cảnh

Đối với một giải pháp khoan chống đơn giản có thể mở rộng quy mô tốt, hãy đưa ra bối cảnh! Đối với các ứng dụng quy mô lớn hơn có nhiều trạng thái (và phức tạp hơn), bộ giảm tốc, v.v., Redux có thể phù hợp hơn.

Không cần thiết phải sử dụng ngữ cảnh trên toàn bộ ứng dụng của bạn khiến mọi thứ trở nên quá lộn xộn. Hãy tháo vát với mã của bạn, đừng chỉ sử dụng ngữ cảnh để bỏ qua việc nhập thêm.

Kết luận

API ngữ cảnh của React khá tuyệt vời. Nhưng đừng sử dụng nó trừ khi bạn biết nó sẽ có lợi cho bạn và mã của bạn. Redux có thể tốt. Tránh xa việc khoan lỗ và biết rằng những thứ như ngữ cảnh có thể giúp bạn tránh điều đó. Đó là một sự thay thế tuyệt vời!

Nếu bạn muốn kiểm tra tất cả mã, bạn có thể lấy tất cả trên hộp mã .

Tags:

Các tin liên quan