【react-hook】 useCallback

最新推荐文章于 2024-09-19 10:28:08 发布

折桂怀橘

最新推荐文章于 2024-09-19 10:28:08 发布

阅读量635

点赞数

分类专栏：前端相关知识文章标签： react.js javascript 前端

本文链接：https://blog.csdn.net/weixin_42910765/article/details/128344167

版权

本文探讨了在React中如何使用useCallback优化组件通讯，避免因函数引用变化引发的死循环问题。通过实例解释了在特定场景下，如何正确添加依赖以确保函数引用稳定，并提醒注意在使用事件监听时，由于组件重新渲染可能导致的绑定问题及解决方案。

摘要由CSDN通过智能技术生成

开始之前请注意这句话：任何优化都会增加复杂性，任何过早添加的优化都会带来风险，因为优化后的代码可能会多次更改

useEffect

相关作用：监听 & 初始化

//最简单用法
   useEffect(() => {
   
     //只有方法体，相当于componentDidMount和componentDidUpdate中的代码
    document.title = count;
  })
  //加返回值用法
  useEffect(() => {
   
    //添加监听事件，相当于componentDidMount和componentDidUpdate中的代码
    window.addEventListener('resize', onChange, false);
    //返回的函数用于解绑事件，相当于componentWillUnmount中的代码
    return () => {
   
      window.removeEventListener('resize', onChange, false)
    }
  })
  //加空数组参数用法
  useEffect(() => {
   
    // 相当于 componentDidMount
    window.addEventListener('resize', onChange, false)
    return () => {
   
      // 相当于 componentWillUnmount
      window