Typescript and React: What’s React.Component<P, S> mean?

https://devblog.xero.com/typescript-and-react-whats-react-component-p-s-mean-cfddc65f81e1

Sử dụng Typecript với React mang lại cho chúng ta một số lợi thế khi gõ thực sự tốt. Tuy nhiên, một trong những nhược điểm là có nhiều tấm boilerplate. Một dòng của boilerplate là React.Component . Ở đây, tôi sẽ nhanh chóng chạy nó là gì và nó hoạt động như thế nào. Hy vọng rằng, phần bổ sung ngữ cảnh này sẽ sớm giúp bạn hiểu được điều đó.

First up, P:

Trong mã của chúng tôi, chúng tôi có các thành phần giống như bên dưới. Thành phần React này đang mở rộng lớp React.Component đến từ gói React.

import React from 'react';
interface IYoProps {
  name: string;
}
class YoComponent extends React.Component<IYoProps>{
  render(){
    return <div>Yo { this.props.name }</div>
  }
}
export default YoComponent;

Đây là nơi mà việc biết IYoProps có nghĩa là gì là quan trọng. IYoProps là kiểu đánh máy cho các đạo cụ mà chúng tôi mong đợi được chuyển vào YoComponent của chúng tôi, theo mặc định, nó có kiểu gõ trống {} - trừ khi chúng tôi cung cấp. Nếu chúng ta muốn ghi đè hàm tạo, chúng ta phải chuyển đạo cụ cho super. Vì chúng tôi đang mở rộng React.Component nên cũng có các phương thức vòng đời khác mà chúng tôi có thể ghi đè, chẳng hạn như componentDidMount.

import React from 'react';
interface IYoProps {
  name: string;
}
export class YoComponent<IYoProps>{
  constructor(props){
    super(props);
  }
  render(){
    return <div>Yo { this.props.name }</div>
  }
  componentDidMount(){
    console.log("Yo, I mounted");
  }
}
export default YoComponent;

Trừ khi chúng ta làm cho tên vô hiệu bằng cách thay đổi nó thành tên? bất cứ lúc nào chúng ta muốn sử dụng YoComponent, chúng ta phải truyền vào một đối tượng tuân theo IYoProps.

Vậy thì S này là gì? Các thành phần React có khả năng chứa trạng thái riêng của chúng. Tôi đã phát triển thành phần React để giúp hiển thị điều này. Thành phần của chúng tôi bây giờ sẽ theo dõi tần suất một nút được nhấp.

import React from 'react';
interface IYoProps {
  name: string;
}
interface IYoState {
  count: number;
}
class YoComponent extends React.Component < IYoProps, IYoState > {
  constructor(props:IYoProps) {
    super(props);
    this.state = { count: 0 };
  }
  render() {
    return (<button onClick={ this.increaseCounter} >
      <p>Current count: { this.state.count }</p>
    </button>);
  };
  increaseCounter() {
    this.setState({ count: this.state.count + 1 })
  }
}
export default YoComponent;

Bởi vì chúng tôi đã thêm IYoState vào React.Component , chúng tôi đã thực thi đánh máy: khi truy cập this.state.count khi sử dụng this.setState () Chúng ta cũng nên đặt cho React một trạng thái mặc định, điều mà tôi đã thực hiện trong constructor. Cũng giống như giao diện cho đạo cụ, trạng thái mặc định là {}. - Hơn một triệu doanh nghiệp nhỏ và các cố vấn của họ đang tìm kiếm các ứng dụng đám mây tốt nhất tích hợp với Xero. Hợp tác với chúng tôi và chúng tôi sẽ đảm bảo họ tìm thấy thông tin của bạn.