React中常用的两个Hook是什么

发布时间:2022-03-18 11:36:25 作者:小新
来源:亿速云 阅读:142

这篇文章给大家分享的是有关React中常用的两个Hook是什么的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。

先介绍一下什么是hook

Hook是React 16.8新增的特性,专门用在函数式组件,它可以代替class组件中react的其他特性,是实际工作中要常用到的。

为什么推荐使用hook进行开发

hook是专门配合函数式组件开发使用的,可以用它代替class组件的一些生命周期,避免大量this引起的混乱,因此hook便于开发,且更易于让开发者理解代码

以上是个人的简单总结,更多原因可以参考react官网:

https://react.docschina.org/docs/hooks-intro.html#motivation

useState

代码中:

React.useState(0)相当于class组件中的this.state添加一个属性值

variable相当于class组件中的this.state. variable的值

setVariable可以用来修改variable的值,可以相当于class组件中的this.setState

import React,(useState) from 'react'
export default function useState_Demo() {
    const [variable, setVariable] = useState(0);//通过解构赋值,我们拿到的variable、setVariable
    function changeVariable(){
        setVariable((variable) => variable +1) //setVariable的回调中传进来的参数是variable
    }
    render (
        <div> 
            <button onclick = {change}>点我会使variable+1</button>
        </div>
    )
}

useEffect

代码中:

以下代码中可以看出,useEffect的使用代替了在class组件中componentDidMoun、componentDidUpdate、componentWillUnmount的使用

import React,(useState, useEffect) from 'react'
export default function useState_Demo() {
   const [variable, setVariable] = useState(0);//通过解构赋值,我们拿到的variable、setVariable
    
    useEffect(() => {
        //这个return是在该组件监测的数据变化时或者被卸载时调用的,被卸载时调用可以相当于componentWillUnmount钩子 
        return () => {
            console.log('该组件被卸载了')
        }
    }, [variable])//第二个参数传了[variable],表示检测variable的更新变化,一旦variable变化就会再次执行useEffect的回调
                  //第二个参数传了[],表示谁都不检测只执行一次useEffect的回调,相当于componentDidMount钩子
                  //第二个参数不传参,只要该组件有state变化就会执行useEffect的回调,相当于componentDidUpdate钩子
    function changeVariable(){
        setVariable((variable) => variable +1) //setVariable的回调中传进来的参数是variable
    }
    render (
        <div> 
            <button onclick = {change}>点我会使variable+1</button>
        </div>
    )
}

使用hook需要注意的

1、只在组件函数的最外层使用Hook,不要在循环,条件或嵌套函数中调用 Hook

import React,(useEffect) from 'react'
export default function useState_Demo() {
   //这里才是正确的
   useEffect(() => {})
    
   //错误1,使用了条件判断
   if(true) {
        useEffect(() => {})
   }
   //错误2,使用了循环
   while(true) {
        useEffect(() => {})
   }
  //错误3,使用了嵌套
  useEffect(() => {
      useEffect(() => {})
  })
}

2、不能在组件的函数外使用Hook

import React,(useState, useEffect) from 'react'
//错误1,在组件函数外使用了useState
const [variable, setVariable] = useState(0);
//错误2,在组件函数外使用了useEffect
useEffect(() => {})
export default function useState_Demo() {
   //在组件函数里使用才是正确的
   const [variable, setVariable] = useState(0);
}

3、为了避免以上的错误,可以 安装eslint-plugin-react-hooks ESLint 插件来检查代码上错误

自定义hook

hook就是一个函数,自定义hook是为了方便组件之间共享逻辑,其实就是对复用功能进行封装,自定义hook内部也调用了react自带的hook,命名要以use开头

//自定义hook
function useHook(initState) {
  const [variable, setVariable] = useState(initState)
  return variable;
}
//使用自定义hook
export default function useState_Demo() {
    const variableState = useHook(0)
}

可能你会疑惑,多个组件中使用相同的 Hook 会共享 state 吗?

答案是:不会。因为每次调用react自带的hook都是独自互不影响的,所以自定义hook被多次重复调用也是独自互不影响的

感谢各位的阅读!关于“React中常用的两个Hook是什么”这篇文章就分享到这里了,希望以上内容可以对大家有一定的帮助,让大家可以学到更多知识,如果觉得文章不错,可以把它分享出去让更多的人看到吧!

推荐阅读:
  1. 听说你还不懂React Hook?
  2. hook如何在react中使用

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

react hook

上一篇:python如何创建一个计数字典的方法

下一篇:linux编辑文件的命令有哪些

相关阅读

您好,登录后才能下订单哦!

密码登录
登录注册
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》