开启掘金成长之旅！这是我参与「掘金日新计划 · 12 月更文挑战」的第13天，点击查看活动详情
前言
前面几天学习了React的基本语法，还有JSX、元素、组件、state、props等概念，下面继续来学习相关知识~
推荐使用组合
在平常的Java等OOP语言的后端开发中，都是通过继承来实现代码的复用性，但React官方推荐多使用组合来实现代码/组件的复用。
有时我们并不知道子组件的细节，因此React提供了特殊的props.children属性来进行子组件的传递。
function MyBorder(props) {
return (
<div>
{props.children}
</div>
);
}
除了默认的children属性，我们也可以自定义多个属性来进行子组件的传递，例如下面的官方例子:
function SplitPane(props) {
return (
<div className="SplitPane">
<div className="SplitPane-left">
{props.left}
</div>
<div className="SplitPane-right">
{props.right}
</div>
</div>
);
}
function App() {
return (
<SplitPane
left={
<Contacts />
}
right={
<Chat />
} />
);
}
可以看到这种支持内嵌方式，使得组合更加方便，无需通过继承来方式来复用代码，避免组件之间耦合性变高、增加维护难度等继承的缺点。
Hook-useState
在之前的学习中，我们可以发现函数组件的使用十分方便，但是在函数组件中无法定义state等内部状态，只能转换为class组件。
因此React在16.8的版本引入了Hook特性，它能够让我们在函数组件中就能够定义state等特性。
根据官方的说法Hook具有以下特点：
- 完全可选的。 你无需重写任何已有代码就可以在一些组件中尝试 Hook。但是如果你不想，你不必现在就去学习或使用 Hook。
- 100% 向后兼容的。 Hook 不包含任何破坏性改动。
- 现在可用。 Hook 已发布于 v16.8.0。
在Hook中提供了useState方法来创建state
// 创建了一个 count 的 state 变量，setCount为更新函数
const [count, setCount] = useState<number>(0);
// 使用count
{count}
// 更新count
setCount(count+1)
useState方法只接受一个可选的初始化参数，同时支持通过泛型指定返回类型，例如上面的例子将count的值初始化为0。
// 返回S类型的变量和Dispatch的设置函数
function useState<S>(initialState: S | (() => S)): [S, Dispatch<SetStateAction<S>>];
PS：同时我们需要注意返回的Dispatch函数来更新值时，默认是异步操作。
