手写一个简单的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() //组件重新渲染