React组件复用概述
- 思考： 如果两个组件的部分功能相似或相同，该如何处理？
- 处理方式： 复用相似的功能（联想函数封装）
- 复用什么？
1.state
2.操作state的方法（组件状态逻辑） - 两种方式：
1.render props模式
高阶组件（HOC） - 注意：这两种方式不是新的API，而是利用React自身特点的编码技巧，演化而成的固定模式（写法）
render props 模式
思路分析
- 思路：将要复用的state和操作state的方法封装到一个组件中
- 问题1：如何拿到该组件中复用的state？
- 在使用组件时，添加一个值为函数的prop，通过函数参数来获取（需要组件内部实现）
<Mouse render={(mouse) => {} }/> - 问题2：如何渲染任意的UI
- 使用该函数的返回值作为要渲染的UI内容（需要组件内部实现）
<Mouse render={(mouse) => (
<p>鼠标当前位置{mouse.x} , {mouse.y}</P>
)}/>
使用步骤
- 创建Mouse组件，在组件中提供复用的状态逻辑代码（1.状态 2.操作状态的方法）
- 将要复用的状态作为props.render(state)方法的参数，暴露到组件外部
class Mouse extends React.Component {
//此处为state和操作state的方法
...
render() {
return this.props.render(this.state)
}
}
- 使用props.render()的返回值作为要渲染的内容
<Mouse render={ (mouse) => <p>鼠标当前位置 {mouse.x} , {mouse.y}</p>}/>
children代替render属性
- 注意：并不是该模式叫做 render props 就必须使用名为 render 的prop，实际上可以使用任意名称的prop
- 把prop是一个函数并且告诉组件要渲染什么内容的技术叫做：render props模式
- 推荐：使用children代替render属性
代码优化
- 推荐：给render props模式添加props校验
- 应该在组件卸载时接触mousemove事件绑定
高阶组件
思路分析
- 高阶组件（HOC，Higher-Order Component）是一个函数，接受要包装的组件，返回增强后的组件
- 高阶组件内部创建一个类组件，在这个类组件中提供复用的状态逻辑代码，通过prop将复用的状态传递给被包装组件WrappedComponent
const EnhancedComponent = withHOC(WraappedComponent)
class Mouse extends React.Component {
render() {
return <WrappedComponent {...this.state} />
}
}
使用步骤
- 创建一个函数，名称约定以with开头
- 指定函数参加，参数应该以大写字母开头（作为要渲染的组件）
- 在函数内部创建一个类组件，提供复用的状态逻辑代码，并返回
- 在该组件中，渲染参数组件，同时将状态通过prop传递给参数组件
- 调用该高阶组件，传入要增强的组件，通过返回值拿到增强后的组件，并将其渲染到页面中
创建组件 const MousePosition = withMouse(Position)
渲染组件 <MousePosition />
设置displayName
- 使用高阶组件存在的问题：得到的两个组件名称相同
- 原因：默认情况下，React使用组件名称作为displayName
- 解决方法：为高阶组件设置displayName便于调试时区分不同的组件
- displayName的作用：用于设置调试信息（React Developer Tools信息）
- 设置方式：
Mouse.displayName = `withMouse${getDisplayName(WrapperComponent)}`
function getDisplayName(WrappedComponent) {
return WrappedComponent.displayName || WrappedComponent.name || 'Component'
}
传递props
- 问题：props丢失
- 原因：高阶组件没有往下传递props
- 解决方式：渲染WrappedComponent时，将state和this.props一起传递给组件
- 传递方式：
<WrappedComponent {...this.state} {...this.props} />
