VEZ chào đọc giả. Bữa nay, mình sẽ đưa ra đánh giá khách quan về các tips, tricks hữu ích phải biết qua nội dung Tìm hiểu khái niệm Context (Phần 2)

Ở bài trước, chúng ta đã tìm hiểu về khái niệm Context, các API liên quan và cách sử dụng nó. Trong bài viết này, chúng ta sẽ tìm hiểu về cách sử dụng nhiều Contexts trong cây thành phần và lịch sử thay đổi của nó trên các phiên bản React!

Sử dụng nhiều ngữ cảnh là gì?

Giới thiệu chung

Trong một dự án, các thành phần được tạo trong một cấu trúc cây. Mỗi thành phần quản lý và nhận các giá trị khác nhau. Vì vậy, việc sử dụng một Người tiêu dùng / Nhà cung cấp theo ngữ cảnh cho tất cả sẽ ảnh hưởng đến kết xuất lại.

tim-hieu-khai-niem-context-phan-2
Ví dụ về nhiều ngữ cảnh

Để giữ cho ngữ cảnh được hiển thị lại nhanh chóng và đúng cách, chúng ta cần ngữ cảnh riêng biệt theo nhóm các thành phần mẹ-con cần thiết, nhu cầu.

Ví dụ minh họa

Hãy xem xét ví dụ sau:

Tạo 2 ngữ cảnh: ngữ cảnh chứa tên giao diện, ngữ cảnh chứa tên người dùng

// Theme context
const ThemeContext = React.createContext("light");
// Signed-in user context
const UserContext = React.createContext(
  name: "Danny",
);

Tạo một thành phần chức năng Câu hỏi để hiển thị câu hỏi, sử dụng Người tiêu dùng để lấy giá trị của ThemeContext:

const Question = () => (
  <ThemeContext.Consumer>
    (theme) => <h1 className=theme>We would like check your name :)</h1>
  </ThemeContext.Consumer>
);

Tạo một lớp thành phần Nút để hiển thị các nút, sử dụng static contextType để lấy ngữ cảnh chủ đề và `this.context` để nhận giá trị của ThemeContext:

// Assign contextType to use
// Use `this.context`
class Button extends React.Component 
  static contextType = ThemeContext;
  render() 
    return <button className=this.context>this.props.children</button>;
  

Tạo một thành phần chức năng UserInfo, tương tự như thành phần Câu hỏi, nhưng ở đây chúng tôi sử dụng một UserContext bổ sung để xem thông tin của người dùng:

// Using Consumer Component in Pure Component
const UserInfo = () => (
  <ThemeContext.Consumer>
    (theme) => (
      <UserContext.Consumer>
        (user) => <h2 className=theme>You are user.name?</h2>
      </UserContext.Consumer>
    )
  </ThemeContext.Consumer>
);

Cuối cùng, chúng tôi gọi tất cả chúng vào thành phần Ứng dụng mẹ, được bao bọc bởi thành phần Nhà cung cấp ThemeContext và sau đó được hiển thị bởi ReactDOM.render ():

class App extends React.Component 
  constructor(props) 
    super(props);
    this.state =  theme: "light" ;
    this.toggleTheme = this.toggleTheme.bind(this);
  

  toggleTheme() 
    this.setState( theme: this.state.theme === "light" ? "dark" : "light" );
  

  render() 
    return (
      <ThemeContext.Provider value=this.state.theme>
        <div className="app ">
          <button onClick=this.toggleTheme>Toggle Theme</button>
          <Question />
          <UserInfo />
          <Button>Yes</Button>
          <Button>No</Button>
        </div>
      </ThemeContext.Provider>
    );
  


ReactDOM.render(<App />, document.getElementById("root"));
tim-hieu-khai-niem-context-phan-2
Kết quả hiển thị trong trình duyệt

Như chúng ta thấy, việc tách ngữ cảnh thành chúng sẽ không ảnh hưởng đến nhau, thành phần cần giá trị nào thì cứ gọi ngữ cảnh đó, điều này sẽ giúp chúng ta quản lý dữ liệu tốt hơn và dễ gỡ lỗi hơn.

Re-render Context (danh tính tham chiếu) là gì?

Ngữ cảnh sử dụng một thuật ngữ như tham chiếu danh tính để biết khi nào thành phần đang được kết xuất lại.

tim-hieu-khai-niem-context-phan-2
Danh tính Tham chiếu trong Javascript

