189 8069 5689
这篇文章给大家分享的是有关React中常用的两个Hook是什么的内容。小编觉得挺实用的，因此分享给大家做个参考，一起跟随小编过来看看吧。
按需求定制开发可以根据自己的需求进行定制，成都网站设计、做网站构思过程中功能建设理应排到主要部位公司成都网站设计、做网站的运用实际效果公司网站制作网站建立与制做的实际意义
Hook是React 16.8新增的特性，专门用在函数式组件，它可以代替class组件中react的其他特性，是实际工作中要常用到的。
hook是专门配合函数式组件开发使用的，可以用它代替class组件的一些生命周期，避免大量this引起的混乱，因此hook便于开发，且更易于让开发者理解代码
以上是个人的简单总结，更多原因可以参考react官网：
https://react.docschina.org/docs/hooks-intro.html#motivation
代码中：
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 (
点我会使variable+1
)
}代码中：
以下代码中可以看出，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 (
点我会使variable+1
)
}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内部也调用了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是什么”这篇文章就分享到这里了，希望以上内容可以对大家有一定的帮助，让大家可以学到更多知识，如果觉得文章不错，可以把它分享出去让更多的人看到吧！