网站新媒体建设方案,传奇网站如何建设,建公司网站要多久,微信公众号售卖#x1f9c1;个人主页#xff1a;个人主页
✌支持我 #xff1a;点赞#x1f44d;收藏#x1f33c;关注#x1f9e1; 文章目录⛳React Hooks#x1f4b8;useState(保存组件状态)#x1f948;useEffect(处理副作用)#x1f50b;useCallback#xff08;记忆函数#…个人主页个人主页
✌支持我 点赞收藏关注
文章目录⛳React HooksuseState(保存组件状态)useEffect(处理副作用)useCallback记忆函数useMemo(记忆组件)useRef(保存引用值)⛳React Hooks
使用hooks理由:
高阶组件为了复用导致代码层级复杂生命周期的复杂写成functional组件无状态组件因为需要状态又改成了class,成本高
hooks使用规则
只能在函数最外层调用 Hook。不要在循环、条件判断或者子函数中调用。只能在 React 的函数组件中调用 Hook。不要在其他 JavaScript 函数中调用。还有一个地方可以调用 Hook —— 就是自定义的 Hook 中
useState(保存组件状态)
语法
//导入 useState
import React,{useState}from react
..........................................
const [state,setState] useState(initialState)内容
返回一个state,以及修改state的函数在初始渲染期间返回的状态state与传入的第一个参数值 initialState值相同setState函数用于更新 state。它接收一个新的参数,并将组件的一次重新渲染加入队列。可以在一个组件中多次使用
修改state
//setState(newState)
setState(123)useEffect(处理副作用)
使用useEffect
在函数组件中要知道这个组件现在处在那个生命周期比较麻烦甚至有点无从下手这时候我们就可以使用hook中的useEffect()
注意
Function Component不存在生命周期所以不要把Class Component 的生命周期概念搬过来试图对号入座默认情况下,useEffect会在第一次渲染之后和每次更新之前都会执行
语法
useEffect((){.........
},[依赖;空数组表示不依赖])
//依赖在useEffect函数中使用的状态注意:如果明明使用了某个变量却没有申明在依赖中那么当依赖的变量改变时useEffect也不会再次执行控制台会报警告
清除effect
组件卸载时需要清除effect创建的如计时器或请阅等资源useEffect函数需要返回一个清除函数即可
useEffect((){//组件挂载创建计时器var timer setInterval((){console.log(111);},1000)........return (){//清除计时器 若无依赖时组件销毁clearInterval(timer)}
},[])useCallback记忆函数
防止因为组件重新渲染导致方法被重新创建起到缓存作用只有第二个参数变化了才能重新声明一次
语法
var handleClick useCallback((){console.log(name)},[name]
)
button onClick{()handleClick()}hello/button内容
当依赖不改变时方法不会被重建当只有当依赖name发生改变时这个函数才会被重新创建如果传入空数组name就是第一次创建后就被缓存name后期即使改变拿到的还是老的name如果不传第二个参数每次都会被重新声明一次拿到的就是最新的name
useMemo(记忆组件)
useCallback常用记忆事件函数生成记忆后的事件函数并传递给子组件使用。而useMemo更适合经过函数计算得到一个确定的值比如记忆组件
useMemo((){})useRef(保存引用值)
//相当于React.createRef()
const mytext useRef()
................input ref{mytext}/input如有错误请评论指出thankyou~ ✨✨✨创作不易如对您有帮助欢迎给博主点赞收藏给予鼓励哟
