React 类组件

类组件 vs 函数式组件

使用函数式组件是默认的、最现代的方式，代码更简洁，更灵活。
React v16.8 之前的版本只支持类组件，所以很多以前项目是使用类组件写的。

在以下3种情况下使用类组件：

1. 个人偏好，如果比起函数组件，更喜欢类组件。
2. 如果团队项目使用类组件，无法选择只能用类组件。
3. 如果需要构建错误边界(Error Boundaries)，此时必须也只能使用类组件。

在同一个APP中，两种组件可以同时存在。但一般情况下，应该只使用二者之一，要么只写函数式组件，要么只写类组件。

函数组件 => 类组件转换

例1

函数组件：

import classes from "./User.module.css";
const User = (props) => {
   return <li className={classes.user}>{props.name}</li>;
};
export default User;

等价于类组件：

import {Component} from "react";
import classes from "./User.module.css";
class User extends Component {
  render() {
  	// 类组件不再接收 props 参数，props.name 前面要加 this ！
    return <li className={classes.user}>{this.props.name}</li>;
  }
}
export default User;

例2

函数组件：

import { useState } from "react";
import User from "./User";

import classes from "./Users.module.css";

const DUMMY_USERS = [
  { id: "u1", name: "Max" },
  { id: "u2", name: "Manuel" },
  { id: "u3", name: "Julie" },
];
 const Users = () => {
   const [showUsers, setShowUsers] = useState(true);

   const toggleUsersHandler = () => {
     setShowUsers((curState) => !curState);
   };

   const usersList = (
     <ul>
       {DUMMY_USERS.map((user) => (
         <User key={user.id} name={user.name} />
       ))}
     </ul>
   );

   return (
     <div className={classes.users}>
       <button onClick={toggleUsersHandler}>
         {showUsers ? "Hide" : "Show"} Users
       </button>
       {showUsers && usersList}
     </div>
   );
 };
export default Users;

等价于类组件

import { Component } from "react";
import User from "./User";

import classes from "./Users.module.css";

const DUMMY_USERS = [
  { id: "u1", name: "Max" },
  { id: "u2", name: "Manuel" },
  { id: "u3", name: "Julie" },
];

class Users extends Component {
  constructor() {
    super();
    // 对于类组件，this.state 必须永远是一个对象
    // useState 相比之下灵活得多
    this.state = {
      showUsers: true,
    };
  }
  toggleUsersHandler() {
	// setState 将旧的state和新的state进行合并， 
	// useState 不同。
	// 对于类组件，如果新状态依赖于前一个状态，
	// 也必须使用箭头函数：
    this.setState((curState) => {
      // // 这里返回的对象会被 React 与旧的 state 合并
      return { showUsers: !curState.showUsers };
    });
  }

  render() {
    const usersList = (
      <ul>
        {DUMMY_USERS.map((user) => (
          <User key={user.id} name={user.name} />
        ))}
      </ul>
    );

    return (
      <div className={classes.users}>
        <button onClick={this.toggleUsersHandler.bind(this)}>
          {this.state.showUsers ? "Hide" : "Show"} Users
        </button>
        {this.state.showUsers && usersList}
      </div>
    );
  }
}
export default Users;

方法内部的 this 关键字指向外部的类，但是如果方法被用于事件调用：

<button onClick={this.toggleUsersHandler}> 

this 就不会默认指向外部类，而要使用 bind 方法，改成下面这样：

<button onClick={this.toggleUsersHandler.bind(this)}> 

意思就是说，toggleUsersHandler 方法内部的 this， 即 this.setState() 中的 this，将与 bind(this) 中的 this 的 context 一致，都指向外部类 Users。