React-Hooks笔记

Seven_Ting2026-08-02 6:25

class组件存在的问题和添加Hooks的原因

一、函数组件的特点

没有组件实例
没有生命周期
没有state和setState，只能接收props

二、class组件的问题

大型组件很难拆分和重构，很难测试（即class不易拆分）
相同业务逻辑，分散到各个方法中，逻辑混乱
复用逻辑变得复杂，如：Mixins，HOC，Render Prop

三、React组件更易用函数表达

React提倡函数式编程
函数更灵活，更易拆分，更易测试
但是函数组件太简单，需要增强能力-----Hooks

Hooks的具体讲解

1、State Hook

注意：让函数组件实现state和setState

默认函数组件没有state
函数组件是一个纯函数，执行完即销毁，无法存储state
需要State Hook ，即把state功能 "钩" 到纯函数中

1、函数组件：

javascript 复制代码

import React from 'react'
import { useState } from 'react';

function ClickCount() {
    const [count, setCount] = useState(0);
    return (
        <div>
            <p>你点击了{count}次</p>
            <button onClick={() => setCount(count + 1)}>点击</button>
        </div>
    )
}

export default ClickCount;

2、class组件：

javascript 复制代码

import React from 'react'

class ClickCountClass extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            count: 0
        }
        this.handleClick = this.handleClick.bind(this);
    }
    render() {
        return <div>
            <p>你点击了{this.state.count}次</p>
            <button onClick={this.handleClick}>点击</button>
        </div>
    }
    handleClick() {
        this.setState({
            count: this.state.count + 1
        })
    }
}

export default ClickCountClass;

3、useState使用总结

useState(0)传入初始值，返回数组 $state,setSate$
通过state获取值
通过setState(1)修改值

4、Hooks命名规范

规定所有Hooks都用use开头，如：useXXX

自定义Hooks也要用use开头

非Hooks的地方，尽量不要用useXXX写法