实现组件复用的编码技巧

组件的复用

复用相似的功能，复用状态

render-props 模式

  1. // 创建一个新的组件 使用组件时添加一个函数（任意名称）作为值 该函数的返回值作为要渲染的内容
  2. <Mouse render={(mouse)=>{}} />
  4. class Mouse extends React.Component{
  5.   state = {
  6.       a:0
  7.   }
  8.   // 事件处理程序
  9.   handle = () =>{
  10.       this.setState({
  11.           a:'新状态'
  12.       }
  13.   }
  15.   render(){
  16.   // 渲染传入的函数的返回值    
  17.       this.props.render(this.state)
  18.       }
  19.   }
  21.   // children 子节点模式   插槽
  22.   <Mouse>{mouse=>(<div></div>)}</Mouse>
  24.    render(){
  25.   // 渲染传入的函数的返回值    
  26.       this.props.children(this.state)
  27.       }
  28.   }

高阶组件 （HOC）

使用包装模式 ： 将一个组件封装为一个包装 使用这个组件包裹其他需要使用这个功能的组件
高阶组件是一个函数，接收要包装的组件 返回增强后的组件
这个函数会创建一个类组件 这个组件中提供复用逻辑的代码，通过prop将复用的状态传递给被包装的组件

  1. // 创建函数 使用with开头
  2. // 指定参数，参数就是组件 名字以大写字母开头
  3. const withXXX = Wrate => {
  4.     // 创建一个类组件
  5.     class Mouse extends React.Component{
  6.         state={
  7.             a:1
  8.         }
  10.         // 渲染参数传递的组件
  11.         render(){
  12. render <Wrate {...this.state}></Wrate>
  13.         }
  14.     }
  15. // 返回组件
  16.     return Mouse
  17. }
  20. // 使用
  22. // 调用函数 将要加强的组件作为参数传递
  23. withXXX(组件)