如何在 React 中触发 useCallback

Posted 2023-02-21

【中文标题】如何在 React 中触发 useCallback

【英文标题】：How to trigger the useCallback in React

【发布时间】：2020-01-21 04:30:35

【问题描述】：

我有一个 React（版本使用 16.8）组件，我有一个 const updateDiffText = useCallback(() 锚点点击回调 GENERATE DIFF onclick onClick=updateDiffText 我回调这个 updateDiffText

我的要求是我不想在我的 UI 中有一个锚代码，只要我有 oldText 和 newText 它应该触发方法 updateDiffText 并显示结果。用户不应单击锚链接来执行此操作。

我的代码沙盒在这里 - https://codesandbox.io/s/react-diff-view-demo-htp06 如果我在 oldtext 和 newText 中有值，它应该调用 updateDiffText 这个方法

我的代码 -

const DiffViewer = props => 
    const oldText = useInput(props.startupConfigData);
    const newText = useInput(props.runningConfigData);
    const [ type, hunks , setDiff] = useState("");
    const updateDiffText = useCallback(() => 
        const diffText = formatLines(diffLines(oldText.value, newText.value), 
            context: 3
        );
        const [diff] = parseDiff(diffText,  nearbySequences: "zip" );
        setDiff(diff);
    , [oldText.value, newText.value, setDiff]);

    const tokens = useMemo(() => tokenize(hunks), [hunks]);

    return (
        <div style= height: "450px", overflow: "auto" >
            <a href="#" onClick=updateDiffText>
                GENERATE DIFF
            </a>

            setDiff ? (
                <Diff
                    viewType="split"
                    diffType=type
                    hunks=hunks || EMPTY_HUNKS
                    tokens=tokens
                >
                    hunks => hunks.map(hunk => <Hunk key=hunk.content hunk=hunk />)
                </Diff>
            ) : (
                ""
            )
        </div>
    );
;

如果查询不清楚，请告诉我。谢谢。

【参考方案1】：

尝试使用 useEffect 而不是 useCallback。在您的情况下，您没有在渲染阶段调用 memoized 函数。 useCallback 将返回一个记忆函数。检查修改后的版本。

https://codesandbox.io/s/react-diff-view-demo-izdyi

【讨论】：

你能告诉我[oldText.value, newText.value], setDiff这是做什么用的吗谢谢。

我们不需要 setDiff，它会被 useEffect 忽略。我现在已经删除了。

谢谢。我有一个查询 [***.com/questions/58004555/… 你认为 useEffect 是否也会帮助我。

我在 useEffect 中的 oldText.value 和 newText.value 上总是有相同的值，再次点击它的值不会更新。因为 useEffect 只调用了一次。当组件加载时。有什么建议吗？

useEffect 将在每次依赖项更改时调用，在您的情况下，如果 oldText.value 或 newText.value 发生任何更改，它将被调用。

【参考方案2】：

const updateDiffText = useCallback(() => 
    const diffText = formatLines(diffLines(oldText.value, newText.value), 
        context: 3
    );
    const [diff] = parseDiff(diffText,  nearbySequences: "zip" );
    setDiff(diff);
, [props.startupConfigData, props.runningConfigData]);

到

const updateDiffText = useCallback(() => 
    const diffText = formatLines(diffLines(oldText.value, newText.value), 
        context: 3
    );
    const [diff] = parseDiff(diffText,  nearbySequences: "zip" );
    setDiff(diff);
, [oldText.value, newText.value, setDiff]);

///////////////////////////////////////////////////////////////// ///////////// 我建议的新解决方案 ////////////////////////// ///

const updateDiffText = () => 
// do what you wanna do 

并像这样使用 useEffect 而不是 useCallback

useEffect(() => 
   updateDiffText();
,[props.startupConfigData, props.runningConfigData])

【讨论】：

谢谢你的回答，但这不起作用，我有两个道具的价值，但它仍然没有进入这个函数。

如果我知道你到底想做什么并知道你的代码结构，我想我可以更好地帮助你

这是我创建的代码沙箱，codesandbox.io/s/react-diff-view-demo-htp06 如果我在 oldtext 和 newText 中有值，它应该调用 updateDiffText 这个方法。

你有 oldtext 和 newText 作为道具吗？

reactjs.org/docs/hooks-effect.html你可以从这里看到如何将生命周期方法替换为useEffect