Question

我有一个问题要使用react hook API

const Example: FC = (props) => {
    const [str, setStr] = useState('example');
    const onClickCb = useCallback(() => {
        setStr(str + '_');
    }, [str, setStr]); // should I need watch setStr?
    return <button onClick={onClickCb}>{str}</button>;
};

Answer 1

否，您不需要添加setStr，因为它在组件的生存期内不会更改。但是添加它也不会造成太大危害，因为它不会改变。

来自useState react docs：

注意

React保证setState功能标识是稳定的，并且不会在重新提供时更改。这就是为什么可以安全地从useEffect或useCallback依赖项列表中省略的原因。

但是您绝对应该删除str。不应基于当前状态react may batch multiple calls to setState更新状态。这可能会导致更新在短时间内丢失。而是使用setState的回调版本：

const Example: FC = (props) => {
    const [str, setStr] = useState('example');
    const onClickCb = useCallback(() => setStr(current => `${current}_`)), []);
    return <button onClick={onClickCb}>{str}</button>;
};

React Hook API，我需要为SetStateAction设置set deps吗？

1 个答案: