React生命周期 新vs老

React组件的"新vs老"指的是组件的两个不同版本，一个是使用了函数组件(Function Component)或类组件(Class Component)的旧版本，另一个是使用了React Hooks的新版本。

以下是使用React类组件和函数组件的例子：

类组件（旧）

import React from 'react';
 
class MyComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = { count: 0 };
  }
 
  componentDidMount() {
    document.title = `you clicked ${this.state.count} times`;
  }
 
  componentDidUpdate() {
    document.title = `you clicked ${this.state.count} times`;
  }
 
  render() {
    return (
      <div>
        <p>You clicked {this.state.count} times</p>
        <button onClick={() => this.setState({ count: this.state.count + 1 })}>
          Click me
        </button>
      </div>
    );
  }
}

函数组件（旧）

import React, { useState, useEffect } from 'react';
 
function MyComponent() {
  const [count, setCount] = useState(0);
 
  useEffect(() => {
    document.title = `you clicked ${count} times`;
  });
 
  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>Click me</button>
    </div>
  );
}

而使用Hooks的新版本可能会是这样：

import React, { useState, useEffect } from 'react';
 
function MyComponent() {
  const [count, setCount] = useState(0);
 
  useEffect(() => {
    document.title = `you clicked ${count} times`;
  }, [count]);
 
  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>Click me</button>
    </div>
  );
}

在这里，useState和useEffect是两个最常用的Hooks，分别用于管理组件的状态和响应式副作用。

从上面的例子可以看出，使用Hooks的新版本代码更加简洁，组件内的逻辑更加集中，没有类组件中的this和生命周期函数的复杂性。这是因为Hooks提供了一种更灵活的方式来复用状态逻辑在不同的组件之间，同时也让组件内部的逻辑更容易理解和维护。