什么是hook?聊聊React中常用的两个Hook
先介绍一下什么是hook
Hook是React 16.8新增的特性,专门用在函数式组件,它可以代替class组件中react的其他特性,是实际工作中要常用到的。【相关推荐:redis视频教程】
为什么推荐使用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,在组件函数外使用了useStateconst [variable, setVariable] = useState(0); //错误2,在组件函数外使用了useEffectuseEffect(() => { } )export default function useState_Demo() { //在组件函数里使用才是正确的 const [variable, setVariable] = useState(0); }
3、为了避免以上的错误,可以 安装eslint-plugin-react-hooks
ESLint 插件来检查代码上错误
自定义hook
hook就是一个函数,自定义hook是为了方便组件之间共享逻辑,其实就是对复用功能进行封装,自定义hook内部也调用了react自带的hook,命名要以use开头
//自定义hookfunction useHook(inITState) { const [variable, setVariable] = useState(initState) return variable; } //使用自定义hookexport default function useState_Demo() { const variableState = useHook(0)}
可能你会疑惑,多个组件中使用相同的 Hook 会共享 state 吗?
答案是:不会。因为每次调用react自带的hook都是独自互不影响的,所以自定义hook被多次重复调用也是独自互不影响的
更多编程相关知识,请访问:编程入门!!
以上就是什么是hook?聊聊React中常用的两个Hook的详细内容,更多请关注其它相关文章!
声明:本文内容由网友自发贡献,本站不承担相应法律责任。对本内容有异议或投诉,请联系2913721942#qq.com核实处理,我们将尽快回复您,谢谢合作!
若转载请注明出处: 什么是hook?聊聊React中常用的两个Hook
本文地址: https://pptw.com/jishu/593653.html