Sean's Blog

An image showing avatar

Hi, I'm Sean

這裡記錄我學習網站開發的筆記
歡迎交流 (ゝ∀・)b

LinkedInGitHub

React Class-based Components 的生命週期(Lifecycle)

本文介紹 React 的 Lifecycle,這是只有 Class-based Components 才有的喔。

componentDidMount()

元件渲染完成後執行一次。

= 等於 Vue.js mounted Hook

= 等於 React useEffect Hook 的 useEffect(..., []) 形式

Example: Get loaded data from server

1// Only run once (when the component initially mounted)
2componentDidMount() {
3  // Send http request...
4  this.setState({
5    filteredUsers: DUMMY_USERS,
6  });
7}
8

componentDidUpdate()

當有狀態 (State) 被修改時執行(在元件更新完成、執行完 render() 重新繪製後)。

= 等於 Vue.js updated Hook

= 等於 React useEffect Hook 的 useEffect(..., [someValue]) 形式

Example: Replace useEffect with componentDidUpdate

1// componentDidUpdate 提供渲染前最後的 Props 與 State
2componentDidUpdate(prevProps, prevState) {
3  // 加入 if 判斷避免無限迴圈
4  if (prevState.searchTerm !== this.state.searchTerm) {
5    this.setState({
6      filteredUsers: DUMMY_USERS.filter((user) =>
7        user.name.includes(this.state.searchTerm)
8      ),
9    });
10  }
11}
12

componentWillUnmount()

當元件即將從 DOM 被移除前(重新渲染前),還需要執行一些事情的時候,就會執行一次。這也是每次 useEffect 運行前都會運行的清理功能 (Cleanup Function)。

= 等於 Vue.js beforeUnmount Hook

= 等於 React useEffect Hook 的 Cleanup Function useEffect(() => {return () => {...}}, [])

1componentWillUnmount() {
2  console.log('User will unmount!');
3}
4

回顧

看完這篇文章,我們到底有什麼收穫呢?藉由本文可以理解到…

  • Class-based Components Lifecycle

References