React—— hooks（一）

????个人主页：个人主页

✌支持我：点赞????收藏????关注????

文章目录

- ⛳React Hooks

⛳React Hooks

使用hooks理由:

高阶组件为了复用，导致代码层级复杂
生命周期的复杂
写成functional组件，无状态组件，因为需要状态，又改成了class,成本高

hooks使用规则

只能在函数最外层调用 Hook。不要在循环、条件判断或者子函数中调用。
只能在 React 的函数组件中调用 Hook。不要在其他 JavaScript 函数中调用。（还有一个地方可以调用 Hook —— 就是自定义的 Hook 中

????useState(保存组件状态)

语法：

//导入 useState
import React,{useState}from 'react'
..........................................
const [state,setState] = useState(initialState)

内容

返回一个state,以及修改state的函数，在初始渲染期间，返回的状态state与传入的第一个参数值 initialState值相同
setState函数用于更新 state。它接收一个新的参数,并将组件的一次重新渲染加入队列。
可以在一个组件中多次使用

修改state

//setState(newState)
setState('123')

????useEffect(处理副作用)

使用useEffect

在函数组件中，要知道这个组件现在处在那个生命周期，比较麻烦，甚至有点无从下手，这时候我们就可以使用hook中的useEffect()

注意：

Function Component不存在生命周期，所以不要把Class Component 的生命周期概念搬过来试图对号入座
默认情况下,useEffect会在第一次渲染之后和每次更新之前都会执行

语法

useEffect(()=>{
    .........
},[依赖;空数组，表示不依赖])
//依赖：在useEffect函数中使用的状态

注意:如果明明使用了某个变量，却没有申明在依赖中，那么当依赖的变量改变时，useEffect也不会再次执行，控制台会报警告

清除effect

组件卸载时需要清除effect创建的如计时器或请阅等资源，useEffect函数需要返回一个清除函数即可

useEffect(()=>{
   //组件挂载创建计时器
    var timer = setInterval(()=>{
            console.log('111');
   },1000)
    ........
   return ()=>{
       //清除计时器  若无依赖时组件销毁
       clearInterval(timer)
   } 
},[])

????useCallback（记忆函数）

防止因为组件重新渲染，导致方法被重新创建，起到缓存作用，只有第二个参数变化了，才能重新声明一次

语法

var handleClick = useCallback(
    ()=>{
        console.log(name)
    },
    [name]
)
<button onClick={()=>handleClick()}>hello</button>

内容

当依赖不改变时，方法不会被重建；当只有当依赖（name）发生改变时，这个函数才会被重新创建
如果传入空数组，name就是第一次创建后就被缓存，name后期即使改变，拿到的还是老的name
如果不传第二个参数，每次都会被重新声明一次，拿到的就是最新的name

????useMemo(记忆组件)

useCallback常用记忆事件函数，生成记忆后的事件函数并传递给子组件使用。而useMemo更适合经过函数计算得到一个确定的值，比如记忆组件

useMemo(()=>{
    
})

????useRef(保存引用值)

//相当于React.createRef()
const mytext = useRef()
................
 <input ref={mytext}></input>

????????????如有错误，请评论指出，thankyou~????????????
✨✨✨创作不易，如对您有帮助，欢迎给博主点赞收藏，给予鼓励哟????

秒客网