React Hooks 简述

最新推荐文章于 2024-09-13 17:25:30 发布

学习不会停

最新推荐文章于 2024-09-13 17:25:30 发布

阅读量122

点赞数

分类专栏： React 文章标签： react.js html5

本文链接：https://blog.csdn.net/yyy_react/article/details/130064595

版权

React 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

ReactHooks介绍了如何用Function组件替代Class组件，通过useState等Hooks管理状态，简化了代码并消除了对生命周期方法的依赖。无状态组件借助Hooks也能拥有状态，使得React开发更加高效和愉快。

摘要由CSDN通过智能技术生成

之前在论坛上看到过这样一段话，用来描述 react hooks 感觉还挺贴切。

你还在为该使用无状态组件（Function）还是有状态组件（Class）而烦恼吗？
——拥有了hooks，你再也不需要写Class了，你的所有组件都将是Function。

你还在为搞不清使用哪个生命周期钩子函数而日夜难眠吗？
——拥有了Hooks，生命周期钩子函数可以先丢一边了。

你在还在为组件中的this指向而晕头转向吗？
——既然Class都丢掉了，哪里还有this？你的人生第一次不再需要面对this。

生命周期1.jpg 生命周期16.8.webp

这两张React生命周期图，想必大部分初学React的小伙伴，都有见到过。大量的生命周期函数及作用，把我们搞的晕头转向，肯定有因为复杂的生命周期函数放弃React的伙伴。

但自从有了 React Hooks 新特性，用React开发项目是一件让人开心愉快的事。

说了半天，用无状态组件（Function）和状态组件（Class）怎么开发页面呢？

那我们一起写个简单的例子吧---"计数器"。

1、状态组件（Class）


import React from 'react';
import { Card, Button } from 'antd';

class Counter extends React.Component {

    state = {
        count: 0,
    }

    render() {
        const { count } = this.state;
        return (
            <Card>
                <p>您点击 {count} 次</p>
                <Button onClick={() => this.setState({ count: count + 1 })}>
                    Click me
                </Button>
            </Card>
        );
    }
}

export default Counter;

2、无状态组件（Function）

import React, { useState } from 'react';
import { Card, Button } from 'antd';

const Counter = () => {
    const [count, setCount] = useState(0);
    return (
        <Card>
            <p>您点击 {count} 次</p>
            <Button onClick={() => setCount(count + 1)}>
                Click me
            </Button>
        </Card>
    );
}
export default Counter;

同样实现“计数器”，后者明显更简洁。如果涉及异步请求、状态共享等等，React Hooks 无疑是最好的选择。
Function 本应该是无状态组件的，但是由于引入了useState，这个函数有了自己的状态（count）,同时它也可以更新自己的状态（setState）,就是这个hook--useState让普通的函数变成了有状态的函数。

当然了，除了有useState,它还有其他hook，比如：useEffect、useCallback、useRef、useMemo等等，
后续我们也会形象化的讲到，快速掌握它们的用法及应用场景。