React类组件与React Hooks写法对比

---

React 类组件 vs Hooks 写法对比

分类	类组件（Class Components）	函数组件 + Hooks
组件定义	class Component extends React.Component	const Component = () => {}
状态管理	this.state + this.setState()	useState()
生命周期	componentDidMount, componentDidUpdate等	useEffect(() => {}, [deps])
副作用处理	分散在多个生命周期方法中	集中在useEffect中，通过依赖数组控制执行时机
上下文(Context)	static contextType 或 <Context.Consumer>	useContext()
Refs	createRef() + this.myRef	useRef()
方法绑定	需要手动绑定this（或在构造函数中绑定）	无需绑定，直接使用箭头函数或函数声明
代码结构	基于类的继承，逻辑分散在生命周期方法中	函数式编程，逻辑按功能聚合，可自定义Hook复用
状态更新	this.setState({ key: value })（自动合并对象）	setState(newValue)（直接替换状态，需手动合并对象）
路由(v5及以前)	通过this.props.history访问路由	使用useHistory, useLocation等Hooks
高阶组件(HOC)	常用HOC增强组件功能	可用HOC，但更推荐自定义Hook替代
性能优化	PureComponent 或 shouldComponentUpdate	React.memo + useMemo/useCallback

---

核心代码示例对比

1. 状态管理

// 类组件
class Counter extends React.Component {state = { count: 0 };increment = () => {this.setState({ count: this.state.count + 1 });};render() {return <button onClick={this.increment}>{this.state.count}</button>;}
}// Hooks
const Counter = () => {const [count, setCount] = useState(0);const increment = () => setCount(count + 1);return <button onClick={increment}>{count}</button>;
};

2. 生命周期/副作用

// 类组件
class DataFetcher extends React.Component {componentDidMount() {fetchData().then(data => this.setState({ data }));}componentDidUpdate(prevProps) {if (prevProps.id !== this.props.id) {fetchData(this.props.id).then(data => this.setState({ data }));}}
}// Hooks
const DataFetcher = ({ id }) => {const [data, setData] = useState(null);useEffect(() => {fetchData(id).then(setData);}, [id]); // 依赖数组控制重新执行
};

3. 上下文(Context)

// 类组件
class UserInfo extends React.Component {static contextType = UserContext;render() {const user = this.context;return <div>{user.name}</div>;}
}// Hooks
const UserInfo = () => {const user = useContext(UserContext);return <div>{user.name}</div>;
};

4. Refs

// 类组件
class InputFocuser extends React.Component {inputRef = React.createRef();focusInput = () => this.inputRef.current.focus();render() {return <input ref={this.inputRef} />;}
}// Hooks
const InputFocuser = () => {const inputRef = useRef(null);const focusInput = () => inputRef.current.focus();return <input ref={inputRef} />;
};

---

关键总结

1. 类组件：面向对象风格，强依赖于this和生命周期方法，适合复杂状态逻辑或需要精确控制生命周期的场景。
2. Hooks：函数式编程风格，逻辑更聚合，避免this绑定问题，代码更简洁，适合逻辑复用和现代React开发。
3. 迁移建议：新项目优先使用Hooks，旧项目逐步迁移时注意useEffect对生命周期的替代逻辑。