为了账号安全,请及时绑定邮箱和手机立即绑定

react的hook钩子

标签:
React.JS

react组件有两种写法一种是export default直接暴露一个function,还有一种是直接定义一个class类然后继承react库的Component类这两种方式来创建react组件。

对于class类创建react组件的方式来说可以直接定义组件的this.state,这样在render中return的jsx模板中就可以直接this.state调用,以及this.setState来更新this.state的参数并更新视图。!!!注意:class类创建的组件不能使用hook。

对于function创建react组件的方式不需要继承react库的Component类,而且不能直接通过this.state设置组件中的数据。这时候就需要用到hook了,hook是针对function创建react组件设置state数据使用的。!!!注意:function创建react组件不能使用this.state。

下面直接看代码吧

import React, { useState,useEffect } from 'react';

export default function Hook() {
  const [count, setCount] = useState(0);
  const [boller, setBoller] = useState(false)
  useEffect(() => {
    console.log('count')
  },[count])
  useEffect(() => {
    console.log('boller')
  },[boller])
  return (
    <div>
      <p> {count} {boller ? 'true' : 'false'} </p>
      <button onClick={() => {setCount(count + 1); setBoller(!boller)}}>
        点击
      </button>
    </div>
  );
}

hook需要用到react库的useState;定义一个hook数组,数组第一个传入的是state数据的名字,数组第二位是方法用来更新这个hook的数据;useState传入的是该hook的默认值。这样一个hook就定义完成了,点击button按钮调用对应更新hook的方法来改变hook和更新视图。

上面还提到了useEffect这个api,这个api主要是在更新这个hook的数据的方法执行后的一个回调方法可以传入两个参数,第一个参数是一个callback回调函数;第二个参数是对应哪写hook更新后才执行不传为所有hook更新都执行,形式为数组。useEffect有点类似vue中的watch监听。

最近的taro项目里面学到了不少之前react中没有注意到的知识点,果然自学的认知还是比较局限的。估计这次taro的项目做完react就能上手项目了。加油!!!


点击查看更多内容
TA 点赞

若觉得本文不错,就分享一下吧!

评论

作者其他优质文章

正在加载中
Web前端工程师
手记
粉丝
6
获赞与收藏
35

关注作者,订阅最新文章

阅读免费教程

  • 推荐
  • 评论
  • 收藏
  • 共同学习,写下你的评论
感谢您的支持,我会继续努力的~
扫码打赏,你说多少就多少
赞赏金额会直接到老师账户
支付方式
打开微信扫一扫,即可进行扫码打赏哦
今天注册有机会得

100积分直接送

付费专栏免费学

大额优惠券免费领

立即参与 放弃机会
意见反馈 帮助中心 APP下载
官方微信

举报

0/150
提交
取消