** 裁减组件。
创立一个函数裁减之后返回另一个函数 **
import React, {Component} from 'react'
function bala(props){
return(
<div>
{props.age} - {props.name}
</div>
)
}
function moreStage(Component){
const moreComponent = props =>{return <Component {...props} name="jack"/>
}
return moreComponent
}
export default moreStage(bala)App.js 中应用
import React from 'react';
import './App.css';
import Hoc from './Hoc'
function App() {
return (
<div className="App">
<Hoc age="12"/>
</div>
);
}
export default App;链式调用
import React, {Component} from 'react'
function bala(props){
return(
<div>
{props.age} - {props.name}
</div>
)
}
function moreStage(Component){
const moreComponent = props =>{return <Component {...props} name="jack"/>
}
return moreComponent
}
function withlog(Component){console.log(Component.name+'增强的')
return props =>{return <Component {...props} />
}
}
export default moreStage(withlog(moreStage(withlog(bala))))装璜器写法
npm i @babel/plugin-proposal-decorators -D在 config-overrides.js 中增加
const {override,fixBabelImports,addDecoratorsLegacy} = require('customize-cra')
// override 返回一个函数 该函数返回对象作为 webpack 的配置对象
module.exports = override(
fixBabelImports("import",{
libraryName:'antd',
libraryDirectory:'es',
style:'css'
}),
addDecoratorsLegacy())import React, {Component} from 'react'
function withlog(Component){console.log(Component.name+'增强的')
return props =>{return <Component {...props} />
}
}
function moreStage(Component){
const moreComponent = props=>{return <Component {...props} name="jack"/>
}
return moreComponent
}
@withlog
@moreStage
@withlog
class bala extends Component{render(){
return(
<div>
{this.props.age} - {this.props.name}
</div>
)
}
}
// export default moreStage(withlog(moreStage(withlog(bala))))
export default bala组件复合
import React, {Component} from 'react'
function Dialog(props){
let color = props.color||'yellow'
return (<div style={{border:`1px solid ${color}`}}>
{/* children 是固定的名称 相当于 slot, 匿名插槽 */}
{props.children}
{props.foo('子组件传过来的')}
<div>
{/* 具名插槽 */}
{props.footer}
</div>
</div>
)
}
function WelcomeDialog(){let footer = <button onClick={()=>alert('...')}> 确认 </button>
return (
// 传递任意非法表达式
<Dialog color="lightBlue" footer={footer} foo={(c)=><p>{c}</p>}>
<p>React 牛逼 </p>
</Dialog>
)
}
export default function Composition(){return <WelcomeDialog>}
简易版的 redux
import React, {Component} from 'react'
const Context = React.createContext()
const store = {token:'kkk'}
export default class ContextText extends Component {render() {
return (<Context.Provider value={store}>
<div>
<Context.Consumer>
{store=> <p>{store.token}</p>}
</Context.Consumer>
</div>
</Context.Provider>
)
}
}