继续浏览精彩内容
慕课网APP
程序员的梦工厂
打开
继续
感谢您的支持,我会继续努力的
赞赏金额会直接到老师账户
将二维码发送给自己后长按识别
微信支付
支付宝支付

react的hook钩子

喵居
关注TA
已关注
手记 37
粉丝 6
获赞 35

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就能上手项目了。加油!!!


打开App,阅读手记
0人推荐
发表评论
随时随地看视频慕课网APP