React函数式组件中hook的使用——useState（），useEffect（），useRef（）

最新推荐文章于 2025-07-15 18:31:07 发布

原创最新推荐文章于 2025-07-15 18:31:07 发布 · 500 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#react.js #javascript #前端

react 专栏收录该内容

4 篇文章

订阅专栏

本文介绍了React 16.8起引入的Hook机制，包括useState用于状态管理，useEffect处理副作用，以及useRef储存组件内部引用。通过实例演示了如何在函数组件中实现类组件的功能，并展示了Hooks在简化组件设计和复用状态操作上的优势。

React中什么是hook？

在react中，hook是React16.8新增的特性，用于在不编写class的情况下使用state及其他的react特性；可以用函数组件去使用react中的一些特性，也可以让函数组件也拥有状态，通过自定义hook实现在组件间公用状态操作。

1.useState()

语法：

const [valueName,setValue]=useState(initValue);

initValue:状态初始化值

valueName:状态值

setValue:状态更新函数

注意：useState的状态更新函数和类式组件中setState（）不同，此函数会覆盖原状态值

import React,{useState}from 'react'

export default function Demo() {
  const [name,setName]=useState("zhangsan");
  const changeName=()=>{
    setName("lisi")
  }
  return (
    <Fragment>
       <div>{name}</div>
       <button onClick={changeName}></button>
    </Fragment>
    
  )
}

2.useEffect()

Effect Hook 在函数式组件中可以模拟三个钩子：componentDidMount、componentDidUpdate、componentWillUnmount

语法：

useEffect(()=>{
    
    return()=>{
        //组件卸载前执行，即componentWillUnmount钩子
        
    }
},[stateValue])

第一个参数 return 的函数相当于 componentWillUnmount
第二个参数数组为空，表示不监听任何状态的更新，只有在页面首次渲染时会执行输出，相当于componentDidMount

第二个参数数组写上状态，表示只监听这些状态的更新，相当于componentDidUpdate

import React,{useEffect} from 'react'
import PubSub from "pubsub-js"

export default function Demo() {
  const [age,setValue]=useEffect(22);
  const setAge=(msg,data)=>{
    setValue(data)
  }
  useEffect(()=>{
    //消息订阅
    PubSub.subscribe("age",setAge);
    return()=>{
      //取消订阅
      PubSub.unsubscribe("age");
    }
  },[])
  return (
    <div>{age}</div>
  )
}

3.useRef()

Ref Hook 可以在函数式组件存储或查找组件内的标签或其他数据

保存标签对象的容器，和 React.createRef() 类似，也是专人专用

import React,{useRef} from 'react'
function Demo() {
  const input1 = useRef()
  function show() {
    alert(input1.current.value)
  }

  return (
    <div>
      <input type="text" ref={input1} />
      <button onClick={show}>点击</button>
    </div>
  )
}