关于前端:React最常用的两个Hook

4次阅读

共计 2382 个字符，预计需要花费 6 分钟才能阅读完成。

Hook 是 React 16.8 新增的个性，专门用在函数式组件，它能够代替 class 组件中 react 的其余个性，是理论工作中要罕用到的。

hook 是专门配合函数式组件开发应用的，能够用它代替 class 组件的一些生命周期，防止大量 this 引起的凌乱，因而 hook 便于开发，且更易于让开发者了解代码

以上是集体的简略总结，更多起因能够参考 react 官网：https://react.docschina.org/d…

代码中：

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 的应用代替了在 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>
    )
}

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 被多次重复调用也是单独互不影响的

正文完