React18中的常用hooks

一、React简介

        一句话概括，React就是用于构建用户界面的JS库。React中文官方文档

        React的特点：JSX语法、声明式编程、组件化开发、单项数据绑定、虚拟DOM

二、hooks简介

        在React中以 use 开头的函数被称为 Hook。使用 hooks 可以更方便地在函数式组件中管理状态和生命周期。hooks 提供了更灵活、简洁的方式来编写 React 组件。

注意：hooks只能在 组件的顶层 或自己的 Hook 中调用它。不能在循环或条件语句中调用它。

三、useState

作用：useState用于为函数组件提供状态（state）

基本语法：

const [state, setState] = useState(initialState);

返回值：

useState的返回值是一个数组，数组里面有两个参数。state：当前的状态值。setState：更新状态值的函数（可以是回调函数）

参数：

useState的参数可以是任何类型的值。initialState：状态的初始值，在首次渲染时与state 相匹配。

示例：计数器（点击按钮count加一）

import React,{ useState } from "react";//引入useState 

export default const NewCount = ()=> {
    const [ count,setCount ] = useState(0)//hooks方法放在组件最上面
    addCount = ()=> {
        setCount(count++)
    }
   return (
       <>
           <p> { count }</p>
           <button onClick={ addCount }>点我加一</button>
       </>
   )
}

四、useEffect

作用：useEffect 可以在函数组件中执行副作用操作和模拟React中类组件的生命周期

基本语法：

useEffect(setup, [dependencies]?)

参数：

有两个参数。setup：处理 Effect 的函数。dependencies（可选参数）：是一个数组，数组里是要监听的数据变量名

示例：模拟react类组件生命周期（挂载后、更新后、卸载前）

import React, { useEffect, useState } from 'react'

export default function UseEffect() {
    const [msg,setMsg] = useState('hello,蒙面大婶！')
    useEffect(() => {
        const timer = setInterval(()=> console.log('定时器'),2000)
        console.log('使用useEffect模拟挂载后的声明周期');
        return () => {
            // 清除定时器
            clearInterval(timer)
            console.log('使用useEffect模拟卸载前的声明周期1');
        }
    })
    useEffect(()=>{
        // 给useEffect传入第二个参数，第二个参数是一个数组，数组里是要监听的数据变量名
        console.log('使用useEffect模拟更新后的声明周期2');
    },[msg])
  return (
    <div>
        <h1>{msg}</h1>
        <button onClick={()=>setMsg('蒙面二婶')}>改名</button>
    </div>
  )
}

五、useRef

作用：ref 是一种访问 DOM 的主要方式。

基本语法：

const ref = useRef(initialValue)

返回值：

useRef返回只有一个属性（current）的对象。current：初始值为传递的 initialValue。如果将 ref 对象作为一个 JSX 节点的 ref 属性传递给 React，React 将为它设置 current 属性。

参数：

useRef一般不需要传参，值为null。

示例：获取一个DOM节点

import React, { useRef } from 'react'

export default function UseRef() {
    const h1Ref= useRef(null)
    useEffect(()=>{
        console.log(h1Ref.current);
    },[])
  return (
    <div>
        <input type="text" ref={h1Ref}/>
    </div>
  )
}

总结：

        以上就是我工作中比较常用到的几个hooks，引入hooks后在工作中使用React会更加的简洁方便，后续我也会持续更新这篇文章，分享更多好用的hooks和以及它的使用。

如果您发现本文中有错误的地方，欢迎评论以便及时更正！！！