本文共 419 字，大约阅读时间需要 1 分钟。

我是表哥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，通过 函数参数 来获取（需要组件内部实现） 如：

   
     {}}/>
   

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

转载地址：https://blog.csdn.net/yexiangCSDN/article/details/117262772 如侵犯您的版权，请留言回复原文章的地址，我们会给您删除此文章，给您带来不便请您谅解！