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

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

  扫描二维码关注公众号，回复： 16280747 查看本文章

  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>
    )
  }