😍Sử dụng Context trong ReactJS (ok)

Lấy nội dung ở phần Lý Thuyết vềContext

Chúng ta sẽ sử dụng context theo 3 bước cụ thể:

1. Khởi tạo object context bằng phương thức React.createContext(), sau đó chúng ta sẽ nhận được 1 object bao gồm các thuộc tính quan trọng như Provider và Consumer.

2. Sử dụng Provider bọc quanh các component, và truyền giá trị vào props value

3. Thêm Consumer vào bất cứ đâu mà bạn muốn chia sẻ context miễn là ở bên trong Provider, bạn có thể lấy gía trị của context thông qua props.chirlden.

Khởi tạo một Context Object, giá trị của defaultValue là giá trị mặc định của props value trong Provider.

Mỗi Context Object phải đi kèm với một Provider, nó cho phép bạn nhận về sự thay đổi của context.

Một React component được khởi chạy mỗi khi gía trị của context thay đổi, và nhận về giá trị của context đó.

Context.displayName Đặt tên cho Context, tên này sẽ được hiện thị trong DevTools.

contextType là một thuộc tính của class được tạo bởi React.createContext() được dùng để lấy giá trị của context.

Class

src\App.jsx

import { Component, createContext } from 'react';
//Khởi tạo môt
const NumberContext = createContext();
// !Part 1
class UpdateNumber extends Component {
  render() {
    return (
      <button onClick={() => {
        console.log(this.context.update())
      }}>Update Number</button>
    );
  }
}
UpdateNumber.contextType = NumberContext;
// Part 1!
// Hoặc bạn có thể sử dụng code sau để thay thế.
// !Part 1 --
class UpdateNumber extends Component {
  static contextType=NumberContext
  render() {
    return (
      <button onClick={() => {
        console.log(this.context.update())
      }}>Update Number</button>
    );
  }
}
// !Part 2
class ShowNumber extends Component {
  render() {
    return (
      <p>{this.context.number}</p>
    );
  }
}
ShowNumber.contextType = NumberContext;
// Part 2!
// Hoặc bạn có thể sử dụng code sau để thay thế.
// !Part 2 --
class ShowNumber extends Component {
  static contextType=NumberContext
  render() {
    return (
      <p>{this.context.number}</p>
    );
  }
}
// Part 2! --
export default class ContextComponent extends Component {
  constructor(props) {
    super(props);
    this.state = {
      number: 1,
    };
  }
  updateNumber = () => {
    this.setState({
      number: Math.random(),
    });
  };
  render() {
    return (
      <NumberContext.Provider
        value={{
          number: this.state.number,
          update: this.updateNumber,
        }}
      >
        <NumberContext.Consumer>
          {() => (
            <>
              <ShowNumber />
              <UpdateNumber />
            </>
          )}
        </NumberContext.Consumer>
      </NumberContext.Provider>
    );
  }
}

Hoặc sử dụng như sau vì chúng ta không sử dụng props.child có thể loại bỏ cũng được

src\App.jsx

import { Component, createContext } from 'react';
const NunberContext = createContext();
class ShowNumber extends Component {
  render() {
    return (
      <div>
        {this.context.number}
      </div>
    )
  }
}
ShowNumber.contextType = NunberContext;
class UpdateNumber extends Component {
  render() {
    return (
      <div>
        <button onClick={() => this.context.update()}>Update</button>
      </div>
    )
  }
}
UpdateNumber.contextType = NunberContext;
class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      number: 1
    }
  }
  updateNumber = () => {
    this.setState({
      number: Math.random()
    });
  }
  render() {
    return (
      <NunberContext.Provider value={{ number: this.state.number, update: this.updateNumber }}>
        <ShowNumber />
        <UpdateNumber />
      </NunberContext.Provider>
    )
  }
}
export default App;

Viết lại theo cách mới hay hơn

src\App.tsx

import { Component } from 'react';
import { Provider } from './NumberContext';
import ShowNumber from './ShowNumber';
import UpdateNumber from './UpdateNumber';
type State = {
  number: number
}
class App extends Component<any, State> {
  constructor(props: any) {
    super(props);
    this.state = {
      number: 1
    }
  }
  updateNumber = () => {
    this.setState({
      number: Math.random()
    })
  }
  render() {
    return (
      <Provider value={{number: this.state.number, update: this.updateNumber }}>
        <ShowNumber />
        <UpdateNumber />
      </Provider>
    );
  }
}
export default App;

src\ShowNumber.tsx

import { Component } from 'react';
import {NumberContext} from './NumberContext';
type State = {
  number: number
}
class ShowNumber extends Component<any,State> {
  static contextType = NumberContext;
  context: any;
  render() {
    return (
      <p>{this.context.number}</p>
    );
  }
}
export default ShowNumber;

src\UpdateNumber.tsx

import React, { Component } from 'react';
import {NumberContext} from './NumberContext';
class UpdateNumber extends Component {
  static contextType = NumberContext;
  context: any;
  render() {
    return (
      <div>
        <button onClick={this.context.update}>Click Me</button>
      </div>
    );
  }
}
export default UpdateNumber;

src\NumberContext.ts

import { createContext } from 'react';
export const NumberContext = createContext(0);
export const Provider:any = NumberContext.Provider;
export const Consumer:any = NumberContext.Consumer;