搜索

回答

hooks的出现改变了原始的React类的开发方式，改用了函数形式;它改变了复杂的状态操作形式，让程序员用起来更轻松;它改变了一个状态组件的复用性，让组件的复用性大大增加。主要有以下几种hooks

一、useState

// 声明状态
const [ count , setCount ] = useState(0);

// 使用状态
<p>You clicked {count} times</p>
<buttonBfwOnClick={()=>{setCount(count+1)}}>click me</button>

二、useEffect

一个参数

useEffect(()=>{
   console.log("首次渲染与更新")
})

模拟:

componentDidMount componentDidUpdate

一个参数带return

useEffect(()=>{
   console.log("首次渲染与更新")
   return ()=>{console.log(首次卸载)}
})

模拟:

componentDidMount
componentDidUpdate
return

componetWillUnmount

componentDidUpdate

第二个参数是空数组,return

useEffect(()=>{
  console.log("首次渲染与更新")
  return ()=>{console.log(首次卸载)}
},[])

相对于生命周期的componentDidMount和componetWillUnmount

第二个参数是具体的值

useEffect(()=>{
  console.log("首次渲染与更新")
   return ()=>{console.log(首次卸载)}
},[num])

模拟

componentDidMount
componentDidUpdate(update只对num有用)
return

componetWillUnmount

componentDidUpdate(update只对num有用)

三、useRef

const inp = useRef(null)
<input ref={inp}>

//调用

inp.current.value

四、自定义hook

定义：const [size,setSize] = useState({height:xxx,width:xxx})

处理：

constBfwOnResize= ()=>{setSize({width:xxx,height:xxx})}

useEffect(()=>{

监听事件 window.addEventListener(“resize”,onResize)

return 移除监听()=>window.removeEventListener(“resize”,onResize)

},[])

返回 return size

使用 const size = useWinSize()

网友回复

我知道答案，我要回答

我有问题

回答

如何将linux服务器的文件目录映射到windows电脑磁盘？

Docling 与 MarkItDown 两个库有啥不同？

豆包收费后国产其他ai软件也会跟进收费吗？

JPEG 与 HEIF图片格式区别？

centos7版本太旧无法安装python3.11，如何在docker中运行python3.11？

python如何做个RPA按键精灵的程序？

写一个windows的cmd的python代码如何在命令行中捕获获取复制粘贴的图片？

如何将别人爆款的抖音短视频短剧文案提取为seedance2的提示词？

阿里云域名dns云解析10万次日限额如何应对？

windows电脑如何提交上架ipa苹果应用？