react hooks(useStateuseEffectuseRef详解)

Posted 过鹿人

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了react hooks(useStateuseEffectuseRef详解)相关的知识,希望对你有一定的参考价值。

好巧不巧,工作了一年跳槽了,之前用的vue,现在用的react~ 嗯!工作使人进步!现在开始学react吧!

切入正题~

react hooks是React16.8.0之后出现的,

类组件存在的问题:

  • this指向问题
  • 生命周期繁琐
  • 创建类的实例开销较大

而函数组件函数组件没有this,没有生命周期,没有状态state,函数的执行开销比创建类实例的开销要小。

因此,为了提高性能,尽量使用函数组件。

然而函数组件有个最大的问题就是没有状态state,所以react官方出了个hooks来解决这个问题。

项目中最常用的几个hook:

useState

1. useState最好写到函数的起始位置,便于阅读
2. useState严禁出现在代码块(判断、循环)中
3. useState返回的函数(数组的第二项),引用不变(节约内存空间)
4. 使用函数改变数据,若数据和之前的数据完全相等(使用Object.is比较),不会导致重新渲染,以达到优化效率的目的。
5. 使用函数改变数据,若传入的是值,只会保留最后一次的函数执行,若传入的是函数,会在事件完成后统一执行。
import React, { useState } from \'react\';// 引入state hook


export default function App() {
    console.log("App render")
    const [n, setN] = useState(0); //使用一个状态,该状态的默认值是0
    return <div>
        <button onClick={() => {
            setN(n - 1);
            setN(n - 2);// 传入值,只会保留最后一次setN的执行
            // setN(prevN => prevN - 1); 
            // setN(prevN => prevN - 1);//传入函数,在事件完成之后统一执行
        }}>-</button>
        <span>{n}</span>
    </div>
}
6. 如果要实现强制刷新组件
  • 类组件:使用forceUpdate函数
  • 函数组件:使用一个空对象的useState

类组件

import React, { Component } from \'react\'

export default class App extends Component {
    render() {
        return (
            <div>
                <button onClick={()=>{
                    //不会运行shouldComponentUpdate
                    this.forceUpdate();//强制重新渲染
                }}>强制刷新</button>
            </div>
        )
    }
}

函数组件

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

export default function App() {

const [, forceUpdate] = useState({}); return <div> <p > <button onClick={() => { forceUpdate({}); }}>强制刷新</button> </p> </div> }

 

useEffect

它能在函数组件中执行副作用,并且它与 class 中的生命周期函数极为类似。

副作用:

1. ajax请求
2. 计时器
3. 其他异步操作
4. 更改真实DOM对象
5. 本地存储
6. 其他会对外部产生影响的操作
 
  • 副作用函数的运行时间点,是在页面完成真实的UI渲染之后。因此它的执行是异步的,并且不会阻塞浏览器
与类组件中componentDidMount和componentDidUpdate的区别
componentDidMount和componentDidUpdate,更改了真实DOM,但是用户还没有看到UI更新,是同步的。
useEffect中的副作用函数,更改了真实DOM,并且用户已经看到了UI更新,是异步的。
  • 每个函数组件中,可以多次使用useEffect,但不要放入判断或循环等代码块中。
  • useEffect中的副作用函数,可以有返回值,返回值必须是一个函数,该函数叫做清理函数
在每次运行副作用函数之前,运行返回的函数
首次渲染组件不会运行
组件被销毁时一定会运行
  • useEffect函数,可以传递第二个参数
第二个参数是一个数组
数组中记录该副作用的依赖数据
当组件重新渲染后,只有依赖数据与上一次不一样时,才会执行副作用
所以,当传递了依赖数据之后,如果数据没有发生变化
副作用函数仅在第一次渲染后运行,清理函数仅在卸载组件后运行
 
import React, { useState, useEffect } from \'react\'

function Test() {
    useEffect(() => {
        console.log("副作用函数,仅挂载时运行一次")
        return () => {
            console.log("清理函数,仅卸载时运行一次")
        };
    }, []); //使用空数组作为依赖项,则副作用函数仅在挂载的时候运行
    console.log("渲染组件");
    const [, forceUpdate] = useState({})

    return <h1>Test组件 <button onClick={() => {
        forceUpdate({})
    }}>刷新组件</button></h1>
}

export default function App() {
    const [visible, setVisible] = useState(true)
    return (
        <div>
            {
                visible && <Test />
            }
            <button onClick={() => {
                setVisible(!visible);
            }}>显示/隐藏</button>

        </div>
    )
}

 

useRef

useRef(value)返回一个对象:{current: value}

  • 在每次渲染时返回同一个 ref 对象
  • 变更 .current 属性不会引发组件重新渲染
import React, { useRef } from \'react\'
export default function App() {
    console.log(\'app render\')
    const nRef = useRef(10); // {current:10}
    return (
        <div>
            <h1>{nRef.current}不会变</h1>
            <button onClick={() => {nRef.current--;console.log(nRef.current, \'nRef.current变化\')}}>减少</button>
        </div>
    )
}

 

以上是关于react hooks(useStateuseEffectuseRef详解)的主要内容,如果未能解决你的问题,请参考以下文章

react hook介绍

react hook介绍

react自定义hooks-自动改变页面的title,Http请求hooks等..(持续更新)

[react] 使用Hooks要遵守哪些原则?

react新特性 react hooks

React 16.8发布:hooks终于来了!