如何通过React Hook实现组件状态和副作用的灵活管理？

本文共计3085个文字，预计阅读时间需要13分钟。

这篇文章分享两个使用React Hook以及函数式组件开发的简单示例。一个简单的组件案例是Button组件，它应该是最基本的常用基础组件之一。我们在开发组件时，期望它的基础样式具有一定的规范性。

这篇文章分享两个使用React Hook以及函数式组件开发的简单示例。

一个简单的组件案例

Button组件应该算是最简单的常用基础组件了吧。我们开发组件的时候期望它的基础样式能有一定程度的变化，这样就可以适用于不同场景了。第二点是我在之前做项目的时候写一个函数组件，但这个函数组件会写的很死板，也就是上面没有办法再绑定基本方法。即我只能写入我已有的方法，或者特性。希望编写Button组件，即使没有写onClick方法，我也希望能够使用那些自带的默认基本方法。

对于第一点，我们针对不同的className，来写不同的css，是比较好实现的。

第二点实现起略微困难。我们不能把Button的默认属性全部写一遍，如果能够把默认属性全部导入就好了。

事实上，React已经帮我们实现了这一点。React.ButtonHTMLAttributes<HTMLElement>里面就包含了默认的Button属性。可是我们又不能直接使用这个接口，因为我们的Button组件可能还有一些自定义的东西。对此，我们可以使用Typescript的交叉类型

type NativeButtonProps = MyButtonProps & React.ButtonHTMLAttributes<HTMLElement>

此外，我们还需要使用resProps来导入其他非自定义的函数或属性。