react7render-props组件复用概述

一、react组件复用概述

1、思考：如果两个组件中的部分功能相似或相同，该如何处理

2、处理方式：复用相似的功能

3、复用什么？1、state 2、 *** 作state的方法（组件状态逻辑）

4、两种方式：1、render-props模式2、高阶组件(HOC)

注意：这两种方式不是新的api，而是利用react自身特点的编码技巧，演化而成的固定模式

二、render props模式思路分析

思路：将要复用的state和 *** 作state的方法封装到一个组件里面

问题1：如何拿到该组件中复用的state？

在使用组件时，添加一个值为函数的prop，通过函数来获取（需要组件内部实现）

问题2：如何渲染任意的UI

使用该函数的返回值作为要渲染的内容（需要组件内部实现）

三、使用步骤

1、创建Mouse组件，在组件中提供复用的状态逻辑代码（1.状态 2 *** 作状态的方法）

 2、将要复用的状态作为props.render(state)方法的参数，暴露到组件外部

导入图片资源 import img from './images/cat.png'  

*使用children模式来代替render（推荐） 

四、代码优化

1、推荐：给render props模式添加props校验

五、高阶组件

目的：实现状态逻辑复用

采用包装模式，比如说：手机壳

高阶组件是一个函数，接收要包装的组件，返回增强后的组件

六、高阶组件的使用

1、创建一个函数使用with开头

2、指定函数参数，参数应该以大写字母开头

3、在函数内部创建一个类组件，提供复用的状态逻辑代码，并返回

4、在该组件，渲染参数组件，同时将状态通过props传递给参数组件

5、调用该     看到71集复习比赛了加油