状态提升

import './index.html';
import './index.global.css';
import * as ReactDOM from 'react-dom';
import * as React from 'react';

var A: React.FC<{ v: number, setV: React.Dispatch<React.SetStateAction<number>> }> = ({ v, setV }) => {

    const [ s, setS ] = React.useState(v - 1);

    var ch = React.useCallback((e: React.SyntheticEvent<HTMLInputElement>) => {
        setS(parseInt(e.currentTarget.value) || 0);
    }, [ ]);

    React.useEffect(() => {
        setS(v - 1);
    }, [ v ]);

    React.useEffect(() => {
        setV(s);
    }, [ s ]);

    return < >
        <input type="text" value={s} onChange={ch} />
    </>
}

var B: React.FC<{ v: number, setV: React.Dispatch<React.SetStateAction<number>> }> = ({ v, setV }) => {

    const [ s, setS ] = React.useState(v + 1);

    var ch = React.useCallback((e: React.SyntheticEvent<HTMLInputElement>) => {
        setS(parseInt(e.currentTarget.value) || 0);
    }, [ ]);

    React.useEffect(() => {
        setS(v + 1);
    }, [ v ]);

    React.useEffect(() => {
        setV(s - 1);
    }, [ s ]);

    return < >
        <input type="text" value={s} onChange={ch} />
    </>
}

var App: React.FC<{ }> = ({ }) => {

    const [ v, setV ] = React.useState(20);

    React.useEffect(() => {
    }, []);

    return < >
        <div>real: {v}</div>
        <A v={v} setV={setV} />
        <B v={v} setV={setV} />
    </>
}

ReactDOM.render(
    < >
        <App />
    </>
, /* container */ document.querySelector('#app'));

var A = function (_a) { var v = _a.v, setV = _a.setV; var _b = React.useState(v - 1), s = _b[0], setS = _b[1]; var ch = React.useCallback(function (e) { setS(parseInt(e.currentTarget.value) || 0); }, []); React.useEffect(function () { setS(v - 1); }, [v]); React.useEffect(function () { setV(s); }, [s]); return React.createElement(React.Fragment, null, React.createElement("input", { type: "text", value: s, onChange: ch })); }; var B = function (_a) { var v = _a.v, setV = _a.setV; var _b = React.useState(v + 1), s = _b[0], setS = _b[1]; var ch = React.useCallback(function (e) { setS(parseInt(e.currentTarget.value) || 0); }, []); React.useEffect(function () { setS(v + 1); }, [v]); React.useEffect(function () { setV(s - 1); }, [s]); return React.createElement(React.Fragment, null, React.createElement("input", { type: "text", value: s, onChange: ch })); }; var App = function (_a) { var _b = React.useState(20), v = _b[0], setV = _b[1]; React.useEffect(function () { }, []); return React.createElement(React.Fragment, null, React.createElement("div", null, "real: ", v), React.createElement(A, { v: v, setV: setV }), React.createElement(B, { v: v, setV: setV })); };

ReactDOM.render(React.createElement(App), $('div#my_app')[0]);