React之函数式组件和高阶组件（装饰器、带参装饰器）

import React from 'react';  // 此句不能少
import ReactDom from 'react-dom';


const Wrapper = props => <div>App component{props.count}</div>
// stateless component无状态组件，现在喜欢被称为函数式组件,现在这种定义的组件可以写state了，如state hook
function wrapper(Comp, props){  // 这个不能叫普通函数，这是个组件
    return <div>
        App component{props.count}
        <hr />
        <Comp />
        </div>
}

// 科里化
function wrapper(Comp){
    return function (props){  // 返回B组件
        return <div>
        B component{props.count}
        <hr />
        <Comp />
        </div>
    }
}

// 改为箭头函数，但是注意把第二个箭头后当一个整体看
const wrapper = Comp => props => <div>  {/* 传一个组件返回一个新的组件 */}
    B component{props.count}
    <hr />
    <Comp />
    </div>

// 装饰器太新了，一定要用babel，但是现在的装饰器只能装饰类，不能装饰函数
@wrapper  // A = wrapper(A)，注意返回的A已经不是原来的A了
// function A (props){return <div>A component</div>}  // 会报错，装饰器只能装饰类，不能装饰函数
class A extends React.Component{
    render(){
        return <div>A component</div>
    }
}

// const B = wraper(A)

ReactDom.render(
    // <Parent count={100} />,  // 此处要封口
    // <Second />,
    <A count="200" />,
    document.getElementById('root')
)

将上述的代码改为带参装饰器：

import React from 'react';  // 此句不能少
import ReactDom from 'react-dom';


// 改为带参装饰器
// function wrapper(vid){
//     return function (Comp){
//         return props => {  // 返回新的组件
//             return <div>
//             金州拉文{props.name}
//             <hr />
//             <Comp inner_name="props.name"/>
//             </div>
//         }
//     }
// }
 
let obj = {a: Green, b: KD }
const wrapper = vid => Comp => props => <div id={vid}>  {/* 传一个组件返回一个新的组件 */}
    金州拉文{props.name}
    <hr />
    {/* <Comp inner_name="props.name"/> */}
    <Comp {...props} test="Klay" {...obj}/>  {/* 相当于把对象解构成k、v对，还可以混着写 */}
    </div>


@wrapper('test')  // 改为带参装饰器; A = wrapper('test')(A)
class A extends React.Component{
    render(){
        return <div>{this.props.name}号称金州拉文
            {this.props.test}  {/* 拿到的结果是Klay */}
            <hr />
            {this.props.a}<br />  {/* 拿到的结果是Green */}
            {this.props.b}  {/* 拿到的结果是KD */}
        </div>
    }
}


ReactDom.render(
    <A name="Stephen Curry" />,  // 注意此处的A是装饰器返回的A，已经不是原来的A了
    document.getElementById('root')
)

React之函数式组件和高阶组件（装饰器、带参装饰器）

悦读