react useState实现原理监听变量变化

最新推荐文章于 2024-06-28 16:59:14 发布

置顶百度一下吧

最新推荐文章于 2024-06-28 16:59:14 发布

阅读量1.1k

点赞数

分类专栏：前端文章标签： react.js javascript 前端

本文链接：https://blog.csdn.net/qq_45393395/article/details/125099121

版权

前端专栏收录该内容

37 篇文章 1 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>监听变量变化</title>
</head>
<body>
    <input id="data"  />
    <input id="data1"  />
    <script>
        var dom = document.querySelector('#data');
        var dom1 = document.querySelector('#data1');
       
        var a = 1;
        var initData = 0;
        var currentStateBox = [];
        let index = -1;

       
        function useState(init) {
            index++;
            var currentIndex = index;
            currentStateBox[index] =  currentStateBox[currentIndex] || init;
            var setInit = (newData) => {
                console.log('newData:', newData);
                currentStateBox[currentIndex] = newData;
                callBack(newData)
                console.log('update');
            }
            return [currentIndex, currentStateBox, setInit];
        }

       
        var [idx,data, setData] = useState(dom.value);
        var [idx1,data1, setData1] = useState(dom1.value);
        function callBack(aa) {
            console.log('callBack');
            console.log(data);
            console.log(idx);
        }
        dom.oninput= function (e) {
            setData(e.target.value)
        }

        dom1.oninput= function (e) {
            setData1(e.target.value)
        }
        function useEffect() {

        }

    </script>
</body>
</html>

函数式编程