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提供了一种更灵活的方式来复用状态逻辑在不同的组件之间，同时也让组件内部的逻辑更容易理解和维护。