react和reacthooks的区别

### React 与 React Hooks 的区别

#### 函数组件中的状态管理
传统上，在类组件中，通过 `this.state` 来管理和更新组件的状态。而在函数组件中引入了 Hook 后，可以使用 `useState()` 这样的 Hook 将状态逻辑添加到函数组件之中[^1]。

// 类组件方式
class Counter extends React.Component {
  constructor(props) {
    super(props);
    this.state = { count: 0 };
  }

  incrementCount = () => {
    this.setState({ count: this.state.count + 1 });
  };

  render() {
    return (
      <div>
        Count: {this.state.count}
        <button onClick={this.incrementCount}>Increment</button>
      </div>
    );
  }
}

// 使用Hook的方式
function CounterWithHooks() {
  const [count, setCount] = useState(0);

  return (
    <div>
      Count: {count}
      <button onClick={() => setCount(count + 1)}>Increment</button>
    </div>
  );
}

#### 性能优化差异
当属性变化时，视图组件会重新渲染，并且由于状态改变触发的副作用也会引起额外的一次重绘过程；而采用静态方法 `getDerivedStateFromProps` 则只会引发一次性的重绘操作[^2]。这表明在某些情况下，利用 Hooks 可以减少不必要的重复渲染次数从而提高性能表现。

#### 生命周期钩子对比
生命周期方法用于处理不同阶段的任务。例如构造器用来初始化属性和状态；`componentDidMount`, `componentDidUpdate` 发生于DOM呈现之后；以及即将销毁前调用 `componentWillUnmount` 。相比之下，尽管一些功能可以在多个时刻被运用，但是它们所属的具体周期是非常明确的。对于基于 Hook 的实现来说，开发者可以通过像 `useEffect` 这样更简洁的方式来替代上述复杂的生命周期事件监听机制[^3]。