ReactJS: Lifecycle của 1 element trong React (Phần 1)

Vì tri thức về Lifecycle của 1 element trong React khá dài nên Tino Group sẽ chia thành 2 phần cho quý khách dễ theo dõi nhé!

Giới thiệu chung về Lifecycle của 1 element trong React

Lifecycle hay còn gọi là vòng đời của 1 element. Đây là 1 phần quan yếu trong React, giúp bạn hiểu rõ hơn về những bước vận hành của 1 Part.

Trong React, lifecycle được xem là vòng đời hay chu kì của 1 element, từ lúc khởi tạo, cập nhật và kết thúc.

React phân phối những phương thức được xây dựng sẵn để chúng ta có thể tham dự xử lý vào những giai đoạn của 1 element. 1 element được khởi chạy sẽ trải qua 4 giai đoạn chính:

  • Initialization
  • Mouting
  • Updating
  • Unmouting

Chúng ta cùng tìm hiểu chi tiết về những lifecycle strategies có trong mỗi gia đoạn nhé.

Giai đoạn Initialization

Đây là giai đoạn trước tiên của 1 element, khởi đầu bằng bí quyết khởi tạo state, props, những biến cần thiết hoặc bind những perform thường. Điều này thực hành bên trong phương thức constructor().

Giả dụ chúng ta ko cần khởi tạo state và ko bind những hàm khác, thì ta ko cần cần viết 1 hàm constructor cho React element.

Methodology constructor() được khai báo phía trên hầu hết những phương thức khác, và được gọi trước lúc element được mount (render), nó nhận 1 argument là props.

Lúc viết 1 constructor cho 1 class được kế thừa từ React.Part, ta luôn luôn gọi tremendous(props) trước mọi câu lệnh khác. Điều này sẽ cho phép khởi tạo phương thức constuctor và kế thừa những phương thức khác của lớp cha là React.Part. Giả dụ ko thì giá trị this.props ở hàm này sẽ là undefined, có thể dẫn tới lỗi.

Thông thường, hàm constructor() chỉ được dùng có 2 mục đích là:

  • Khởi tạo native state bằng bí quyết gán giá trị cho state bởi câu lệnh this.state
  • Binding những hàm sự kiện vào 1 occasion.

Ko nên gọi setState() trong constructor(). Thay vì đấy, ví dụ element của bạn cần dùng native state thì hãy gán giá trị của nó quản lý bằng this.state

class App extends React.Part { constructor(props) { tremendous(props); this.state = { web site: ‘Học ReactJS cùng wiki.tino.org’ }; this.handleClick = this.handleClick.bind(this); } }

Những điều cần hạn chế lúc dùng hàm constructor:

  • Hàm constructor() là nơi duy nhất bạn có thể dùng this.state để gán giá trị quản lý. Trong hầu hết những hàm khác, bạn cần dùng this.setState().
  • Hạn chế xử lý hầu hết những side-effect hoặc subscriptions trong đây.
  • Hạn chế dùng props khiến giá trị của state. Đây là 1 lỗi hay gặp cần có những bạn mới khởi đầu.
Xem Thêm  Malicious software program là gì? Tìm hiểu chi tiết về Malicious software program

