当前位置：首页 > ds >正文

React类组件与React Hooks写法对比

ds 2025/5/9 2:47:46

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} />;
};