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之函数式组件和高阶组件（装饰器、带参装饰器）相关推荐

React总结篇之六_React高阶组件
高阶组件的概念及应用以函数为子组件的模式这两种方式的最终目的都是为了重用代码,只是策略不同,各有优劣,开发者可以在实际工作中决定采用哪种方式. 一.高阶组件 1. 高阶组件(Higher Orde ...
[react] 举例说明什么是高阶组件(HOC)的反向继承
[react] 举例说明什么是高阶组件(HOC)的反向继承 import React from 'react';const hoc = (WrappedComponent) => {// 集成需 ...
[react] 举例说明什么是高阶组件(HOC)的属性代理
[react] 举例说明什么是高阶组件(HOC)的属性代理 function HOC(WrappedComponent) {return class HOC extends Component {re ...
react ref无法获取被高阶组件包装的原始组件问题
问题描述: react无法通过ref获取被高阶组件包装的原始组件通过ref调用被dva connect包裹的组件报错我们在平时使用ref获取一个组件的引用后,就可以直接通过ref调用组件自身的函数 ...
react受控组件、非受控组件以及高阶组件
受控组件组件的state是"唯一数据源",使用受控组件时必须要绑定onchange()函数,否则会警告. 通俗来讲:就是input的vlaue值是来源于组件的state,相当于是 ...
组件和高阶组件区别_为什么要对高阶组件使用代码拆分
组件和高阶组件区别 by Nitish Phanse 由Nitish Phanse 为什么要对高阶组件使用代码拆分 (Why you should use code splitting with hi ...
react中@withrouter_为什么 withRouter 高阶组件应该处于最外层？
这篇文章的主要内容是说 React 16.3 以前的 getChildContext 这个老 Context API 存在会被 PureComponent 截断的问题,React-Router 4.3 ...
React中的高阶组件
React中的高阶组件高阶组件HOC即Higher Order Component是React中用于复用组件逻辑的一种高级技巧,HOC自身不是React API的一部分,它是一种基于React的组合 ...
React 高阶组件HOC使用总结
HOC(高阶组件) /*HOC(高阶组件): 接收一个组件,返回包装后的组件(增强组件)- 不是React API- 是一种设计模式,类似于装饰器模式- ≈ Mixin && > ...

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

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

最新文章

热门文章