2021-11-05 react中的组合 与继承

react中的组合 首先是 基于代码的复用的问题 出现的，实现代码的层次即是
简单的组合
function Inner(props){
return

{props.children}

}

function Out(){
return

111

222

3

4

} // 111 222 3 4

这个即是 利用了这个react中的组合进行了一个代码的复用，即可以多次使用这个Inner的组件

更加灵活的使用 组合模式 达到代码组件的复用 不用props.children

function Inner(props){
return

{props.title}

{props.number} }

function Out(){
return

} // 标题1 数量1 标题2 数量2

这个即是通过组合的方式 进行了组件的多次的使用

而且现在我做的项目的层级大多是用的组合的模式，达到的代码组件的复用，比如对一个弹窗的多次使用，对一个红包的多次使用。react推荐我们用组合而不是用的继承来构建组件层次。