• 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    公众号

(React+TypeScript实战篇)二.ReactHook

原作者: [db:作者] 来自: [db:来源] 收藏 邀请

概念:hook是react16.8新增特性。它可以让你在不编写class的情况下使用state以及其他的React特性。

 

一.useState

说明:useState---组件状态管理钩子

    useState使函数组件能够使用state

1.基本使用规则

const [state, setState] = useState(initState);

    ·state是要设置的状态

    ·setState是更新state的方法

    ·initState是初始的state,可以是随意的数据类型,也可以是回调函数,但是函数必须是有返回值。

2.案例

 

二.useEffect

说明:

    useEffect是副作用处理的钩子,数据获取、订阅、定时执行、手动修改ReactDOM这些行为

    useEffect也是componentDidMount、componentDidUpdate和componentWillUnmount这几个生命周期方法的统一

1.基本使用

useEffect(callback, array)

    参数callback:

    回调函数,作用是处理副作用逻辑,callback可以返回一个函数,用作清理

    参数array【可选】:

    数组,用于控制useEffect的执行。

        空数组,只会执行一次(即初次渲染render),相当于componentDidMount

        非空数组,useEffect会在数组发生改变后执行

        不填array这个数组,useEffect组件每次渲染都会执行

1)不填array数组案例

2)案例(监控点击事件,获取坐标,同时每次设置之后需要移除)

3)案例:控制useEffect的执行,修改前面两个例子的代码

a.设置成挂载和卸载的时候执行useEffect第二个参数设置成空数组

useEffect(()=>{...}, []);

在app.tsx中设置组件的卸载挂载

b.传递非空数组情况

用之前的这个案例进行设置

设置之后的,只监测age值发生变化才会触发:

多个值监测:

 

 

 

 

 

 


鲜花

握手

雷人

路过

鸡蛋
该文章已有0人参与评论

请发表评论

全部评论

专题导读
上一篇:
7个拒绝使用TypeScript的借口发布时间:2022-07-18
下一篇:
2、你能读得懂的TypeScript教程之基础数据类型发布时间:2022-07-18
热门推荐
热门话题
阅读排行榜

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

在线客服(服务时间 9:00~18:00)

在线QQ客服
地址:深圳市南山区西丽大学城创智工业园
电邮:jeky_zhao#qq.com
移动电话:139-2527-9053

Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap