ReactHooks的深入理解与使用-创新互联

你还在为该使用无状态组件（Function）还是有状态组件（Class）而烦恼吗？
——拥有了hooks，你再也不需要写Class了，你的所有组件都将是Function。

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

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

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

为什么引入Hooks?

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

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

一个最简单的Hooks

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

class Example extends React.Component {
 constructor(props) {
  super(props);
  this.state = {
   count: 0
  };
 }

 render() {
  return (
   

    
You clicked {this.state.count} times
     this.setState({ count: this.state.count + 1 })}>
     Click me
    
   
  );
 }
}

另外有需要云服务器可以了解下创新互联scvps.cn，海内外云服务器15元起步，三天无理由+7*72小时售后在线，公司持有idc许可证，提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案，具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势，专为企业上云打造定制，能够满足用户丰富、多元化的应用场景需求。