React Hook的使用示例

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

一个简单的组件案例

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

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

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

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

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

下面是button组件具体实现方案：

通过上面的方式，我们就可以在我们自定义的button组件中使用比如onclick方法了。使用button组件案例如下：

展示效果如下：

在这个代码中我们引入了一个新的npm package称之为classnames，具体使用方式可以参考github classnames，使用它就可以很方便实现classname的扩展，它的一个简单使用示例如下：

通过使用classnames，就可以很方便的在button中添加个性化的属性。可以看到对于组件的html输出结果中有hahaclassname：

与此同时，我们上述代码方式也解决了自定义组件没有办法使用默认属性和方法问题。

更复杂的父子组件案例

接下来我们展示一下如何用函数组件完成一个菜单功能。这个菜单添加水平模式和垂直模式两种功能模式。点开某个菜单详情，将这个详情作为子组件。

当然，菜单这个功能根本就不需要父组件传数据到子组件（子组件指的是菜单详情），我们为了学习和演示如何将父组件数据传给子组件，强行给他添加这个功能。有点画蛇添足，大家理解一下就好。

首先介绍父子组件的功能描述。menu是整体父组件，menuitem是每一个具体的小菜单，submenu里面是可以点开的下拉菜单。

下图是展开后的样子：

整体代码结构如下：

在这个组件中，我们用到了usestate，另外因为涉及父组件传数据到子组件，所以还用到了usecontext（父组件数据传递到子组件是指的父组件的index数据传递到子组件）。另外，我们还会演示使用自定义的onselect来实现onclick功能（万一你引入react泛型不成功，或者不知道该引入哪个react泛型，还可以用自定义的补救一下）。

如何写onselect

为了防止后面在代码的汪洋大海中难以找到onselect，这里先简单的抽出来做一个onselect书写示例。比如我们在menu组件中使用onselect，它的使用方式和onclick看起来是一样的：

在具体这个menu组件中具体使用onselect可以这样写：

实现handleclick的方法可以写成这样：

到时候要想把这个onselect传递给子组件时，使用onselect: handleclick绑定一下就好。（可能你没看太懂，我也不知道该咋写，后面会有整体代码分析，可能联合起来看会比较容易理解）

react.children

在讲解具体代码之前，还要再说说几个小知识点，其中一个是react.children。

react.children 提供了用于处理 this.props.children 不透明数据结构的实用方法。

为什么我们会需要使用react.children呢？是因为如果涉及到父组件数据传递到子组件时，可能需要对子组件进行二次遍历或者进一步处理。但是我们不能保证子组件是到底有没有，是一个还是两个或者多个。

this.props.children 的值有三种可能：如果当前组件没有子节点，它就是 undefined ;如果有一个子节点，数据类型是 object ；如果有多个子节点，数据类型就是 array 。所以，处理 this.props.children 的时候要小心[1]。

react 提供一个工具方法 react.children 来处理 this.props.children 。我们可以用 react.children.map 来遍历子节点，而不用担心 this.props.children 的数据类型是 undefined 还是 object[1]。

所以，如果有父子组件的话，如果需要进一步处理子组件的时候，我们可以使用react.children来遍历，这样不会因为this.props.children类型变化而出错。

react.cloneelement

react.children出现时往往可能伴随着react.cloneelement一起出现。因此，我们也需要介绍一下react.cloneelement。

在开发复杂组件中，经常会根据需要给子组件添加不同的功能或者显示效果，react 元素本身是不可变的 (immutable) 对象， props.children 事实上并不是 children 本身，它只是 children 的描述符 (descriptor) ，我们不能修改任何它的任何属性，只能读到其中的内容，因此 react.cloneelement 允许我们拷贝它的元素，并且修改或者添加新的 props 从而达到我们的目的[2]。

例如，有的时候我们需要对子元素做进一步处理，但因为react元素本身是不可变的，所以，我们需要对其克隆一份再做进一步处理。在这个menu组件中，我们希望它的子组件只能是menuitem或者是submenu两种类型，如果是其他类型就会报警告信息。具体来说，可以大致将代码写成这样：

父组件数据如何传递给子组件

通过使用context来实现父组件数据传递给子组件。如果对context不太熟悉的话，可以参考，context，在父组件中我们通过createcontext来创建context，在子组件中通过usecontext来获取context。

index数据传递

menu组件中实现父子组件中数据传递变量主要是index。

最后附上完整代码，首先是menu父组件：

然后是menuitem子组件：

最后是submenu子组件：

参考资料

• react.children的用法
• react.cloneelement 的使用

以上就是react hook的使用示例的详细内容，更多关于react hook的使用的资料请关注其它相关文章！