Hiểu về API ngữ cảnh của React

---

Với React 16.3, giờ đây ta có quyền truy cập vào một API ngữ cảnh hoàn toàn mới. Với API ngữ cảnh cũ của React, khuyến nghị chính thức dành cho các nhà phát triển là tránh sử dụng nó, nhưng giờ đây, API ngữ cảnh mới là công dân hạng nhất.

Mặc dù không nghĩa là thay thế cho các thư viện quản lý trạng thái như Redux hoặc MobX, nhưng API ngữ cảnh cho phép một cách dễ dàng để chia sẻ dữ liệu global giữa nhiều thành phần mà không cần phải chuyển nó làm đạo cụ. Nó giải quyết một vấn đề phổ biến được gọi là vấn đề khoan chống trong đó các đạo cụ cần được truyền cho nhiều thành phần trong cây để tiếp cận thành phần cần nó.

API mới đặc biệt hữu ích để cung cấp dữ liệu cần thiết cho một tỷ lệ phần trăm cao các thành phần trong cây. Các tùy chọn chung như chủ đề đã chọn hoặc tùy chọn ngôn ngữ đã chọn là hai ví dụ điển hình.

Trong bài đăng này, ta sẽ giải thích cách sử dụng API ngữ cảnh mới bằng ít từ nhất có thể. Ta sẽ tạo ra một bối cảnh Locale đơn giản mà cung cấp tùy chọn ngôn ngữ giữa tiếng Anh và tiếng Pháp với các thành phần trong ứng dụng. Lưu ý nó chỉ nghĩa là một ví dụ đơn giản để chứng minh sở thích global của một ứng dụng và đối với i18n thực trong React, một giải pháp mạnh mẽ hơn như i18next sẽ thích hợp hơn.

React.createContext

Để tạo một ngữ cảnh mới, hãy sử dụng hàm createContext mới của React:

export const LocaleContext = React.createContext('en');

Ở đây ta cũng chuyển giá trị mặc định là 'en' vào ngữ cảnh, nhưng bạn cũng có thể bỏ qua giá trị mặc định này nếu muốn.

Hàm createContext trả về thành phần Nhà cung cấp và Người tiêu dùng .

Các nhà cung cấp

Thành phần Trình cung cấp được sử dụng để bao bọc các thành phần trong cây cần truy cập vào giá trị từ ngữ cảnh. Ở đây, hãy tạo một thành phần LocaleProvider bao bọc trình cung cấp LocaleContext của ta và cung cấp một cách để thay đổi giá trị ngôn ngữ của ngữ cảnh:

import React from 'react';

export const LocaleContext = React.createContext();

class LocaleProvider extends React.Component {
  constructor(props) {
    super(props);

    this.changeLocale = () => {
      this.setState(state => {
        const newLocale = state.locale === 'en' ? 'fr' : 'en';
        return {
          locale: newLocale
        };
      });
    };

    this.state = {
      locale: 'en',
      changeLocale: this.changeLocale
    };
  }

  render() {
    return (
      <LocaleContext.Provider value={this.state}>
        {this.props.children}
      </LocaleContext.Provider>
    );
  }
}

export default LocaleProvider;

Lưu ý thành phần LocaleProvider chỉ là một lớp bao bọc mỏng xung quanh thành phần Trình cung cấp ngữ cảnh của ta . Giá trị của ngữ cảnh được chuyển đến trình cung cấp bằng cách sử dụng giá trị prop và sau đó ta chỉ hiển thị các phần tử con của LocaleContext .

Ta chuyển trạng thái của thành phần của ta làm giá trị ngữ cảnh và từ đó giá trị ngôn ngữ và phương thức changeLocale để thay đổi giá trị sẽ có sẵn.

Sử dụng nhà cung cấp

Ta có thể sử dụng nhà cung cấp của bạn ở cấp cao nhất của thành phần Ứng dụng :

import React, { Component } from 'react';

import LocaleProvider from './context/LocaleContext';
import Greeting from './Greeting';
import ToggleLocale from './ToggleLocale';

class App extends Component {
  render() {
    return (
      <LocaleProvider>
        <Greeting />
        <ToggleLocale />
      </LocaleProvider>
    );
  }
}

export default App;

Khách hàng

Bây giờ tất cả những gì còn lại cần làm là truy cập các giá trị từ ngữ cảnh bằng cách sử dụng thành phần Người tiêu dùng .

Thành phần Lời chào của ta trông giống như sau:

import React from 'react';

import { LocaleContext } from './context/LocaleContext';

export default () => {
  return (
    <LocaleContext.Consumer>
      {localeVal =>
        localeVal.locale === 'en' ? <h1>Welcome!</h1> : <h1>Bienvenue!</h1>
      }
    </LocaleContext.Consumer>
  );
};

---

Và thành phần ToggleLocale của ta trông như thế này:

import React from 'react';

import { LocaleContext } from './context/LocaleContext';

export default () => {
  return (
    <LocaleContext.Consumer>
      {localeVal => (
        <button onClick={localeVal.changeLocale}>Change language</button>
      )}
    </LocaleContext.Consumer>
  );
};

Thành phần Người tiêu dùng sử dụng mô hình hỗ trợ kết xuất và mong đợi một chức năng như phần hỗ trợ con của nó sẽ nhận được giá trị từ ngữ cảnh. Sau đó, ta có thể truy cập các giá trị của ngữ cảnh và gọi các phương thức mà nó cung cấp.

Với điều này tại chỗ, ta có thể chuyển đổi thông điệp chào mừng của ứng dụng giữa Welcome và Bienvenue .

---

Trong ví dụ của ta , các thành phần Greeting và ToggleLocale là con trực tiếp của thành phần LocaleProvider , nhưng chúng có thể nằm ở bất kỳ độ sâu nào trong cây thành phần và chúng vẫn có quyền truy cập vào dữ liệu ngữ cảnh chung miễn là thành phần tiêu dùng của ngữ cảnh được sử dụng và nhà cung cấp ở đâu đó cao hơn trên cây.

⚛️ Với điều này, bạn nên bắt đầu sử dụng API ngữ cảnh mới trong ứng dụng của bạn . Để biết thêm thông tin, bạn cũng có thể tham khảo các tài liệu chính thức .

---

---

Các tin liên quan