React Hooks的深入理解与使用的深入理解与使用
主要介绍了React Hooks的深入理解与使用，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟
随小编过来看看吧
你还在为该使用无状态组件（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 (
<div>
<p>You clicked {this.state.count} times</p>
<button onClick={() => this.setState({ count: this.state.count + 1 })}>
Click me
</button>
</div>
);
}
}
我们再来看一下使用hooks后的版本：
import { useState } from 'react';
function Example() {
const [count, setCount] = useState(0);
return (
<div>
<p>You clicked {count} times</p>
<button onClick={() => setCount(count + 1)}>
Click me
</button>
</div>
);
}
是不是简单多了！可以看到，Example变成了一个函数，但这个函数却有自己的状态（count），同时它还可以更新自己的状
态（setCount）。这个函数之所以这么了不得，就是因为它注入了一个hook--useState，就是这个hook让我们的函数变成了一
剩余7页未读，继续阅读
资源评论
