17 lượt xem

Lifecycle của một component trong React (Phần 1) | Acb-win.com

Do kiến ​​thức về vòng đời của một component trong React khá dài nên Tino Group sẽ chia thành 2 phần để các bạn dễ theo dõi nhé!

Giới thiệu chung về vòng đời của một thành phần trong React

Vòng đời aka vòng đời của một thành phần. Đây là một phần quan trọng của React, giúp bạn hiểu rõ hơn về các bước hoạt động của một Component.

Trong React, vòng đời được coi là vòng đời hoặc chu kỳ của một thành phần, từ khi khởi tạo, cập nhật và kết thúc.

ReactJS: Vòng đời của một thành phần trong React (Phần 1) 10

React cung cấp các phương thức tích hợp mà chúng ta có thể tham gia vào các giai đoạn của một thành phần. Một thành phần được khởi chạy trải qua 4 giai đoạn chính:

  • Khởi tạo
  • hội,, tổ hợp
  • Đang cập nhật
  • Tháo rời

Chúng ta hãy xem xét kỹ hơn các phương pháp vòng đời được bao gồm trong mỗi giai đoạn.

Giai đoạn khởi tạo

ReactJS: Vòng đời của một thành phần trong React (Phần 1) 11

Đây là giai đoạn đầu tiên của một thành phần, bắt đầu với trạng thái khởi tạo, prop, các biến bắt buộc hoặc ràng buộc hàm thông thường. Điều này được thực hiện trong phương pháp constructor ().

Nếu bạn không cần khởi tạo trạng thái và không ràng buộc các hàm khác, bạn không cần viết hàm khởi tạo cho thành phần React.

Phương pháp constructor () được khai báo trên tất cả các phương thức khác và được gọi trước khi thành phần được gắn kết (kết xuất), nó cần một đối số là props.

Khi chúng ta viết một phương thức khởi tạo cho một lớp kế thừa từ React.Component, chúng ta luôn gọi siêu (đạo cụ) trước bất kỳ lệnh nào khác. Điều này sẽ cho phép bạn khởi tạo phương thức khởi tạo và kế thừa các phương thức khác của lớp React.Component cha. Nếu không, giá trị this.props trong hàm này sẽ không được xác định, điều này có thể gây ra lỗi.

Thông thường, hàm constructor () chỉ được sử dụng cho 2 mục đích:

ReactJS: Vòng đời của một thành phần trong React (Phần 1) 12

QUẢNG CÁO

  • Khởi tạo trạng thái cục bộ bằng cách gán giá trị cho trạng thái trên mỗi câu lệnh this.state
  • Sự kiện ràng buộc các chức năng với một cá thể.

SetState () không nên được gọi trong constructor (). Thay vào đó, nếu thành phần của bạn cần sử dụng trạng thái cục bộ, hãy chỉ định giá trị của nó trực tiếp với this.state

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      website: 'Học ReactJS cùng wiki.tino.org'
    };
    this.handleClick = this.handleClick.bind(this);
  }
}

Những điều cần tránh khi sử dụng hàm khởi tạo:

  • Hàm constructor () là nơi duy nhất bạn có thể sử dụng this.state để gán giá trị trực tiếp. Trong tất cả các chức năng khác, bạn phải sử dụng this.setState ().
  • Tránh quản lý tất cả các tác dụng phụ hoặc đăng ký đây.
  • Tránh sử dụng đạo cụ làm giá trị trạng thái. Đây là một sai lầm phổ biến đối với những người mới bắt đầu.
constructor(props) {
 super(props);
 // Don't do this!
 this.state = { color: props.color };
}

Giai đoạn lắp ráp

Bước này được thực hiện sau khi quá trình khởi tạo hoàn tất. Đây là quá trình liên kết phần tử React (Virtual DOM) của một thành phần với DOM thực để hiển thị kết quả cho trình duyệt.

Assembly có 3 phương thức:

  • componentWillMount ()
  • cho()
  • componentDidMount ()

componentWillMount ()

Phương thức này được bắt đầu trước khi một thành phần được gắn kết (tức là được hiển thị) chỉ lần đầu tiên. Nghĩa là, nó bắt đầu sau hàm constructor () và trước hàm render ().

Thận trọng: Không nên cập nhật trạng thái hoặc đạo cụ trong phương pháp này, vì thời gian hiển thị để hiển thị rất ngắn và không có DOM để tương tác vào lúc này. Vì vậy việc cập nhật giá trị ở đây sẽ không hiển thị kết quả mà chúng ta mong muốn.

componentWillMount() {
    // TODO something
}

cho()

Mỗi thành phần yêu cầu hàm render () cái này.

hàm render () chỉ trả về một phần tử Reactvì vậy khi chúng ta phải trả về nhiều phần tử, chúng ta phải nhóm chúng trong một thẻ Ví dụ.

