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

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


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

        App component{props.count}
        

        
        
}

// 科里化
function wrapper(Comp){
    return function (props){  // 返回B组件
        return 

        B component{props.count}
        

        
        
    }
}

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

    
    

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

// const B = wraper(A)

ReactDom.render(
    // ,  // 此处要封口
    // ,
    ,
    document.getElementById('root')
)

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

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


// 改为带参装饰器
// function wrapper(vid){
//     return function (Comp){
//         return props => {  // 返回新的组件
//             return 

//             金州拉文{props.name}
//             

//             
//             
//         }
//     }
// }
 
let obj = {a: Green, b: KD }
const wrapper = vid => Comp => props => 
  {/* 传一个组件返回一个新的组件 */}
    金州拉文{props.name}
    

    {/*  */}
      {/* 相当于把对象解构成k、v对，还可以混着写 */}
    


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

            {this.props.a}
  {/* 拿到的结果是Green */}
            {this.props.b}  {/* 拿到的结果是KD */}
        
    }
}


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