constructor(props) { tremendous(props); // Do not do that! this.state = { coloration: props.coloration }; }

Gia đoạn Mouting

Giai đoạn này được thực hành sau lúc khởi tạo xong. Đây là quá trình gắn React factor (Digital DOM) của 1 element vào Actual DOM để mô tả kết quả lên trình thông qua.

Mouting có 3 phương thức là:

  • componentWillMount()
  • render()
  • componentDidMount()

componentWillMount()

Phương thức này được khởi chạy trước lúc 1 element được mount (hay còn gọi là render) lần trước tiên duy nhất. Nghĩa là nó khởi chạy sau hàm constructor() và trước hàm render().

Chú ý: Ko nên cập nhật giá trị state hoặc props trong phương thức này, vì thời kì chuẩn bị render tới lúc render siêu ngắn, đồng thời lúc này chưa có DOM nào để tương tác. Nên việc cập nhật giá trị ở đây sẽ ko hiển thị kết quả như ta mong muốn.

componentWillMount() { // TODO one thing }

render()

Mỗi element bắt buộc cần có hàm render() này.

Hàm render() return duy nhất 1 React factor, nên lúc cần trả về nhiều components thì ta cần gom nhóm chúng lại thành 1 tag khác dí dụ như <type>, <div>… hoặc dùng thẻ rỗng <></> cho trường hợp bạn ko muốn render thêm 1 thẻ khác.

render() { return ( <> <h1>Lifecycle của 1 element trong React</h1> <h6>Creator: Tran Tan Qui</h6> </> ); }

Hàm render() mô tả những gì cần được hiển thị lên trình thông qua. Có 2 trường hợp để hàm render() được khởi chạy:

  • Trường hợp 1: Lúc ta gọi hàm setState để cập nhật lại state trong element.
  • Trường hợp 2: Lúc element đấy là con có props được truyền vào từ element cha bị thay đổi.

componentDidMount()

Hàm này được gọi sau hàm render(), nghĩa là sau lúc những factor được render thành công lần trước tiên. Tức là lúc này những factor của element đã được gắn vào cây DOM, và đây là nơi được lựa chọn phải chăng nhất để chúng ta có thể xử lý những aspect impact như gọi API, thay đổi state, props… hoặc thiết lập bất kì những subscriptions (nhưng đừng quên hủy những tác vụ subscription trong hàm componentWillUnmount() nhé).

Xem dí dụ sau:

class WikiPost extends React.Part { constructor(props) { tremendous(props); this.state = { title: “Title”, }; } componentWillMount() { console.log(“Part will mount!”); } componentDidMount() { console.log(“Part did mount!”); this.getListPost(); } getListPost = () => { // TODO: Name API, setState() … }; render() { console.log(“Render thành công”); return ( <> <h1>Lifecycle của 1 element trong React</h1> <h6>Creator: Tran Tan Qui</h6> </> ); } }

Chúng ta bật F12, tab Console thì sẽ thấy được thứ tự khởi chạy của 3 methodology mouting theo dí dụ:

Giai đoạn Updating

Đây là giai đoạn thứ 3 sau lúc element đã render thành công lần trước tiên. Trong giai đoạn này, dữ liệu của state và props sẽ được cập nhật để đáp ứng có những occasions theo bắc buộc của khách hàng. Điều này dẫn tới việc re-render ở element.

Xem Thêm  Cartesi (CTSI) là gì? Toàn tập về tiền điện tử CTSI

Tương ứng có nó ta có 4 phương thức chính:

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

componentWillReceiveProps()

Hàm này sẽ khởi chạy lúc 1 element nhận 1 props mới từ element cha, hàm này có nhận 1 argument là nextProps.

Giả dụ ta muốn cập nhât lại state để đáp ứng những thay đổi của props, lúc này chúng ta cần so sánh giá trị this.props và nextProps, sau đấy dùng this.setState() để cập nhật.

Giả dụ 1 element cha được re-render thì element con cũng sẽ re-render theo, thậm chí props của element con ko thay đổi. Ví thế hãy chắc rằng việc so sánh props hiện tại và props kế tiếp có thay đổi hay ko để quyết định việc re-render.

shouldComponentUpdate()

Hàm này giúp nâng cao hiệu năng của React, để React biết được việc render có bị tương tác bởi props và state hiện tại hay ko. Giả dụ nó return false thì những phương thức phía sau nó như componentWillUpdate(), render(), componentDidUpdate() sẽ ko được thực hành. Default hàm này return true để chạy được những hàm phía sau nó.

Hàm này nhận 2 arguments là nextProps và nextState, lúc này ta so sánh giá trị của this.props và nextProps, this.state và nextState và return false để nói cho React biết là bỏ qua việc replace DOM. Và lúc hàm này ở element cha return false thì ko tương tác tới việc re-render của element con lúc state của nó thay đổi.

React ko khuyến khích việc so sánh ‘deep’ hoặc dùng JSON.stringify() trong hàm này. Nó kém hiệu quả và khiến giảm hiệu năng.

componentWillUpdate()

Hàm này được gọi trước lúc render lúc element nhận state hoặc props mới. Hàm này khiến công tác chuẩn bị trước lúc việc replace lại UI xảy ra, và nó được dùng cho lần render thứ 2 trở đi. Cũng tương tự hàm componentWillMount(), nó ít được tương tác trong utility, vì việc setState gần như được gọi trong hàm componentWillReceiveProps()

componentDidUpdate()

Hàm này được gọi ngay sau lúc đã re-render thành công (render lần thứ 2 trở đi, để ứng dụng cho lần render trước tiên thì dùng hàm componentDidMount()). Hàm này được dùng để xử lý DOM lúc DOM đã được cập nhật. Hàm này nhận 3 argument là prevProps, prevState, snapshot (lúc có getSnapshotBeforeUpdate()).

Đây là nơi hoàn hảo để thực hành những request community miễn là ta so sánh props hiện tại có props trước đấy. Ta có thể gọi setState() ngay trong hàm này nhưng nó cần nằm trong điều kiện so sánh dữ liệu hiện tại và trước đấy, ví dụ ko có điều kiện bọc bên cạnh thì sẽ dẫn tới vòng lặp bất tận của element (infinite loop).

Xem Thêm  Troy Community (TROY) là gì? Toàn tập về tiền điện tử TROY

Giả dụ element có dùng hàm getSnapshotBeforeUpdate(), thì giá trị trả về sẽ được truyền ở argument thứ 3 của componentDidUpdate() là “snapshot”, ví dụ ko thì giá trị của nó sẽ là ‘undefined’.

componentDidUpdate(prevProps) { // Typical utilization (do not forget lớn evaluate props): if (this.props.userID !== prevProps.userID) { this.fetchData(this.props.userID); } }

Giai đoạn Unmounting

Đây là bước cuối cùng cũng như kết thúc 1 của lifecycle trong 1 element. Lúc tất những tác vụ hoàn thành và ta cần tiến hành unmount DOM (element bị take away khỏi cây DOM). Gia đoạn này chỉ có 1 phương thức là componentWillUnmount()

Ko nên gọi setState() ở hàm này bởi vì element sẽ ko bao giờ re-render. 1 lúc element đã bị take away khỏi DOM thì sẽ ko được render lại lần nào nữa. Hàm này thường dùng để clear những thao tác ko cần thiết như xử lý ngưng bộ hẹn giờ, ngắt kết nối mạng, hoặc xóa những subscriptions được tạo trước đấy.

Xét dí dụ sau:

class ChildComponent extends React.Part { constructor() { tremendous(); this.state = { val: 0 }; this.replace = this.replace.bind(this); } replace() { this.setState({ val: this.state.val + 1 }); } componentWillMount() { console.log(“mounting”); } render() { console.log(“rendering!”); return ( <button onClick={this.replace}> {this.state.val} </button> ); } componentDidMount() { console.log(“mounted”); } componentWillUnmount() { console.log(“bye!”); } } class ParentComponent extends React.Part { mount() { ReactDOM.render(<ChildComponent />, doc.getElementById(“a”)); } unmount() { ReactDOM.unmountComponentAtNode(doc.getElementById(“a”)); } render() { return ( <div> <h1>How lớn Mount/Unmount a Part in React.js</h1> <hr /> <button onClick={this.mount.bind(this)}>Mount</button> <button onClick={this.unmount.bind(this)}>Unmount</button> <div id=”a”></div> </div> ); } }

Dí dụ trên, lúc chúng ta click on vào nút “Mount” thì React sẽ gắn ChildComponent vào trong thẻ div có id=”a” trên DOM, lúc đấy trình thông qua sẽ hiển thị nội dung của ChildComponent. Sau đấy chúng ta click on nút “Unmount”, React sẽ xóa ChildComponent ra khỏi DOM và những factor của nó cũng sẽ biến mất khỏi trình thông qua.

Phía trên là chi tiết về những phương thức của 1 lifecycle của element. Nhưng sau phiên bản React 16.3 thì có 1 số hàm ko cần thiết sẽ được đổi tên lại cho ưu thích có ý nghĩa lập trình. Trong bài viết sau, chúng ta sẽ cùng tìm hiểu xem React cập nhật lifecycle như thế nào nhé!

Xem tiếp phần 2: Lifecycle của 1 element trong React

Bài viết có tham khảo thông tin từ hyperlink: https://vi.reactjs.org/docs/react-component.html

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

  • Trụ sở chính: L17-11, Tầng 17, Tòa nhà Vincom Middle, Số 72 Lê Thánh Tôn, Phường Bến Nghé, Quận 1, Thành phố Hồ Chí MinhVăn phòng đại diện: 42 Trần Phú, Phường 4, Quận 5, Thành phố Hồ Chí Minh
  • Điện thoại: 0364 333 333Tổng đài miễn phí tổn: 1800 6734
  • Electronic mail: gross [email protected]
  • Web site: www.tino.org