简单的useState原理

50 阅读1分钟

手写一个简单的useState原理,目的在于帮助大家了解程序性对于数据更新的限制:

let flag = false; //判断是否是第一次执行
let str; //用变量存储上一个状态
const useState =  function(arg){
    const resFn = (fnOrarg)=>{
        if(typeof fnOrarg === 'function'){
            fnOrarg = fnOrarg()
        }
        res =  fnOrarg
        str = res;
    }
    if(!flag){
        let res = arg;
        flag=true;
        str = res
        return [res,resFn]
    }else{
        return [str,resFn]
    }
}
// 模拟app组件
const app = function(){
    const [name,setName] = useState('张三');
    console.log(name);
    return {setName}
}
const myApp = app(); 
myApp.setName('李四'); //组件状态变化
app() //组件重新渲染