• 状态提升


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

  • 相关阅读:
    Microsoft Dynamics CRM 常用JS语法(已转成vs2017语法提示)
    IIS7如何实现访问HTTP跳转到HTTPS访问
    C#调用PB写的com组件dll
    C# winform程序免安装.net framework在XP/win7/win10环境运行!
    文件上传漏洞
    OWASP TOP 10
    sql
    ASCII码查看
    sql注入--mysql
    sql注入--access
  • 原文地址:https://www.cnblogs.com/develon/p/15303636.html
Copyright © 2020-2023  润新知