React类组件与React Hooks写法对比

news2025/4/28 19:26:50

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