react hooks

Hooks是什么？

Hooks可以让你在函数组件中使用state以及其他的react特性

三个常用的Hook

State Hook：React.useState()

让函数组件也可以有state状态，并进行状态数据的读写操作

import React from "react"
export default function Functional(){
    // 返回包含2个元素的数组，count默认值0，setCount是更新状态的函数
    const [count,setCount] = React.useState(0)
    const [name,setName] = React.useState('Tom')
    function add(){
        // setCount(count+1) // 第一种写法
        setCount(count=>count+1)
    }
    function changeName(){
        setName('Jack')
    }
    return (
        <div>
            <h2>当前求和为：{count}</h2>
            <h2>我的名字是：{name}</h2>
            <button onClick={add}>点我+1</button>
            <button onClick={changeName}>点我改名字</button>
        </div>
    
    )
}

Effect Hook：React.useEffect()

用于模拟类组件的生命周期钩子

import React from "react"
export default function Functional(){
    // 返回包含2个元素的数组，count默认值0，setCount是更新状态的函数
    const [count,setCount] = React.useState(0)

    // React.useEffect(()=>{
    //     console.log('@')
    // },[count])
    // 相当于类组件中的“组件以及挂载”componentDidMount这个生命周期
    React.useEffect(()=>{
        let timer = setInterval(()=>{
            // setCount(count=>count+1)
        },1000)
        return ()=>{
            clearInterval(timer)
        }
    },[])
    function add(){
        // setCount(count+1) // 第一种写法
        setCount(count=>count+1)
    }
    return (
        <div>
            <h2>当前求和为：{count}</h2>
            <button onClick={add}>点我+1</button>
        </div>
    
    )
}

Ref Hook：React.useRef()

1)Ref Hook可以在函数组件中存储/查找组件内的标签或任意其他数据
2)语法const refContainer = useRef()

import {useRef} from 'react'

const myComponent = () => {
  const elementRef = useRef()
  
  return (
 		<input ref={elementRef} type="text" />
  )
}