类组件 vs 函数式组件
使用函数式组件是默认的、最现代的方式,代码更简洁,更灵活。
React v16.8 之前的版本只支持类组件,所以很多以前项目是使用类组件写的。
在以下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
。