6.组件状态复用

目录

1  render props

1.1  自定义属性复用

1.2  使用children复用

1.3  优化

1.3.1  属性校验

1.3.2  接卸组件时解除事件绑定

2  高阶组件

2.1  基本使用

.2  displayName

2.3  props问题

---

现在要做两个组件，一个以文本形式显示当前鼠标的坐标

第二个组件是让一张图片随着鼠标的移动而移动

这两个组件都要用到获取鼠标位置，获取鼠标位置只需要一个api就可以解决，所以可以在两个组件上都各自写一遍，如果我们需要得到的信息复杂一些(需要使用很多代码进行计算)且需要用到的地方很多，这个时候我们就要对组件的状态进行复用，有 render props 与 高阶组件(HOC) 两种常用的复用方式

1  render props

1.1  自定义属性复用

render props 实质上是利用 props 传递要渲染的东西，我们做一个 以文本形式显示鼠标当前位置 的例子

在鼠标移动的时候可以得到鼠标的坐标

有点像JSONP的原理，首先 制造组件方 与 使用组件方 定义一个属性(例子中是Myrender)，然后 由制造组件方提供数据(this.state)，使用组件方用一个形参(Mouse_state)接收并使用

用这种方式就可以再简单地渲染一个跟随鼠标的效果

1.2  使用children复用

与上面的区别就是不使用自定义属性了，而是使用内置的children属性，然后在Mouse标签中直接放一个函数，而不是通过属性搞进去

1.3  优化

1.3.1  属性校验

当别人使用你的组件的时候（或者你自己已经很久没用过这个组件了），如果别人没有传入一个函数的话，他会得到很多的报错信息，所以我们最好加入一个校验

无论是自定义属性还是children，我们都需要一个函数

• 如果是自定义属性就把children替换成自定义属性名

1.3.2  接卸组件时解除事件绑定

如果解绑事件只能给事件函数名字

2  高阶组件

高阶组件(HOC,High-Order Component)是一个函数，接收要包装的组件，返回增强后的组件

2.1  基本使用

高阶组件要以with开头，传入的参数名首字母大写

虽然返回的是BeWrappedComponent标签，但由于BeWrappedComponent是传入的变量，所以BeWrappedComponent的名字随着传入名字改变

高阶组件通过props来传递属性

用类组件也是一样，只要传入高阶函数的是一个JSX，且可以使用props属性就行

.2  displayName

我们使用React开发工具，发现这两个组件的父对象都叫mouse，我们现在想给他们改成不同的名字，这个时候可以使用displayName，displayName仅仅在开发工具中调试中有用，没有其他的作用

可以给任意的名字

一般来讲我们不会给相同的名字，所以我们可以这样写

后面两个像引号的东西是ESC下面的那个键，我们利用一个函数，首先拿子控件的displayName，如果没用就拿name(我们当前拿的就是name)，如果都没有就返回一个 component 字符

2.3  props问题

当我们给组件属性的时候，使用props会读不到

没有渲染出a的值，打印出来也都是undefined

• 由于每移动一次就会更改一次状态，更改一次状态就会重新渲染组件，所以会打印出很多次

这是因为目前高阶组件中只传递state中的内容，不传递别的

我们可以把props也传递给子组件

这样就能用了