对于React Hooks的理解

React组件可以分为 类组件函数组件类组件具有生命周期、状态,而函数组件却没有。
React 16.8 新出来的Hooks 可以让React函数组件具有状态,并且提供了类似componentDidMountcomponentDidUpdate 等生命周期方法。

栗子🌰:
我们写一个函数组件,如果想要更新它的状态,在 React 16.8版本之前,就得重写成 类组件。

在 React 16.8 出来的Hooks 之后,这就变得简单多了。
使用新的 useState hook 向普通函数组件添加状态。

const [clicked,useClicked] = useState(false);

// 分离出来写法
const arr = useState(false);
const clicked = arr[0];
const useClicked = arr[1];

Hooks 在16.8版本之后可以使用,它能让我们在不使用class就能使用state和其它的react的特性。
比如:之前我们想要用state必须先写一行:

class App extends React.Component{}

这样才能用state和setState,但是现在有了hooks,就不需要了。我们可以在普通函数组件里面使用hooks实现之前class里的state、生命周期等。

为什么要使用hooks呢?
因为setState。生命周期之类的函数其实是定义给组件的一些钩子函数,它们被耦合在了class里面,所以我们定义有状态组件和有生命周期的组件必须定义class。而hooks的出现,把这些功能性的钩子和class分离开了。
hooks包含 state hook 、effect hook、context hook等基础的hooks,还有一些自定义hooks和一些其他的钩子,可以再官方文档里面查看。

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

派大星_study

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值