react-10（stateHook，effect Hook）

最新推荐文章于 2024-07-27 09:09:30 发布

我只是想饮一杯奶茶

最新推荐文章于 2024-07-27 09:09:30 发布

阅读量368

点赞数

分类专栏： react 文章标签： react.js 前端 javascript ecmascript 前端框架

本文链接：https://blog.csdn.net/weixin_45626517/article/details/120993923

版权

本文深入探讨React 16.8引入的State Hook和Effect Hook。通过实例解析，阐述如何在不使用类组件的情况下，利用useState处理状态，以及如何用useEffect替代生命周期方法，包括componentDidMount、componentDidUpdate和componentWillUnmount，并讲解了Hook的使用规则。

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

State Hook

1、16.8以后的新特性，现在可用

2、我们之前的组件都是以类的概念来实现的，里面可以写函数、属性、state、视图，hook就是让我们在不写类的情况下也能实现效果，hook在类组件丽不生效。 (函数组件 )

3、没有计划移除class，hook和class并存。（可以写类组件，也可以写函数组件）

hook是什么？

hook是react的一个特殊的函数，可以引入react的特性，系统的调用函数，useState()后面就带了个括号。

state Hook声明：

在函数组件中，我们没有 this，所以我们不能分配或读取 this.state ，使用useState，我们可以直接拿到。

const [state, setState] = useState(initialState);
// [属性名,改变属性方法] = useState(属性初始值);

const [state, setState] = useState(function);
// [属性名,改变属性方法] = useState(需要通过计算得到初始值的方法);

函数组件对比类组件：

函数组件对比类组件
函数组件(hook)	类组件
不需要赋值this.state	需要赋值this.state
更新数据直接更新	需要调用this.stestate
直接使用数据	需要调用this.state.xxx使用数据

对比代码示例：

类组件：

import React, { Component } from 'react'

export default class classComponent extends Component {
    constructor(props){
        super(props)
        /**
         * 初始化：需要赋值
         */
        this.state={
            counter:100
        }
    }

    handleClick = ()=>{
        /**
         * 更改数据：需要使用setState({})
         */
        this.setState({counter:200})
    }

    render() {
        //  const {counter} = this.state
        return (
            <div>
                class组件
                {/* 使用：如果不解构，需要调this.state */}
            <p>{this.state.counter