反应钩子的深入理解与使用

　　

你还在为该使用无状态组件(函数)还是有状态组件(类)而烦恼吗?
　　——拥有了钩子,你再也不需要写类了,你的所有组件都将是函数。
　　

　　

你还在为搞不清使用哪个生命周期钩子函数而日夜难眠吗?
　　——拥有了钩子,生命周期钩子函数可以先丢一边了。
　　

　　

你在还在为组件中这个指的向而晕头转向吗?
　　——既然类都丢掉了,哪里还有吗?你的人生第一次不再需要面对。
　　

　　

这样看来,说反应钩子是今年最劲爆的新特性真的毫不夸张。如果你也对反应感兴趣,或者正在使用反应进行项目开发,答应我,请一定抽出至少30分钟的时间来阅读本文好吗?所有你需要了解的反应钩子的知识点,本文都涉及到了,相信完整读完后你一定会有所收获。

　　

<强>为什么引入钩子# 63;

　　

反应官方给出的动机是用来解决长时间使用和维护反应过程中遇到的一些难以避免的问题。比如:
　　1。难以重用和共享组件中的与状态相关的逻辑
　　2. 逻辑复杂的组件难以开发与维护,当我们的组件需要处理多个互不相关的本地状态时,每个生命周期函数中可能会包含着各种互不相关的逻辑在里面。
　　3.这类组件中的增加学习成本,类组件在基于现有工具的优化上存在些许问题。
　　4 .由于业务变动,函数组件不得不改为类组件等等。

　　

在进一步了解之前,我们需要先快速的了解一些基本的钩子的用法。

　　

<强>一个最简单的钩子
　　

　　

首先让我们看一下一个简单的有状态组件:

　　 　　 　　类的例子延伸反应。组件{ 　　构造函数(道具){ 　　超级(道具); 　　这一点。状态={ 　　数:0 　　}; 　　} 　　 　　呈现(){ 　　回报( 　　& lt; div> 　　& lt; p>你点击{this.state。数}times

　　& lt;按钮> 　　从“反应”进口{useState}; 　　 　　函数的例子(){ 　　const[计数,setCount]=useState (0); 　　 　　回报( 　　& lt; div> 　　& lt; p>你点击{数}times

　　& lt;按钮> 　　从“组件/猫”进口的猫 　　类所延伸的反应。组件{ 　　构造函数(道具){ 　　超级(道具); 　　这一点。状态={目标:扎克的}; 　　} 　　 　　呈现(){ 　　回报( 　　& lt; div> 　　{this.props.render (this.state)} 　　& lt;/div> 　　) 　　} 　　} 　　 　　& lt; DataProvider渲染==https://www.yisu.com/zixun/>{数据( 　　<猫目标={数据。目标}/> 　　)}/> 　　 　　之前 　　 　　

虽然这个模式叫呈现道具,但不是说非用一个叫渲染的道具不可,习惯上大家更常写成下面这种:

　　 　　 　　… 　　& lt; DataProvider> 　　{数据=https://www.yisu.com/zixun/> ( 　　<猫目标={数据。目标}/> 　　)} 　　 　　之前 　　 　　

高阶组件这个概念就更好理解了,说白了就是一个函数接受一个组件作为参数,经过一系列加工后,最后返回一个新的组件。看下面的代码示例,订货函数就是一个高阶组件,它返回了一个新的组件,这个组件具有了它提供的获取用户信息的功能。

　　 　　 　　const订货=WrappedComponent=比;{ 　　const用户=sessionStorage.getItem(“用户”); 　　返回道具=比;& lt; WrappedComponent用户={user} {…道具}/祝辞;; 　　}; 　　 　　const UserPage=道具=比;（ 　　& lt; div类=皍ser-container”比; 　　& lt; p>我叫{props.user} ! & lt;/p> 　　& lt;/div> 　　); 　　出口默认订货(UserPage); 　　之前 　　 　　

以上这两种模式看上去都挺不错的,很多库也运用了这种模式,比如我们常用的路由器反应。但我们仔细看这两种模式,会发现它们会增加我们代码的层级关系。最直观的体现,打开devtool看看你的组件层级嵌套是不是很夸张吧。这时候再回过头看我们上一节给出的钩子例子,是不是简洁多了,没有多余的层级嵌套。把各种想要的功能写成一个一个可复用的自定义钩,当你的组件想用什么功能时,直接在组件里调用这个钩即可。

　　

反应钩子的深入理解与使用