Xác thực chỉ đơn giản là một thuộc tính duy nhất của một đối tượng để phân biệt nó với nhau. Vì vậy, Danh tính tham chiếu là một tham chiếu đến thuộc tính của một đối tượng, cụ thể là một tham chiếu đến vị trí của đối tượng trong bộ nhớ, thay vì giá trị thực.

Trong Ngữ cảnh, có một số trường hợp đặc biệt khi vô tình kết xuất lại một thành phần con trong Người tiêu dùng khi Nhà cung cấp chính kết xuất lại, việc kết xuất ngoài ý muốn này thường sẽ tạo ra lỗi.

Ví dụ:

class App extends React.Component 
  render() 
    return (
      <MyContext.Provider value=something: 'something'>
        <Toolbar />
      </MyContext.Provider>
    );
  

Đoạn mã trên sẽ hiển thị lại tất cả Người tiêu dùng mỗi khi Nhà cung cấp hiển thị lại, vì thuộc tính giá trị luôn được khởi tạo thành giá trị mới mỗi khi Nhà cung cấp hiển thị lại. Phương pháp tạo đối tượng trên tương tự như sau:

tim-hieu-khai-niem-context-phan-2
Cách tiếp cận để tạo một đối tượng mới

Để giải quyết vấn đề này, chúng tôi chuyển đổi giá trị của value đến trạng thái của thành phần chính chứa Nhà cung cấp đó như sau:

class App extends React.Component {
  constructor(props) 
    super(props);
    this.state = 
      value: something: 'something',
    ;
  

  render() 
    return (
      <MyContext.Provider value=this.state.value>
        <Toolbar />
      </MyContext.Provider>
    );
  
}

Một số thay đổi của Context sau React 16.3

Trước, React 15 sử dụng PropTypes để khởi tạo một ngữ cảnh.

tim-hieu-khai-niem-context-phan-2

Ví dụ, chúng ta cần chuyển giá trị màu xuống thành phần con Nút và Thông báo để tạo kiểu. Phản ứng 15 sử dụng ngữ cảnh như thế này:

class Button extends React.Component 
  render() 
    return (
      <button style= background: this.context.color >
        this.props.children
      </button>
    );
  


Button.contextTypes = 
  color: PropTypes.string,
;

class Message extends React.Component 
  render() 
    return (
      <div>
        this.props.text <Button>Delete</Button>
      </div>
    );
  


class MessageList extends React.Component 
  getChildContext() 
    return  color: "purple" ;
  

  render() 
    const children = this.props.messages.map((message) => (
      <Message text=message.text />
    ));
    return <div>children</div>;
  


MessageList.childContextTypes = 
  color: PropTypes.string,
;

class App extends React.Component 
  render() 
    return <MessageList messages=[ text: "Context demo" ] />;
  

Để nhận giá trị của ngữ cảnh trong thành phần mẹ được truyền cho các thành phần con, Phản ứng 15 sử dụng childContextTypesgetChildContext. Bên cạnh đó, thành phần Nút khởi tạo một contextTypes để truy cập giá trị của ngữ cảnh. Nếu như contextTypes không được khởi tạo, giá trị của nội dung sẽ là một đối tượng rỗng .

Nhưng từ React 16.3 trở đi, các API ngữ cảnh sẽ thay thế PropTypes.

  • React.createContext (‘defaultValue’) sẽ thay thế cho contextType
  • NS Nhà cung cấp / Người tiêu dùng sẽ thay thế childContextType và getChildContext

Hy vọng bài viết trên sẽ giúp bạn hiểu thêm về Context trong React. Cảm ơn bạn đã ghé thăm bài viết này!

Bài viết có thông tin từ link: https://reactjs.org/docs/context.html

Xem thêm: ReactJS: Tìm hiểu khái niệm về Ngữ cảnh (Phần 1)

CÔNG TY CỔ PHẦN TẬP ĐOÀN TINO

  • Trụ sở chính: L17-11, Tầng 17, Tòa nhà Vincom Center, Số 72 Lê Thánh Tôn, P. Bến Nghé, Q.1, TP.
    Văn phòng đại diện: 42 Trần Phú, P.4, Q.5, TP.HCM
  • Điện thoại: 0364 333 333
    Tổng đài miễn cước: 1800 6734
  • Email: sales@tino.org
  • Trang web: www.tino.org

Tổng hợp bởi VEZ