本文介紹 React Class-based Components 的使用方式。

Basic Usage

Traditionally (React < 16.8), you had to use Class-based Components to manage State.

1import { Component } from 'react';
2import classes from './User.module.css';
3
4class User extends Component {
5  render() {
6    return <li className={classes.user}>{this.props.name}</li>;
7  }
8}
9// const User = (props) => {
10//   return <li className={classes.user}>{props.name}</li>;
11// };
12
13export default User;
14

幾個重點：

• 狀態是一個名為 state 的 Object
• 提供 setState 方法合併 state Object（不是覆蓋）
• 使用 Function 時要加上 .bind(this)，讓函式的 this 指向 Class Component
• 當使用 extends 時，constructor 裡面一定要加 super

1class Users extends Component {
2  constructor() {
3    super(); // 當使用 extends 時一定要加 super
4    // Class Component 的狀態只能是一個名為 state 的 Object
5    this.state = {
6      showUsers: true,
7      more: 'Test',
8    };
9  }
10
11  toggleUsersHandler() {
12    // this.state.showUsers = false; // NOT!
13    // 這個 setState 是 Class Component 提供的方法，會合併 state Object
14    this.setState((prevState) => {
15      return { showUsers: !prevState.showUsers };
16    });
17  }
18
19  render() {
20    // helper constant
21    const usersList = (
22      <ul>
23        {DUMMY_USERS.map((user) => (
24          <User key={user.id} name={user.name} />
25        ))}
26      </ul>
27    );
28
29    return (
30      <div className={classes.users}>
31        <button onClick={this.toggleUsersHandler.bind(this)}>
32          {this.state.showUsers ? 'Hide' : 'Show'} Users
33        </button>
34        {this.state.showUsers && usersList}
35      </div>
36    );
37  }
38}
39

使用 Context

1import { Component } from 'react';
2import UsersContext from '../store/users-context';
3
4class UserFinder extends Component {
5  // class component 只能使用一個 context
6  static contextType = UsersContext;
7
8  componentDidMount() {
9    this.setState({
10      // 取得 context 的資料
11      filteredUsers: this.context.users,
12    });
13  }
14}
15

回顧

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

• Class-based Component

References

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