完整代码可查看 github，这里截取的代码不影响理解就行。
页面效果可查看 gitPage
首先编写一下我们的公共组件
单个商品组件（商品组件：展示价格、购买数量）
goodsItem.js
// 单个商品
import React from ‘react’;
const GoodsItem = props => {
const {goods: {name, num, price}, handleSub, handleAdd } = props;
return <div className=”goods-item”>
{name}
<button onClick={() => handleSub()}>-</button>
<span>{num}</span>
<button onClick={() => handleAdd()}>+</button>
价格：{price}
</div>
};
export default GoodsItem;
商品列表组件（循环展示库中的商品）
goodList.js
// 商品列表
import React from ‘react’;
import GoodsItem from ‘./goodsItem’;
class GoodsList extends React.Component {
constructor(props) {
super(props);
this.state = {
goodsData: []
}
}
componentDidMount() {
const {goodsData} = this.props;
this.setState({goodsData: goodsData});
}
handleAddorSub(id, type) {
let {goodsData} = this.state;
let newGoods = goodsData.reduce((newData, goods) => {
if (goods.id === id) {
goods.num = type === ‘+’ ? goods.num + 1 : goods.num – 1;
}
newData.push(goods);
return newData;
}, [])
this.setState({goodsData: newGoods})
}
render() {
const {goodsData} = this.state;
return (
<div className=”goods-list”>
{goodsData.map(goods =>
<GoodsItem
key={goods.id}
goods={goods}
handleAdd={() => this.handleAddorSub(goods.id, ‘+’)}
handleSub={() => this.handleAddorSub(goods.id, ‘-‘)}
/>
)}
</div>
);
}
};
export default GoodsList;
我们一般编写组件，都会这么去做，list 包裹 item，循环展示 item。数据放在 list 组件中，item 作为一个无状态组件，只做他的展示。
数据交互通过 props 传递，点击 +- 会改变购物车里的数据。
现在需求来了，双 12 来了（就在昨日），所有商品 8 折优惠。
这意味着我们需要修改 goodsData 中所有商品的价格。
这并不难，我叶良辰有 100 种方法可以修改商品数据。找个可行的生命周期，比如 componentDidMount 中修改 list 组件 state.goodsData 就行了。
如果每次修改都直接修改 goodList 组件，也是可以的，大不了多传几个 props 来判断需要打折还是修改商品名称等等。
但是有些需求是交叉的，如果一直这样写，久而久之组件会变得越来越臃肿，最后爆炸。
好的解决方案应该是 goodsList 不去动他，外加一层来进行包装，实现我们的逻辑。
这样既保证了 goodsList 的纯，又能实现逻辑的复用。可谓一箭双雕。
用两种组件设计模式可以帮助到我们。
一. renderProps 模式
renderProps 其实是利用组件的 props.children api，将函数当成组件的一种写法。
我们调用公共组件的方法如下：
<GoodsList goodsData={goodsData} />
我们用 renderProps 模式实现打折商品组件：
<DiscountedGoodsList goodsData={goodsData}>
{(data) => <GoodsList goodsData={(data)} />}
</DiscountedGoodsList>
可以看到，DiscountedGoodsList 的子组件是一个函数，那么一个函数是怎么渲染成组件的？
再来看看 DiscountedGoodsList 组件的代码：
const DiscountedGoodsList = props => {
// 8 折优惠逻辑
const setRenderPropsData = (data) => {
let renderPropsData = data.reduce((array, goods) => {
let obj = {};
for (let k in goods) {
obj[k] = k === ‘price’ ? (goods[k] * .9).toFixed(2) : goods[k];
}
array.push(obj);
return array;
}, []);
return renderPropsData;
}
let goodsData = setRenderPropsData(props.goodsData);
return (
<React.Fragment>
{props.children(goodsData)}
</React.Fragment>
);
}
setRenderPropsData 的作用是实现 8 折优惠逻辑，将所有商品价格调整。
然后调用 props.children 这个 api，得到在上面我们编写的函数。
props.children 也就是函数 (data) => <GoodsList goodsData={(data)} /> 的引用。
将处理后的数据 goodsData 作为参数执行，最终返回 <GoodsList /> 组件，这就是 renderProps 模式。
以后我们需要调用价格优惠的商品列表组件，直接调用 DiscountedGoodsList 即可。
renderProps 的模式实现了逻辑的共用，且对 GoodsList 组件毫无副作用，从而达到我们的目的。
二. HOC（高阶组件）模式
所谓的高阶组件，其实就是一个函数，该接受 component 为参数，返回一个处理后的 component。
编写我们的高阶组件如下：
const BrandGoodsList = (Component, goodsData) => {
// 8 折优惠逻辑
const setRenderPropsData = (data) => {
let renderPropsData = data.reduce((array, goods) => {
let obj = {};
for (let k in goods) {
obj[k] = k === ‘name’ ? goods[k] + ‘【品牌】’ : goods[k];
}
array.push(obj);
return array;
}, []);
return renderPropsData;
}
let brandGoodsData = setRenderPropsData(goodsData);
return <Component goodsData={brandGoodsData} />
}
BrandGoodsList 组件的逻辑就是给商品名称加上【品牌】的标示，区分商品。
高阶组件的调用比较简单：{BrandGoodsList(GoodsList, goodsData)} 直接执行返回组件，然后渲染。
实现了两种模式，现在我们将他们一起用，实现一个既打折，又是品牌商品的组件。
<DiscountedGoodsList goodsData={goodsData}>
{(data) => BrandGoodsList(GoodsList, data)}
</DiscountedGoodsList>
挺舒服的吧，随时分离，随时结合。正是高内聚、低耦合本人啊。
最后，完整的调用看一下：
<div className=”App”>
基本商品列表组件：
<GoodsList goodsData={goodsData} />
<br />
打 8 折商品列表组件（renderProps 模式实现）：
<DiscountedGoodsList goodsData={goodsData}>
{(data) => <GoodsList goodsData={(data)} />}
</DiscountedGoodsList>
<br />
品牌商品列表组件（高阶组件模式实现）：
{BrandGoodsList(GoodsList, goodsData)}
<br />
既是打折商品，又是品牌商品（两种模式复用）
<DiscountedGoodsList goodsData={goodsData}>
{(data) => BrandGoodsList(GoodsList, data)}
</DiscountedGoodsList>
</div>
总结：
1、renderProps 模式的核心是 props.children 的使用。
2、高阶组件的写法看起来更舒服，比较受欢迎。
3、两种模式解决的问题：复用逻辑、不污染底层组件。
觉得有帮助的点个赞，甚至可以关注一波哦~