在线时间:8:00-16:00
迪恩网络APP
随时随地掌握行业动态
扫描二维码
关注迪恩网络微信公众号
概念: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值发生变化才会触发: 多个值监测:
|
请发表评论