模拟React hooks之useState

模拟React.useState

    const React = {
        // 用来存state历史值
        hookState: [],
        // 每个state对应的下标
        stateIndex: 0,
        useState(initialValue) {
            // 声明要返回的state
            let state;
            if (this.hookState[this.stateIndex]) {
                // 如果存在历史值，就取值
                state = this.hookState[this.stateIndex]
            } else {
                // 没有历史值，就把 initialValue 赋值给state， 并记录历史值（this.hookState[this.stateIndex]）
                state = this.hookState[this.stateIndex] = initialValue;
            };
            // 将这个state的下标存起来，用于setState内部（闭包）
            let cacheIndex = this.stateIndex;
            const setState = (nextState) => {
                // 设置state新值
                this.hookState[cacheIndex] = nextState;
                // 因为每次调用hooks都会更新函数组件，所以要把stateIndex下标归零
                this.stateIndex = 0;
                // 更新函数组件，这里对应React组件更新操作
                instance = functionComponent();
            };
            // stateIndex下标累加，用于记录下个state(num2)
            this.stateIndex++;
            // 将值返回
            return [state, setState]
        }
    }

定义一个 functionComponent 模拟函数式组件

    function functionComponent() {
        const [num1, setNum1] = React.useState(1);
        const [num2, setNum2] = React.useState(2);

        return {
            num1,
            num2,
            setNum1,
            setNum2,
        }
    };

定义一个组件实例

var instance = functionComponent();
console.log('instance', instance)
// {num1: 1, num2: 2, setNum1: ƒ, setNum2: ƒ}
setTimeout(() => {
    // 调用setNum1更改num1的值
    instance.setNum1(100)
    console.log('instance', instance)
    // {num1: 100, num2: 2, setNum1: ƒ, setNum2: ƒ}
}, 1000);