Các thành phần dựa trên lớp ReactJS

19/09/2022 01:56

Các thành phần dựa trên lớp React là thành phần của hầu hết các ứng dụng web hiện đại được tích hợp trong ReactJS.

Các thành phần dựa trên lớp React là thành phần của hầu hết các ứng dụng web hiện đại được tích hợp trong ReactJS. Các thành phần này là các lớp đơn giản (được tạo thành từ nhiều chức năng bổ sung chức năng cho ứng dụng). Tất cả các thành phần dựa trên lớp là các lớp con cho lớp Thành phần của ReactJS.

Ví dụ: Chương trình chứng minh việc tạo các thành phần dựa trên lớp. Tạo một ứng dụng React và chỉnh sửa App.js thành:

Tên tệp- App.js:

javascript

import React from "react";
 
class App extends React.Component {
  render() {
    return <h1>GeeksForGeeks</h1>;
  }
}
 
export default App;

Đầu ra:

Khi một thành phần được khai báo, nó có thể được sử dụng trong các thành phần khác. Chương trình để chứng minh việc sử dụng các thành phần dựa trên lớp trong các thành phần khác.

Ví dụ: Mở tệp App.js và thay thế mã bằng mã bên dưới.

javascript

import React from "react";
 
class Sample extends React.Component {
  render() {
    return <h1>A Computer Science Portal For Geeks</h1>;
  }
}
 
class App extends React.Component {
  render() {
    return <Sample />;
  }
}
 
export default App;

Đầu ra:

Đặc điểm chính của các thành phần dựa trên lớp giúp phân biệt chúng với các thành phần chức năng là chúng có quyền truy cập vào trạng thái quy định hành vi và diện mạo hiện tại của thành phần (Sau đó, với React Hooks được giới thiệu trong phiên bản 16.8, chúng ta có thể khai báo trạng thái thành phần mà không cần khai báo một lớp). Trạng thái này có thể được sửa đổi bằng cách gọi hàm setState () . Một hoặc nhiều biến, mảng hoặc đối tượng được xác định là một phần của trạng thái có thể được sửa đổi tại một thời điểm bằng hàm setState () .

Ví dụ: Chương trình để chứng minh việc sử dụng trạng thái trong các thành phần dựa trên lớp. Mở tệp App.js và thay thế mã bằng mã bên dưới.

javascript

import React from "react";
 
class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = { change: true };
  }
  render() {
    return (
      <div>
        <button
          onClick={() => {
            this.setState({ change: !this.state.change });
          }}
        >
          Click Here!
        </button>
        {this.state.change ? (
          <h1>Welcome to GeeksforGeeks</h1>
        ) : (
          <h1>A Computer Science Portal for Geeks</h1>
        )}
      </div>
    );
  }
}
 
export default App;

Đầu ra:

Dữ liệu được chuyển đến các thành phần khác với sự trợ giúp của đạo cụ. Các đạo cụ hoạt động tương tự đối với tất cả các thành phần trong ReactJS dù chúng dựa trên lớp hoặc chức năng. Đạo cụ luôn được truyền từ thành phần mẹ sang thành phần con. ReactJS không cho phép một thành phần sửa đổi các đạo cụ của chính nó như một quy tắc. Cách duy nhất để sửa đổi đạo cụ là thay đổi đạo cụ được chuyển từ thành phần mẹ sang thành phần con. Điều này thường được thực hiện bằng cách chuyển một tham chiếu đến một hàm trong thành phần mẹ, điều này sẽ thay đổi các đạo cụ được chuyển cho thành phần con.

Ví dụ: Chương trình chứng minh việc sử dụng đạo cụ trong các thành phần dựa trên lớp. Mở tệp App.js và thay thế mã bằng mã bên dưới.

javascript

import React from "react";
 
class App extends React.Component {
  render() {
    return <h1>{this.props.data}</h1>;
  }
}
 
class propsExample extends React.Component {
  constructor(props) {
    super(props);
    this.state = { change: true };
  }
  render() {
    return (
      <div>
        <button
          onClick={() => {
            this.setState({ change: !this.state.change });
          }}
        >
          Click Here!
        </button>
        {this.state.change ? (
          <Pass data="Welcome to GeeksforGeeks" />
        ) : (
          <Pass data="A Computer Science Portal for Geeks" />
        )}
      </div>
    );
  }
}
 
export default App;

Đầu ra:

Các thành phần dựa trên lớp có quyền truy cập vào các hàm vòng đời như componentWillMount () , componentDidMount () , componentWillReceiveProps () , componentWillUpdate () , shouldComponentUpdate () , render () và componentWillUnmount () ;. Các hàm vòng đời này được gọi ở các giai đoạn khác nhau của vòng đời và được sử dụng cho nhiều mục đích khác nhau như thay đổi trạng thái hoặc thực hiện một số công việc (như tìm nạp dữ liệu từ một API bên ngoài). Chúng cũng được gọi là móc vòng đời .

Ví dụ: Chương trình chứng minh việc sử dụng các móc vòng đời. Mở tệp App.js và thay thế mã bằng mã bên dưới.

javascript

import React from "react";
 
class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = { text: "Welcome!" };
  }
 
  componentWillMount() {
    this.setState({
      text: "GeeksforGeeks",
    });
  }
 
  render() {
    return <h1>{this.state.text}</h1>;
  }
}
 
export default App;

Đầu ra:

Các thành phần dựa trên lớp chậm hơn một chút so với các thành phần chức năng của chúng. Sự khác biệt là rất nhỏ và hầu như không đáng kể đối với các ứng dụng web nhỏ hơn - mặc dù sự khác biệt về hiệu suất tăng lên khi số lượng các thành phần trong ứng dụng tăng lên. Hơn nữa, các thành phần dựa trên lớp liên quan đến việc viết mã nhiều hơn ở phần của lập trình viên, khiến chúng hơi kém hiệu quả hơn khi sử dụng.

Các thành phần dựa trên lớp ReactJS

Tin tức cùng chủ đề