, … hoặc sử dụng thẻ trống <> trong trường hợp bạn không muốn hiển thị một thẻ khác.

render() {
    return (
      <>
        <h1>Lifecycle của một component trong React</h1>
        <h6>Author: Tran Tan Qui</h6>
      </>
    );
  }

Hàm render () mô tả những gì sẽ được hiển thị trong trình duyệt. Có 2 trường hợp để bắt đầu hàm render ():

  • Trường hợp 1: khi chúng ta gọi hàm setState để cập nhật trạng thái trong component.
  • Trường hợp 2: Khi thành phần là con có các đạo cụ do thành phần mẹ truyền qua sẽ bị sửa đổi.

componentDidMount ()

Hàm này được gọi sau hàm render (), tức là sau khi các phần tử là kết xuất thành công lần đầu tiên. Tức là các phần tử thành phần hiện đã được liên kết với cây DOM và đây là nơi tốt nhất để chúng ta xử lý các tác dụng phụ như gọi API, thay đổi trạng thái, chống đỡ … hoặc thiết lập bất kỳ cài đặt nào khác. quên hủy các hoạt động đăng ký trong hàm componentWillUnmount ()).

Xem ví dụ sau:

class WikiPost extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      title: "Title",
    };
  }

  componentWillMount() {
    console.log("Component will mount!");
  }

  componentDidMount() {
    console.log("Component did mount!");
    this.getListPost();
  }

  getListPost = () => {
    // TODO: Call API, setState() ...
  };

  render() {
    console.log("Render thành công");
    return (
      <>
        <h1>Lifecycle của một component trong React</h1>
        <h6>Author: Tran Tan Qui</h6>
      </>
    );
  }
}

Chúng ta bật F12, tab Console sẽ thấy thứ tự khởi động của 3 cách lắp theo ví dụ:

ReactJS: Vòng đời của một thành phần trong React (Phần 1) 13

Cập nhật giai đoạn

Đây là giai đoạn thứ ba sau khi thành phần đã được kết xuất thành công lần đầu tiên. Trong giai đoạn này, dữ liệu trạng thái và đạo cụ sẽ được cập nhật để đáp ứng các sự kiện mà người dùng yêu cầu. Điều này dẫn đến một kết xuất mới của thành phần.

Tương ứng với nó, chúng ta có 4 phương pháp chính:

  • componentWillReceiveProps ()
  • shouldComponentUpdate ()
  • componentWillUpdate ()
  • componentDidUpdate ()

componentWillReceiveProps ()

ReactJS: Vòng đời của một thành phần trong React (Phần 1) 14

Hàm này sẽ được khởi động khi một thành phần nhận được một đạo cụ mới từ thành phần mẹ, hàm này nhận một đối số từ nextProps.

Nếu chúng ta muốn cập nhật trạng thái theo các thay đổi đối với đạo cụ, bây giờ chúng ta cần so sánh giá trị this.props và nextProps, sau đó sử dụng this.setState () để cập nhật.

Nếu một thành phần mẹ được vẽ lại, thành phần con cũng sẽ chơi, ngay cả khi đạo cụ của thành phần con không thay đổi. Sau đó, hãy đảm bảo so sánh giữa đạo cụ hiện tại và đạo cụ tiếp theo đã thay đổi để quyết định có hiển thị lại hay không.

shouldComponentUpdate ()

ReactJS: Vòng đời của một thành phần trong React (Phần 1) 15

Tính năng này giúp tăng hiệu suất của React, để React biết liệu việc kết xuất có bị ảnh hưởng bởi các đạo cụ và trạng thái hiện tại hay không. Nếu nó trả về false, các phương thức đằng sau nó như componentWillUpdate (), render (), componentDidUpdate () sẽ không được thực thi. Theo mặc định, hàm này trả về true để thực hiện các chức năng đằng sau nó.

Hàm này nhận hai đối số là nextProps và nextState, bây giờ chúng ta so sánh các giá trị của this.props và nextProps, this.state và nextState và trả về false để yêu cầu React bỏ qua cập nhật DOM. Và khi hàm này trong thành phần mẹ trả về false, nó không ảnh hưởng đến việc hiển thị thành phần con khi trạng thái của nó thay đổi.

React không khuyến khích so sánh “sâu” hoặc sử dụng JSON.stringify () trong hàm này. Nó không hiệu quả và làm giảm hiệu suất.

componentWillUpdate ()

ReactJS: Vòng đời của một thành phần trong React (Phần 1) 16

