一切都要从函数组件说起。在react没出hook之前，function没有内部状态state。自从出了hook之后，允许函数组件使用内部状态，可以自行刷新，并多了其它一些操作。
函数组件的性质，说到底，函数组件只是个函数，没有像class那样做一些控制渲染的浅比较。它只负责返回element。所以用来做木偶（受控）组件比较合适。
我们用useState来说明，为什么函数组件的外层逻辑不要太复杂？
demo
我们在a定义之前，看下输出，在之后看下输出，用useState来控制刷新，每次点击按钮会发现：
结果
每次的a都是被重新定义的。这说明函数组件在刷新的时候，每次都会自执行一遍，将里边的变量和函数统统定义一遍。如果在定义a的地方不只是定义a，而是一套逻辑，那，每次render的时候都会将逻辑走一遍，很消耗性能。
之前在看class的时候，尤其是自定义class，编译后会将constructor里的内容直接放在类函数里，是一种模拟的手段。但在执行的时候并不会重新定义。这里不要混淆，毕竟类被new 了之后，除了静态的变量和方法，其它都被实例化了，只有重新new的时候，才会再走一遍。但函数组件的刷新，每次都会像new一样，重新走一遍。
网友评论