react——props和高阶组件

---

前言

今天我们一起看看 react中的props模式和高阶组件相关内容，看看这两个解决了什么样的问题，我们应该怎样书写我们的代码呢?

---

一、render props 模式

1. react复用概述

如何复用相似的功能？

组件状态逻辑，1. state 2. 操作state的方法
两种实现方案：1. render props模式 2. 高阶组件（HOC）
注意：这两种方式不是新的API，而是利用React自身特点的编码技巧，演化而成的固定模式（写法），可以归结
为我们常说的“设计模式”。俗话说的好“世上本没有路，走的人多了也就成了路”

2. render props 模式

将要复用的state和操作state的方法封装到一个组件中

对组件外暴露state和操作state的方法(子组件向父组件传递数据)

render() {
   
  return (
    <div>
      {
   /*对外暴露了，组件状态和操作组件状态的方法*/}
      {
   this.props.render(this.state.count, this.handleCount)}
    </div>
  )
}

调用父组件传递进来的函数，把state和操作state的方法作为函数参数传递进去