React
React 实例与函数组件
React 实例只存在于类组件中——每个类组件挂载时会 new 一个对象，持有 state、生命周期方法和 this。函数组件没有实例，每次渲染就是一次普通函数调用。
一、类组件 vs 函数组件
| 对比项 | 类组件 | 函数组件 |
|---|---|---|
| 实例 | 有，每次挂载创建一个对象 | 无 |
this | 可用 | 不可用 |
| 状态 | this.state / this.setState | useState |
| 生命周期 | componentDidMount 等方法 | useEffect |
| ref | 可直接引用实例 | 需要 forwardRef |
二、类组件迁移到函数组件
state：
// 类组件
class Counter extends Component {
state = { count: 0 }
}
// 函数组件
function Counter() {
const [count, setCount] = useState(0)
}生命周期：
// 类组件
class Example extends Component {
componentDidMount() {
document.title = `Count: ${this.state.count}`
}
}
// 函数组件
useEffect(() => {
document.title = `Count: ${count}`
}, [count])三、为什么推荐函数组件
- 无实例化开销，打包体积更小
- 没有
this绑定问题 - Hooks 让状态逻辑更容易复用和组合
本质区别
类组件是对象，有实例、有
this；函数组件是函数，每次渲染重新执行，没有实例。forwardRef+useImperativeHandle是函数组件暴露"类实例方法"的唯一途径。