标签：function 典型 return el hooks current 案例 const ref

获取组件宽高

效果：通过调用 useComponentSize 拿到某个组件 ref 实例的宽高，并且在宽高变化时，rerender 并拿到最新的宽高。

import React, { useLayoutEffect, useState, useRef } from 'react';
 
function getSize(el) {
  if (!el) {
    return {};
  }
 
  return {
    width: el.offsetWidth,
    height: el.offsetHeight,
  };
}
 
function useComponentSize(ref) {
  const [ComponentSize, setComponentSize] = useState(getSize(ref.current));
 
  function handleResize() {
    if (ref && ref.current) {
      setComponentSize(getSize(ref.current));
    }
  }
 
  useLayoutEffect(() => {
    handleResize();
 
    let resizeObserver = new ResizeObserver(() => handleResize());
    resizeObserver.observe(ref.current);
 
    return () => {
      resizeObserver.disconnect(ref.current);
      resizeObserver = null;
    };
  }, []);
  return ComponentSize;
}
 
export default function Demo() {
  const ref = useRef(null);
  const componentSize = useComponentSize(ref);
  return (
    <>
      {componentSize.width}
      <textarea ref={ref} />
    </>
  );
}

拿到组件 onChange 抛出的值 

效果：通过 useInputValue() 拿到 Input 框当前用户输入的值，而不是手动监听 onChange 再腾一个 otherInputValue 和一个回调函数把这一堆逻辑写在无关的地方。

import React, { useState, useCallback } from 'react';
 
function useInputValue(initialValue) {
  const [value, setValue] = useState(initialValue);
  const onChange = useCallback(function(e) {
    setValue(e.currentTarget.value);
  }, []);
  return {
    value,
    onChange,
  };
}
 
export default function Demo() {
  const name = useInputValue('jjsun');
  return (
    <>
      {name.value}
      <input {...name} />
    </>
  );
}

关注我，一起学前端 

标签：function,典型,return,el,hooks,current,案例,const,ref
来源： https://blog.csdn.net/qq_39606853/article/details/122513827

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。