Javascript 如何为函数值创建React上下文而无需始终重新呈现

我正在使用React with Hook（没有类组件）

我目前有如下代码：

函数useTimerange（）
{
const[tr，setTr]=useState（默认范围）；
功能设置自定义范围（范围）
{
setTr（范围）；
}
返回{tr，setCustomRange}；
}
const ContextSetCustomTimerange=React.createContext（未定义）；
功能MyComponent（道具）
{
const{tr，setCustomRange}=useTimerange（）；
返回(
);
}

问题出在这一行：

由于传递的值是每次MyComponent呈现时重新创建的函数，因此它将导致上下文提供程序每次重新呈现其所有使用者

---

防止这种情况的最佳方法是什么？

您可以从react hooks使用

useCallback

或者可以直接返回

setTr

---

返回{tr，setCustomRange:setTr}
您可以使用react hooks中的
useCallback

或者可以直接返回
setTr

返回{tr，setCustomRange:setTr}
这里的性能问题是，如果
setCustomRange
更改了它的引用，它将触发对上下文的所有使用者的渲染，因为react是比较引用的

我认为，
useCallback
with[]，就像Giang提到的那样，会在看起来是最好的主意时做到这一点

您还可以将状态传递给提供程序值，并将函数置于状态；由于保留了状态引用，并且当react将旧值与新值进行比较时，它将检测到相同的值，而不进行处理。
这里的性能问题是，如果
setCustomRange
更改了它的引用，它将触发呈现上下文的所有使用者，因为react正在比较引用

我认为，
useCallback
with[]，就像Giang提到的那样，会在看起来是最好的主意时做到这一点

您还可以将状态传递给提供程序值，并将函数置于状态；由于状态引用被保留，并且当react将旧值与新值进行比较时，它将检测到相同的值，而不处理该值

import { useCallback } from 'react'

function useTimerange()
{
    const [tr, setTr] = useState(defaultRange);
    const setCustomRange = useCallback((range) => {
      setTr(range);
    }, [])

    return {tr, setCustomRange};
}