Hàm này được gọi trước khi kết xuất khi thành phần nhận được một trạng thái hoặc chỗ dựa mới. Hàm này thực hiện công việc chuẩn bị trước khi cập nhật giao diện người dùng và được sử dụng cho lần hiển thị thứ hai và hơn thế nữa. Tương tự như hàm componentWillMount (), nó ít tương tác hơn trong ứng dụng, vì setState chủ yếu được gọi trong hàm componentWillReceiveProps ().

componentDidUpdate ()

ReactJS: Vòng đời của một thành phần trong React (Phần 1) 17

Hàm này được gọi ngay sau khi kết xuất thành công (từ lần kết xuất thứ 2 trở đi, để yêu cầu kết xuất đầu tiên, hãy sử dụng componentDidMount ()). Hàm này được sử dụng để xử lý DOM khi DOM đã được cập nhật. Hàm này nhận 3 đối số là prevProps, prevState, snapshot (khi có getSnapshotBeforeUpdate ()).

Đây là nơi lý tưởng để thực hiện các yêu cầu về mạng miễn là chúng ta so sánh các đạo cụ hiện tại với các đạo cụ trước đó. Chúng ta có thể gọi setState () ngay trong hàm này nhưng nó phải có khả năng so sánh dữ liệu hiện tại và dữ liệu trước đó, Nếu không có các điều kiện wrapper, nó sẽ dẫn đến một vòng lặp vô hạn của thành phần (vòng lặp vô hạn)..

Nếu thành phần sử dụng hàm getSnapshotBeforeUpdate (), giá trị trả về được truyền vào đối số thứ 3 của componentDidUpdate () là “snapshot”, nếu không giá trị của nó sẽ là “undefined”.

componentDidUpdate(prevProps) {
  // Typical usage (don't forget to compare props):
  if (this.props.userID !== prevProps.userID) {
    this.fetchData(this.props.userID);
  }
}

Giai đoạn tháo rời

Đây là bước cuối cùng cũng như chấm dứt vòng đời trong một thành phần. Khi tất cả các hoạt động kết thúc và chúng ta phải tiến hành gỡ bỏ DOM (thành phần được xóa khỏi cây DOM). Giai đoạn này chỉ có 1 phương pháp, đó là thành phần WillUnmount ()

SetState () không nên được gọi trong hàm này vì thành phần sẽ không bao giờ hiển thị lại. Khi thành phần đã bị xóa khỏi DOM, nó sẽ không bao giờ hiển thị lại. Tính năng này thường được sử dụng để hủy các thao tác không cần thiết như quản lý thời gian ngừng hoạt động của bộ hẹn giờ, ngắt kết nối mạng hoặc xóa các đăng ký đã tạo trước đó.

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

class ChildComponent extends React.Component {
  constructor() {
    super();
    this.state = { val: 0 };
    this.update = this.update.bind(this);
  }
  update() {
    this.setState({ val: this.state.val + 1 });
  }
  componentWillMount() {
    console.log("mounting");
  }
  render() {
    console.log("rendering!");
    return (
      <button onClick={this.update}>
        {this.state.val}
      </button>
    );
  }
  componentDidMount() {
    console.log("mounted");
  }
  componentWillUnmount() {
    console.log("bye!");
  }
}
class ParentComponent extends React.Component {
  mount() {
    ReactDOM.render(<ChildComponent />, document.getElementById("a"));
  }
  unmount() {
    ReactDOM.unmountComponentAtNode(document.getElementById("a"));
  }
  render() {
    return (
      <div>
        <h1>How to Mount/Unmount a Component in React.js</h1>
        <hr />
        <button onClick={this.mount.bind(this)}>Mount</button>
        <button onClick={this.unmount.bind(this)}>Unmount</button>
        <div ></div>
      </div>
    );
  }
}

Trong ví dụ trên, khi chúng ta nhấp vào nút “Mount”, React sẽ gắn ChildComponent vào thẻ div có id = “a” trên DOM, do đó trình duyệt sẽ hiển thị nội dung ChildComponent. Sau đó, chúng ta nhấp vào nút “Unmount”, React sẽ loại bỏ ChildComponent khỏi DOM và các phần tử của nó cũng sẽ biến mất khỏi trình duyệt.

Trên đây là chi tiết về các phương thức vòng đời của một thành phần. Nhưng sau phiên bản React 16.3, một số hàm không cần thiết sẽ được đổi tên để phù hợp với ý nghĩa lập trình.. Trong bài viết sau, chúng ta sẽ tìm hiểu cách React cập nhật vòng đời!

Đọc tiếp Phần 2: Vòng đời của thành phần trong React

Bài viết có thông tin từ liên kết: https://en.reactjs.org/docs/react-component.html

CÔNG TY TNHH TẬP ĐOÀN TINO

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

READ  Top 08 Vay tín chấp theo Lương chuyển khoản lãi suất thấp | Acb-win.com