• 状态提升


    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]);

  • 相关阅读:
    Codeforces Round #369 (Div. 2)
    poj3189二分图多重匹配
    a 标签传值
    phpStudy 虚拟主机
    wampserver 虚拟主机
    $file函数
    PHP脚本运行时间
    查询timestamp类型数据
    驼峰法
    easyUI导出数据
  • 原文地址:https://www.cnblogs.com/develon/p/15303636.html
Copyright © 2020-2023  润新知