React最常用的两个hook

最新推荐文章于 2024-04-13 15:36:00 发布

coder_fyy

最新推荐文章于 2024-04-13 15:36:00 发布

阅读量333

点赞数

文章标签： react.js javascript 前端

本文链接：https://blog.csdn.net/qq_27600293/article/details/123492818

版权

本文介绍了React 16.8引入的Hook特性，重点讲解了useState和useEffect两个核心Hook的使用，包括它们如何替代class组件中的状态管理和生命周期方法。同时，讨论了使用Hook时应注意的规则，并简述了自定义Hook的概念和作用。

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

先介绍一下什么是hook

Hook是React 16.8新增的特性，专门用在函数式组件，它可以代替class组件中react的其他特性，是实际工作中要常用到的。

为什么推荐使用hook进行开发

hook是专门配合函数式组件开发使用的，可以用它代替class组件的一些生命周期，避免大量this引起的混乱，因此hook便于开发，且更易于让开发者理解代码

这些是个人的简单总结，更多原因可以参考react官网：https://react.docschina.org/docs/hooks-intro.html#motivation

useState

代码中：

React.useState(0)相当于class组件中的this.state添加一个属性值

variable相当于class组件中的this.state. variable的值

setVariable可以用来修改variable的值，可以相当于class组件中的this.setState

import React,(useState) from 'react'
export default function useState_Demo() {
   
    const [variable, setVariable] = useState(0);//通过解构赋值，我们拿到的variable、setVariable
    function changeVariable(){
   
        setVariable((variable) => variable +1) //setVariable的回调中传进来的参数是variable
    }
    render (
        <div> 
        	<button onclick = {
   change}>点我会使variable+1