javascript - 如何在React中触发useCallback

Question

我有一个 React(版本使用 16.8)组件，我有一个 const updateDiffText = useCallback(() 点击 anchor 时的回调 GENERATE DIFF onclick onClick={updateDiffText} 我回调这个updateDiffText

我的要求是我不想在我的 UI 中使用 anchor 代码，我希望每当我有 oldText 和 newText 时它都应该触发方法 updateDiffText 并显示结果。用户不应单击 anchor 链接来执行此操作。

我的代码沙箱在这里 - 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>
    );
};

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

Answer 1

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

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