基础hooks使用

Hook简介

Hook 是 React 16.8 的新增特性。它可以让你在不编写 class 的情况下使用 state 以及其他的 React 特性。

useState()

import React, { useState } from 'react'

export default function App() {
   // 声明一个叫做 “num” 的 state 变量
   const [num, setNum] = useState(0);
   
   return (
       <div>
           <p> {num} </p>
           <button onClick={ () => setNum(num + 1) }>Click</button>
       </div>
   )

}

useState()的主要作用相当于class组件的state，useState函数相对来讲更像是单独针对每一个key去进行操控。

useEffect()

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

export default function App(){
    const [x,setX]=useState(0)

    useEffect(()=>{
        //模拟 componentDidmount
    },[])
    
    useEffect(()=>{
        //模拟 componentDidupdate
    },[x])
    
    useEffect(()=>{
        //模拟 componentWillUnmount
        return () => {
            
        }
    },[x])
    
    return (
        <div>App</div>
    )
}

useEffect()函数有两个参数，第一个参数为回调函数，第二个为它的依赖值，且它可以模拟三个react的生命周期，componentDidmount（加载完成）、componentDidupdate（数据更新）、componentWillUnmount（组件卸载）

useCallback()

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

  const [count, setCount] = useState(0)

  const fn = useCallback(() => {
    console.log(count, 'count');
  }, [count]);

  const onClick = () => {
    setCount(count + 1);
  };


return ( 
    <>
        <h1>count:{count}</h1>
        <button onClick={onClick}>Click me!</button>
    </>
)

useCallback()为记忆函数，它可以防止因为组件重新渲染，导致方法被重新创建，起到缓存作用。

useMemo()

   import React, { useMemo, useState } from 'react'
   
   export default function App(){
       const [count, setCount] = useState(10000)
       
       // 监听count是否变化
       const fn = useMemo( () => {
           let num=0;
           for (let i = 0; i < count ;i++){
               num+=i
           }
           return num
       }, [count]) 
       
       // 点击改变count值
       const onClick = () => {
           setCount(count + 1)
       }
       
       return (
           <>
               <h1>{count}</h1>
               <Button onClick={onClick}>Click me!</Button>
           </>
       )
   }

useMemo()它是用来做缓存用的，只有当一个依赖项改变的时候才会发生变化，否则直接返回上一次缓存的值，就不用在每次渲染的时候再做计算