从小学数学谈前端框架设计

大家好，我是卡·小学生·宋。很高兴距离小学放暑假还有不到10天。当我被喷农药时，我会说：“妈妈只让我放假玩，我的手有点酸。”回到前端。其实前端框架是一个很简单的东西，大部分框架的工作原理用小学生的知识都能解释清楚。本文将从这些知识入手，逐步讲讲前端框架更新粒度背后的取舍。阅读本文后，您不仅可以获得审视不同框架的视角，还可以了解使用ReactHooks的原因。别再看不起我们这些小学生了！自变量、因变量和响应更新的小学知识是：自变量和因变量。对于以下等式：2x+1=yx是自变量，y的值受x的影响，x是因变量。在很多框架和状态管理库中，也有自变量和因变量。Vue3中的参数：constx=value(1);//取值console.log(x.value);//assignx.value=2;MobX的参数：constx=observable({data:1});//获取值console.log(x.data);//赋值x.data=2;React的参数：const[x,setX]=useState(1);//获取值console.log(x);//赋值setX(2);这些框架（或库）的参数由getter（值）和setter（赋值）组成。有了自变量，当然还有因变量。我们可以通过是否有副作用来区分。Vue的因变量：//无副作用//赋值consty=computed(()=>x.value*2+1);//Valueconsole.log(y.value);//Sideeffectswatch(()=>文档.title=x.value);MobX的因变量：//无副作用consty=computed(()=>x.data*2+1);console.log(y.get());//有副作用autorun(()=>document.title=x.data);React的因变量：//无副作用consty=useMemo(()=>x*2+1,[x]);安慰。log(y);//有副作用useEffect(()=>document.title=x,[x]);有了自变量和因变量，结合描述视图的方式，就可以描述组件UI了。比如在React中，通过JSX来描述视图：const[x,setX]=useState(21);consty=useMemo(()=>x*2+1,[x]);return

我的记录是0/{x}/{y}