先介绍一下什么是hookHook是React16.8的一个新特性，专门用在函数式组件中。在类组件中可以替代React的其他特性，在实际工作中比较常用。到达的。为什么推荐使用hooks进行开发？Hooks专门用于功能组件的开发。它们可以用来替代一些类组件的生命周期，避免大量this造成的混乱。因此，hooks易于开发，开发者更容易理解代码以上是个人的简单总结。更多原因请参考react官网：https://react.docschina.org/d...useState代码中：React.useState(0)相当于在类组件中添加this.state属性值变量等同于this.state的值。类组件中的变量。setVariable可以用来修改变量的值，可以等同于this.setStateimportReact,(useState)from'react'exportdefaultfunctionintheclasscomponentuseState_Demo(){const[variable,setVariable]=useState(0);//我们通过解构赋值得到的variable和setVariable函数changeVariable(){setVariable((variable)=>variable+1)//setVariable的回调传入的参数是variable}render(
Iwillmakevariable+1
)}intheuseEffectcode:从下面的代码可以看出，useEffect的使用替代了componentDidMoun、componentDidUpdate的使用，以及类组件中的componentWillUnmountimportReact,(useState,useEffect)from'react'exportdefaultfunctionuseState_Demo(){const[variable,setVariable]=useState(0);//通过解构赋值，我们得到变量，setVariableuseEffect(()=>{//这个return在组件监听的数据发生变化或者被卸载时调用，当它是unmounted,调用可以相当于componentWillUnmounthookreturn()=>{console.log('Thecomponentisunmounted')}},[variable])//传第二个参数[variable],表示检测变量Update发生变化，一旦变量发生变化，useEffect的回调会再次执行//第二个参数传[]，表示无人检测，只执行一次useEffect的回调，相当于componentDidMounthook//第二个参数不传参，只要组件有状态变化，就会执行useEffect的回调，相当于componentDidUpdate钩子函数changeVariable(){setVariable((variable)=>variable+1)//回调中传入的参数ofsetVariableisvariable}render(
Iwillmakevariable+1
)}使用hooks注意事项1.只在组件的最外层使用Hooksfunctions,notinloops,conditions或者在嵌套函数中调用HookimportReact,(useEffect)from'react'exportdefaultfunctionuseState_Demo(){//这里是正确的useEffect(()=>{})//错误1,使用条件判断if(true){useEffect(()=>{})}//错误2，使用循环while(true){useEffect(()=>{})}//错误3，使用嵌套useEffect(()=>{useEffect(()=>{})})}2.不能在组件的函数外使用HookimportReact,(useState,useEffect)from'react'//错误1，在组件的函数外使用useStateconst[variable,setVariable]=useState(0);//错误2，在组件函数外使用useEffectuseEffect(()=>{})exportdefaultfunctionuseState_Demo(){//在组件函数中使用才是正确的const[variable,setVariable]=useState(0);}3.为了避免以上错误，可以安装eslint-plugin-react-hooksESLint插件来检查代码是否有错误。自定义挂钩是一个函数。自定义钩子是为了方便组件之间共享逻辑。其实就是为了对reuse函数进行封装，自定义hook也调用了react自带的hook，名字要以use开头//customhookfunctionuseHook(initState){const[variable,setVariable]=useState(initState)returnvariable;}//useCustomhookexportdefaultfunctionuseState_Demo(){constvariableState=useHook(0)}你可能会想，在多个组件中使用同一个Hook会共享状态吗？答案是：不是因为每个调用react自带的hook是相互独立的，所以自定义的hook如果重复调用也是相互独立的
