本文介紹 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

• React - The Complete Guide (incl Hooks, React Router, Redux)