仅在更新时使用 React useEffect

你有没有想过，Redact 的 useEffect Hook 只在更新时运行的最佳方法是什么？你有没有考虑过使用 Redact 的 useRef Hook 作为创建实例变量并跟踪组件生命周期的解决方案？

当需要在不使用 React 的重新渲染机制的情况下持续跟踪某些状态时，我们可以在 React 的函数式组件中定义一个 ref 变量。例如，我们可以判断某个组件是第一次渲染还是重新渲染。首先，考虑以下示例：

const UseEffectUpdates = () => {

    const[ txtValue, setTxtValue] = useState({
        value1:"",
        value2:""
    })
    const [txtColor, setTxtColor] = useState("white");

    const [toggle, setToggle] = useState(true);
    const didMount = useRef(false);
    const handleToggle = () => {
        setToggle(!toggle);
    };

    const txtChange1 = (event)=>{
        event.preventDefault();
        console.log("textbox change 1");
        setTxtValue({...txtValue, value1:event.target.value});
        if (txtValue.value2 ===  event.target.value){
            setTxtColor("green");
        }
    }

    const txtChange2 = (event)=>{
        event.preventDefault();
        console.log("textbox change 2");
        setTxtValue({...txtValue, value2:event.target.value})
        if(txtValue.value1 === event.target.value){
            setTxtColor("green")
        }
    }

    useEffect(() => {
        if (didMount.current) {
        console.log('I run only if toggle changes.');
        } else {
        didMount.current = true;
        }
    }, [toggle]);

    return (
        <div>
            <input style={{backgroundColor:txtColor}} type="text"  placeholder="name1" onChange={txtChange1}  value={txtValue.value1}/>
            <br/>
            <input style={{backgroundColor:txtColor}} type="text"  placeholder="name2" onChange={txtChange2}  value={txtValue.value2}/>
            <br/>
            <button type="button" onClick={handleToggle}>
                Toggle
            </button>        
        </div>
    );
};

在上面的示例代码中，didMount 变量初始化为 true，因为它在初始化时应该是第一次渲染的组件。此外，还使用带有 toggle 依赖项的 useEffect hook，在组件首次渲染后更新 ref 的 current 属性 (didMount)。当 didMount 为 false 时，它不会触发重新渲染。运行上述代码时，useEffect 仅在点击 toggle 按钮时运行，并且 handleToggle 事件会运行。另一方面，当文本框发生变化时，useEffect 不会运行。

就这样。如果你想跟踪 React 组件的状态，但又不至于导致组件重新渲染，可以使用 React 的 useRef Hooks 为其创建实例变量。

鏂囩珷鏉ユ簮锛�https://dev.to/fpaghar/react-useeffect-only-on-update-4oj7