Javascript 当值相同时，使用callback get executed

我有一个组件，每次我移动鼠标时，他都会重新计算dom上垂直线的位置，光标的位置移动也会导致一些副作用，使上面的静态文本总是重新渲染

为了避免这种情况，我尝试使用回调挂钩，如下所示：

const renderSection = useCallback(() => {
  console.log('title: ', title);
  return (
    <Header>
      <HeaderTitle>{title}</HeaderTitle>
    </Header>
  );
}, [title]);

不知何故，即使标题相同，控制台日志也会被执行，并且我会再次看到相同的标题，我将标题指定为回调的依赖项，但我不确定我做错了什么，有什么帮助吗

---

谢谢

看起来您需要的是

usemo

钩子

const renderSection = useMemo(() => {
  console.log('title: ', title);
  return (
    <Header>
      <HeaderTitle>{title}</HeaderTitle>
    </Header>
  );
}, [title]);

---

useCallback为子组件提供函数（回调）时使用。例如：

const Parent = () => {
   const [value, setValue] = useState()

   const handleChange = useCallback((newValue) => {
      setValue(newValue)
   }, [dependencies])

   return(
      <Input onChange={handleChange} value={value} />
   )
}

const Input = /* Input component */

export default React.memo(Input)

const Parent=（）=>{
const[value，setValue]=useState（）
const handleChange=useCallback（（newValue）=>{
设置值（新值）
}，[dependencies]）
返回(
)
}
常量输入=/*输入组件*/
导出默认反应备忘录（输入）

---

由于我们将函数（回调）传递给输入，因此在每次渲染时，组件中指向函数的链接都会更改，尽管其内容没有更改。React会认为属性已更改

useCallback

允许您保存指向函数的链接，直到dependencies中声明的依赖项发生更改。因此，将

输入

包装到

React.memo中

并使用

useCallback

，我们可以避免不必要的重新渲染。

我认为您正在寻找

React.memo（）

而不是

useCallback（）

。你所拥有的不是回调，而是函数。你是对的，它工作了，我不太理解两者之间的区别：/。谢谢

const Parent = () => {
   const [value, setValue] = useState()

   const handleChange = useCallback((newValue) => {
      setValue(newValue)
   }, [dependencies])

   return(
      <Input onChange={handleChange} value={value} />
   )
}

const Input = /* Input component */

export default React.memo(Input)