hooks原则

Hooks官方文档提出在使用它时需要遵循两条规则：

1. 只在 React 函数中调用 Hook；

2. 不要在循环、条件或嵌套函数中调用 Hook。

原则1很好理解，hooks本身就是react组件的钩子，它的提出主要是为了解决class组件的一系列问题。

原则 2 中强调的所有“不要”，都是在指向同一个目的，那就是要确保 Hooks 在每次渲染时都保持同样的执行顺序。

既然强调顺序如此重要 ，我们先通过一个demo 来看下如果不按照顺序执行，会出现什么结果～～

通过上面这个小demo 在页面上会渲染出如下结果：

出于测试效果允许我们点击“修改姓名”按钮对姓名做出修改，点击之后“璃落”会变成“妞子”。如下图：

止此，组件的行为输出都是在我们的预期之内，没什么问题。

但假使我对代码做出一点小的改变，把一部分的 useState 操作放进 if 语句里，事情就会变得大不一样。

改动后的代码如下：