React组件复用概述

React 组件复用概述

• 思考：如果两个组件中的部分功能相似或相同，该如何处理
• 处理方式：复用相似的功能（联想函数封装）
• 复用什么？1. state 2. 操作 state 的方法（组件状态逻辑）
• 两种方式：1. render props 模式 2. 高阶组件 （HOC）
• 注意：这两种方式不是新的 API，而是利用 React 自身特点的编码技巧，演化而成的固定模式（写法）。

1. render props 模式

1.1 思路分析：

• 思路：将要复用的 state 和操作 state 的方法封装到一个组件中
• 问题1：如何拿到该组件中复用的 state ？
• 在使用组件时，添加一个值为函数的 prop，通过函数参数来获取（需要组件内部实现）
• 问题2：如何渲染任意的 UI ?
• 使用该函数的返回值作为要渲染的UI内容（需要组件内部实现）

1.2 使用步骤：

1. 创建 Mouse 组件 ，在组件中提供复用的状态逻辑代码（1. 状态 2. 操作状态的方法）
2. 将要复用的状态作为 props.render（state）方法的参数，暴露到组件外部
3. 使用 props.redner（）的返回值作为要渲染的内容

/* 
  render props 模式
*/
// 导入图片资源
import img from './images/cat.png'
// 创建Mouse组件（复用的状态逻辑代码写在这里）
class Mouse extends React.Component {
   
  // 鼠标位置state(状态)
  state = {
   
    x: 0,
    y: 0
  }

  // 鼠标移动事件的事件处理程序（操作状态的方法）
  handleMouseMove = e => {
   
    this.setState({
   
      x