react 基本hook的使用

2021-08-01 23:07:05 阅读：243 来源： 互联网

标签：基本 const react hook state useState 组件 return useEffect

1.useState

useState可以让函数组件拥有自己的一个状态,和class组件一样去控制组件内部数据的一个状态

下面是一个用按钮通过useState设置初始状态,根据点击事件来改变这个状态

import React,{useState} from 'react'

export default function App() {
    
    const [state, setstate] = useState({
        num:0,
    })    

    const AddClickAction = ()=>{
        setstate({
            num:state.num+1
        })
        console.log(state);
    }

    return (
        <div className="app">
        //点击的时候增加
            <button onClick={AddClickAction}>点我:{state.num}</button>
        </div>
    )
}

2.useRef
可以用来获取节点dom(节点标签)

import React,{useRef} from 'react'

export default function App() {

    const ref = useRef()

    // 获取到button按钮的节点
    const getNode = ()=>{
        console.log(ref.current);
    }

    return (
        <div className="app">
            <button onClick={getNode} ref={ref}>点我</button>
        </div>
    )
}

useRef的current属性是对原来的一个引用,可以用它来做判断,current属性值发生改变的时候他不会去重新走render,这个下面的useEffect模拟生命周期会有写到

3.useEffect

useEffect有俩个参数:

第一个参数是一个函数,里面可以去写一些数据操作或业务逻辑一些
第二个参数是对上一个函数的依赖,[] 空依赖则只有页面第一次加载的时候才会去执行,[有依赖的参数] 如果依赖函数中操作的某个数据,当依赖的数据发生改变的时候会去执行useEffect里面被依赖的代码,如果不写第二个参数,当页面重新走render会执行函数内部的所有代码

下面是对空依赖和不写依赖

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

export default function App() {

    const [state, setstate] = useState(0);

    // 我只会执行一次
    useEffect(() => {
        console.log(state,"执行一次"); //state 0
    }, [])

    // 页面加载执行一次,当每次点击改变state数据的时候会继续执行
    // 如果第二个参数不写的话函数内部执行的逻辑都会执行
    useEffect(() => {
        console.log(state,"改变state就会执行一次");
    }, [state])

    const AddClickAction = ()=>{
        setstate(state+1);
    }

    return (
        <div className="app">
            <button onClick={AddClickAction}>点我:{state}</button>
        </div>
    )
}

useEffect可以模拟类组件的一个生命周期

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

export default function App() {

    const [state, setstate] = useState(0);
    const ref = useRef(true);
    // 页面加载时执行...  componentDidMount
    useEffect(() => {
        console.log("页面结构已经创建完成.....");
    }, [])

    // 状态改变或者时走render的时候,组件重新加载会执行... componentDidUpDate
    // useEffect(() => {
    //     console.log("state改变...");   
    // })
    // 但是你会发现在页面加载的时候会执行componentDidMount和componentDidUpDate,这并不是我们所期望的.
    // 通过useRef来达到componentDidUpDate的一个效果
    // 通过判断ref的current的值 你会发现页面加载的时候不回去执行下面这个useEffect 只有当数据发生改变或者        重走render的时候才回去执行
    useEffect(() => {
        if(ref.current){
            ref.current = false;
            return;
        }
        console.log("state改变...");   
    })

    // useEffect内部return的函数 只有当组件销毁的时候才会去执行... componentWillUnmount
    useEffect(() => {
        return () => {
            console.log("销毁....");
        }
    },[])

    const AddClickAction = ()=>{
        setstate(state+1);
    }

    return (
        <div className="app">
            <button onClick={AddClickAction}>点我:{state}</button>
        </div>
    )
}

4.useCallback

可以提高react的一个优化,也可以减少事件的创建,同时可以缓存函数

没有用useCallback,下面这个每次点击改变state的时候都会走render,同时点击事件也会被重新创建,每次点击都会去打印增加后的state数据

import React,{useState} from 'react'

export default function App() {

    const [state, setstate] = useState(0)

    return (
        <div className="app">
            <button onClick={()=>{
                setstate(state+2)
                console.log(state);
            }}>点我:{state}</button>
        </div>
    )
}

用useCallback,addAction事件被useCallback缓存了下来,每次点击的时候打印的都是一开始的数据

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

export default function App() {

    const [state, setstate] = useState(0)

    const addAction = useCallback(()=>{
        setstate(state+2)
        console.log(state);
    },[])

    return (
        <div className="app">
            <button onClick={addAction}>点我:{state}</button>
        </div>
    )
}

5.useMemo

对一个值进行一个缓存

在计算或者是对数据进行操作的时候,不会因为组件的更新或者是整个组件的重新渲染再去计算或者是操作这个数据,用useMemo会在依赖的数据发生变化的时候就会去计算

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

export default function App() {

    const [state, setstate] = useState(0)

    const fnc =useCallback(() => {
        setstate(state+1)
    },[state]) 

    // 当fnc函数内部的数据发生变化会去计算state的数据
    const addAction = useMemo(()=>{
        return  fnc;
    },[fnc])

    return (
        <div className="app">
            <button onClick={addAction}>点我:{state}</button>
        </div>
    )
}

6.memo

memo相当于shouldComponentUpdate和PureComponent对性能的优化,

他是减少没必要的组件渲染

下面代码每次点击修改state数据的时候都会重新渲染重新走one子组件,但是子组件内部没有数据要修改,这样每次渲染都会去执行one组件,这种没必要的渲染需要避免,

#App 父组件
import React,{ useState,useMemo,useCallback} from 'react'
import One from './One'
export default function App() {

    const [state, setstate] = useState(0)

    const fnc =useCallback(() => {
        setstate(state+1)
    },[state]) 

    const addAction = useMemo(()=>{
        return  fnc;
    },[fnc])

    return (
        <div className="app">
            <button onClick={addAction}>点我:{state}</button>
			// one组件
            <One/>
        </div>
    )
}

打印的结果

在子组件内部用memo 包裹函数,这样父组件渲染,子组件不会去执行,只有当子组件内部修改了数据才会去执行

#one 子组件
import React,{memo} from 'react'
// 用memo 减少无用组件的渲染
export default memo(function One() {
    console.log("我是one组件...");
    return (
        <div>
            我是one组件
        </div>
    )
})

小总结: 我对hook的理解也只是在这简单的使用层面上,以后也会去更深入的去学习,去使用,可能也会有些没有说到的,没有去使用到的,告诉我一下,我也去多学习学习!!!

赶紧拿小本本记下⬇⬇⬇⬇
请添加图片描述

标签：基本,const,react,hook,state,useState,组件,return,useEffect
来源： https://blog.csdn.net/Eternalyii/article/details/119305290

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

react 基本hook的使用