📝 Next.js作为现在出海比较主流的语音，在初学者看来应是比较容易入门

1.关于useState（）钩子的用法

• isShowVerifyCode 是 状态变量，它存储当前的状态值，这里初始值是 false，表示初始情况下验证码不显示。

• setIsShowVerifyCode 是 更新状态的函数，你可以通过它来改变 isShowVerifyCode 的值。

2. 变量命名规则

• isShowVerifyCode
• is 开头的变量通常用来表示布尔类型的状态，意思是某个条件是否成立。在这里，isShowVerifyCode 表示“是否显示验证码”。
• 这种命名方式提高了 可读性，让其他开发者一看就能明白这是一个布尔变量，值要么是 true（显示验证码），要么是 false（不显示验证码）。

• setIsShowVerifyCode
• set 开头的函数名表示它是用来 更新状态 的函数。这是 React 的 useState 中常用的命名约定，setX 用来更新对应的 X 状态。

3. 可读性与命名建议

• 使用 is 开头的命名方式是非常好的实践，尤其是在表示布尔值的时候。它明确了状态的意义，帮助提高代码的 可维护性和可读性。

• 类似的命名方式还有：
• has：通常用来表示是否具备某种特征，比如 hasPermission 表示是否有权限。
• should：表示某种行为是否应该执行，比如 shouldRenderComponent。

4. 总结

2.关于组件的起手动作

1. interface IProps

• IProps 是一个 TypeScript 接口，用于定义组件 CountDown 所需要的 props（属性） 的类型。
• time: number; 表示 time 是一个 数字类型，它将作为组件倒计时的时间。
• onEnd: () => void; 表示 onEnd 是一个 没有参数且没有返回值的函数，也就是说，当倒计时结束时将触发这个函数，但它不返回任何值（void）。

为什么要使用接口？

• 使用 TypeScript 的接口可以为 React 组件的 props 提供明确的类型检查，有助于在开发时避免传递错误的 props，提升代码的安全性和可维护性。

2. const CountDown = (props: IProps) => { ... }

• 这是一个箭头函数形式的 React 函数组件，接收 props 作为参数，并通过 IProps 接口对 props 进行类型约束。
• (props: IProps)：函数参数 props 的类型必须符合 IProps 接口的要求，具体来说，props 必须有 time 和 onEnd 两个属性。
• const { time } = props;：使用 解构赋值 提取 props 中的 time 值，方便在 JSX 中使用。

JSX 部分

• 组件返回的 JSX 代码中，<div>{time}</div> 用于渲染传入的 time 值。这个组件会显示 time 的值在页面上。

onEnd 函数在哪里使用？

• 虽然 onEnd 被定义在 IProps 中，但是在这段代码中并没有实际使用它。通常，onEnd 可能是在倒计时结束时要触发的回调函数，但这段代码只是显示 time，并没有实现倒计时逻辑。如果需要实现倒计时功能，可以通过 useEffect 来监听 time 的变化，当倒计时到 0 时调用 onEnd 函数。

3. export default CountDown;

• 这行代码将 CountDown 组件导出，使它可以在其他文件中被导入和使用。它是一个标准的 ES6 默认导出 语法。

4. 这是不是一个固定的模板？

• 这个代码结构非常常见，尤其是在使用 TypeScript 的 React 项目中，它体现了一个标准的 函数组件模板：
1. 定义 props 的类型（使用接口或类型别名 type）。
2. 创建函数组件并传递 props。
3. 返回 JSX，用于渲染 UI。
4. 导出组件供其他地方使用。

3.关于 箭头函数的基本语法

1. 箭头函数的基本语法

分解结构：

小括号 ()：参数部分

• 小括号里面是 参数，就像传统函数的参数一样。它们用来接收函数调用时传入的值。

• 如果没有参数，括号是 空的，表示函数不需要输入任何参数。

• 如果只有 一个参数，小括号可以 省略，直接写参数名。

• 如果有多个参数，参数需要用 逗号 隔开，括号不能省略。

箭头 =>：连接参数和函数体的部分

• 箭头 => 是箭头函数的标志，用来连接函数的参数和函数体。

大括号 {}：函数体部分

• 大括号内是函数的 主体，包含函数要执行的代码。

• 如果函数的主体中有多行代码，或者需要 return 返回值，就必须用大括号包裹。

简写形式（省略大括号）

• 如果函数的 函数体只有一行代码 并且是返回值，可以省略大括号和 return 关键字，代码将会自动返回那一行的值。

总结：

1. 小括号：里面放的是参数，1个参数时可以省略括号，0个或多个参数时括号不能省略。

2. 箭头 =>：它是用来连接参数和函数体的。

3. 大括号：如果函数体中有多行代码或者需要 return 返回值，就要用大括号包裹。如果只有一行代码且需要返回值，可以省略大括号和 return。

示例对比

4.关于传统的js的写法和现在的next的箭头函数的对比

原函数

使用箭头函数重写

详细解读

1. 箭头函数定义
• const add = (x, y) => { ... } 这是使用箭头函数的标准写法，箭头函数的语法更加简洁，避免了 function 关键字的使用。

2. 参数列表
• (x, y)：箭头函数的参数列表依然和普通函数一致，如果有多个参数，用逗号分隔；如果没有参数，则写成空括号 ()。

3. 函数体
• 大括号 { ... } 里面是函数的具体实现逻辑。和普通函数相同，箭头函数中也可以包含多行代码

4. 变量声明
• 原来的 var sum 可以替换为 const sum，因为 sum 不需要在作用域中被重新赋值，所以使用 const 更加合适，也能避免潜在的变量重定义问题。

🤗 总结归纳

📎 参考文章

• 一些引用

• 引用文章