React render props模式与高阶组件

我是表哥Harker，表妹我来咯~

本篇再深入的去了解React组件的render-props和高阶组件！

 

1、render-props和高阶组件

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

 

2、render props 模式

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

<Mouse render={(mouse) => {}}/>

• 问题2：如何渲染任意的UI？
• 使用该函数的返回值作为要渲染的UI内容&#x