React:hooks手写一个useState

    <script>
        // 二维数组状态
        let states = [];

        // 二维数组下标
        let index = 0;

        function useState(iniState) {
            // 每调用一次 useState 二维数组下标加1
            index++;

            const setState = newState => {
                // 新值存二维数组第一个值，二维数组第二个值为setState函数不变
                states[index][0] = newState;
                console.log('newState', newState); //newState 20
                console.log('states[index][0]:', states[index][0]); //states[index][0]: 20
                console.log('states[index]:', states[index]); //states[index]: (2) [20, ƒ]
            }

            console.log('[iniState, setState]:', [iniState, setState]); //[iniState, setState]: (2) [0, ƒ]

            // 定义res：最终返回res 为一个二维数组，[num, setNum]，将每一次的值传递进去
            const res = states[index] = [iniState, setState];

            console.log('res', res); //res (2) [0, ƒ]
            console.log('states[index]', states[index]); //states[index] (2) [0, ƒ]

            // 返回最终的res
            if (states[index]) {
                return states[index];
            } else {
                return res;
            }
        }


        let [num, setNum] = useState(0);
        console.log('init:', num); //init: 0

        setNum(20);
        setNum(21);
        console.log('res:', num);
        index = 0;
        // 模拟相同函数式组件内的相同代码执行两次
        let [num2, setState2] = useState(0);
        console.log(num2, setState2);
    </script>