Hook 带来的改变
Hook 出现之前，组件之间复用状态逻辑很难，解决方案（HOC、Render Props）都需要重新组织组件结构，且代码难以理解，很容易形成 “嵌套地狱”。组件维护越来越复杂，如事件监听逻辑要在不同的生命周期中绑定和解绑，复杂的页面的 componentDidMount 包含很多逻辑，代码阅读性变得很差。class 组件中的 this 难以理解，且 class 组件不能很好的压缩。
-
避免地狱式嵌套，可读性提高。
-
函数式组件，比 class 组件更容易理解。
-
class 组件生命周期太多太复杂，使函数组件存在状态。
-
解决 HOC 和 Render Props 的缺点。
-
UI 和 逻辑更容易分离。
简单的例子
// 别忘了引入 FC 以及 useState 类型
import React, { FC, useState } from 'react'
import './App.css'
interface AppProps {
name: string
}
// FC 是 FunctionComponent 的简称，包含一个 children 属性，它只有一个泛型类型，代表该组件的 props 类型
const App: FC<AppProps> = ({ name }) => {
// 使用 useState 存储状态，下文会详细讲解
const [count, setCount] = useState(0)
const onClick = () => {
// 使用 setCount 更新状态
setCount(count + 1)
}
return (
<div className="App">
<div>name: {name}</div>
<div>count: {count}</div>
<button onClick={onClick}>+</button>
</div>
)
}
export default App
可以看到，在函数组件中，Hook 使用 useState 存储状态和更新状态，代码更加简化，而且在函数组件中无需使用 this，避免了烦人的 this 绑定问题。
React + TS 的结合
React 推荐使用 Typescript 进行应用开发。
实际上，随着React 和 Typescript 的日益成熟，越来越多的大厂更愿意采用 React 和 Typescript 的组合技术栈。
为什么要用 TS
React + TS 的教程
看到大厂都在用 React + TS 开发得飞起，是不是羡慕又想学。今天就带你入门这两大神器~
效果展示
详情页面：
作者介绍
适合人群
-
希望从事前端工作的学生
-
有一定的 Web 开发基础，想学习 Hooks 的前端开发人员
-
对前端有兴趣的服务端开发人员
原文始发于微信公众号（蓝桥云课精选）：React Hook + Typescript，实现高颜值在线记账本
- 左青龙
- 微信扫一扫
-
- 右白虎
- 微信扫一扫
-
评论