学习笔记
代码而言 手机壳是 要保护手机的 我们是需要一个手机壳 套在多个手机上
import React from "react";
// 被包裹的组件
class Wan extends React.Component {
render () {
return <div>
<p>{this.props.msg1}</p>
<p>{this.props.msg2}</p>
</div>
}
}
//被包括的组件
class Wann extends React.Component {
render () {
return <div>
<h1>{this.props.msg1}</h1>
<p>{this.props.msg2}</p>
</div>
}
}
// 高阶组件
function Dbs (Wan) {
class Tl extends React.Component {
state = {
msg1: '我是公用的值1',
msg2: '我是公用的值2'
}
render () {
// 把整个数据 state传给 Wan组件
return <Wan {...this.state}></Wan>
}
}
return Tl
}
// 包裹组件 数据都在Dbs复用组件中
// 可以包括很多组件 达到高效的组件复用
const Res = Dbs(Wan)
const Ress = Dbs(Wann)
// 挂载 App组件
class App extends React.Component {
render () {
return <div>
{/*// 挂载 组件*/}
<Res></Res>
<Ress></Ress>
</div>
}
}
export default App;
