React中什么是常用的两个Hook？

本文共计1161个文字，预计阅读时间需要5分钟。

本篇文章带大家了解一下React中的hook，聊聊为什么推荐使用hook进行开发，并介绍React最常用的两个hook。希望对大家有所帮助！

首先，什么是hook？

Hook是React 16.8新增的特性，允许在不编写类的情况下使用state以及其他React特性。它使函数组件拥有了类组件的某些能力。

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

1. 简化组件结构：使用hook可以避免在组件中混入逻辑和UI，使组件结构更清晰。

2.代码复用：hook可以方便地提取和复用逻辑，提高代码可维护性。

3.学习成本降低：hook降低了学习React的门槛，使得函数组件和类组件可以无缝切换。

接下来，介绍React最常用的两个hook：

1. useState：用于在函数组件中添加state。

javascript

import React, { useState } from 'react';

function Counter() { const [count, setCount]=useState(0);

return (

You clicked {count} times

);}

2. useEffect：用于在组件渲染后执行副作用操作。

javascriptimport React, { useState, useEffect } from 'react';

function Example() { const [count, setCount]=useState(0);

useEffect(()=> { document.title=`You clicked ${count} times`; });

return (

You clicked {count} times

);}

希望这篇文章对大家有所帮助！

本篇文章带大家了解一下hook，聊聊为什么推荐使用hook进行开发，并介绍一下React最常用的两个Hook，希望对大家有所帮助！

先介绍一下什么是hook

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

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

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

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

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

更多编程相关知识，请访问：编程入门！！

以上就是什么是hook？聊聊React中常用的两个Hook的详细内容，更多请关注自由互联其它相关文章！