30分钟精通React今年最劲爆的新特性——React Hooks
版权申诉
39 浏览量
2020-10-17
07:51:20
上传
评论
收藏 132KB PDF 举报
30分钟精通分钟精通React今年最劲爆的新特性今年最劲爆的新特性——React Hooks
主要介绍了30分钟精通React今年最劲爆的新特性——React Hooks，小编觉得挺不错的，现在分享给大家，也
给大家做个参考。一起跟随小编过来看看吧
你还在为该使用无状态组件（Function）还是有状态组件（Class）而烦恼吗？
——拥有了hooks，你再也不需要写Class了，你的所有组件都将是Function。
你还在为搞不清使用哪个生命周期钩子函数而日夜难眠吗？
——拥有了Hooks，生命周期钩子函数可以先丢一边了。
你在还在为组件中的this指向而晕头转向吗？
——既然Class都丢掉了，哪里还有this？你的人生第一次不再需要面对this。
这样看来，说React Hooks是今年最劲爆的新特性真的毫不夸张。如果你也对react感兴趣，或者正在使用react进行项目开
发，答应我，请一定抽出至少30分钟的时间来阅读本文好吗？所有你需要了解的React 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让我们的函数变成了一个
有状态的函数。
除了useState这个hook外，还有很多别的hook，比如useEffect提供了类似于componentDidMount等生命周期钩子的功
能，useContext提供了上下文（context）的功能等等。
Hooks本质上就是一类特殊的函数，它们可以为你的函数型组件（function component）注入一些特殊的功能。咦？这听起来
有点像被诟病的Mixins啊？难道是Mixins要在react中死灰复燃了吗？当然不会了，等会我们再来谈两者的区别。总而言之，这
些hooks的目标就是让你不再写class，让function一统江湖。
React为什么要搞一个为什么要搞一个Hooks？？
想要复用一个有状态的组件太麻烦了！想要复用一个有状态的组件太麻烦了！
资源评论
