【useState】简单实现React Hook

最新推荐文章于 2024-07-18 18:00:48 发布

原创最新推荐文章于 2024-07-18 18:00:48 发布 · 141 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#react.js #javascript #前端

前端专栏收录该内容

7 篇文章

订阅专栏

本文介绍了如何通过闭包原理实现JavaScript中的useState Hook，展示了从创建状态和设置函数到模拟渲染的过程，并鼓励读者分享更优的逻辑思路。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在日常过程中可能会遇到需要自己去实现的状态钩子函数
今天跟大家一起简单实现一下use State，主要思路为闭包。

const myReact = (() => {
            const states = []; // 状态保存映射
            const stateSetters = [];  // 修改函数映射
            let stateIndex = 0;
            
            // 创建状态
            function createState(initialState, stataeIndex) {
                return states[stateIndex] != undefined ? states[stateIndex] : initialState
            }
            
            // 创建对应的设置函数
            function createStateStter(stateIndex) {
                return function (newState) {
                    if (typeof newState === 'function') {
                        states[stateIndex] = newState(state[stateIndex])
                    } else {
                        console.log('重新设置', newState)
                        states[stateIndex] = newState
                        console.log(states[stateIndex])
                    }

                    render()
                }
            }
            
            // 抛出的useState函数
            function useState(initialState) {
                states[stateIndex] = createState(initialState, stateIndex)

                if (!stateSetters[stateIndex]) {
                    stateSetters.push(createStateStter(stateIndex))
                }
                const _state = states[stateIndex]
                const _setState = stateSetters[stateIndex]
                stateIndex++ // 每次递增一下 useState函数会多次被使用

                return [_state, _setState]
            }

            function render() {
                stateIndex = 0
                alert('模拟渲染')
            }

            return {
                useState
            }
        })()

        function App() {
            const [text, steText] = myReact.useState('React useState')
            const [name, steName] = myReact.useState('I is useState')

            setTimeout(() => {
                steText('Reset Text')
            }, 3000)

            return `<div>${text}--${name}</div>`
        }

        document.querySelector('.root').innerHTML = App()