React 技術

高階組件

let Root = props => <div>{props.schoolName}</div>;

如果要在上例的Root組件進行增強怎么辦？例如將Root組件的div外部再加入其它div。

let Wrapper = function (Component, props) {return (<div>{props.name}<hr /><Component /></div> ); }; let Root = props => <div>{props.name}</div>;

柯里化

import React from "react"; import ReactDom from "react-dom"let Wrapper = function (Component) {function _wrapper (props) {return (<div>{props.name}<hr /><Component /></div> );}return _wrapper }; let Root = props => <div>{props.schoolName}</div>; let NewComp = Wrapper(Root) // 返回一個包裝后的元素 ReactDom.render(<NewComp name="Riper" />, document.getElementById('root'));

簡化Wrapper

import React from "react"; import ReactDom from "react-dom"let Wrapper = function (Component) {return (props) => <div>{props.name}<hr /><Component /></div> ; }; let Root = props => <div>{props.schoolName}</div>; let NewComp = Wrapper(Root) // 返回一個包裝后的元素 ReactDom.render(<NewComp name="Riper" />, document.getElementById('root'));

繼續化簡

import React from "react"; import ReactDom from "react-dom"let Wrapper = (Component) => (props) => <div>{props.name}<hr /><Component /></div> let Root = props => <div>{props.schoolName}</div>; let NewComp = Wrapper(Root) // 返回一個包裝后的元素 ReactDom.render(<NewComp name="Riper" />, document.getElementById('root'));

裝飾器

新版ES2016中增加了裝飾器的支持，因此可以使用裝飾器改造上面的代碼

裝飾器在ES2016可以裝飾類，所以，將Root改寫成類

import React from 'react'; import ReactDom from 'react-dom';let Wrapper = Component => props =>(<div>{props.Name}<hr /><Component /></div>); @Wrapper class Root extends React.Component {render() {return <div>Root</div>; } }ReactDom.render(<Root Name="Riper" />, document.getElementById('root'));

可以讓Root也顯示出name屬性

import React from 'react'; import ReactDom from 'react-dom';let Wrapper = Component => props =>(<div>{props.Name}<hr /><Component {...props} /></div>); @Wrapper class Root extends React.Component {render() {return <div>{this.props.Name}</div>; } }ReactDom.render(<Root Name="Riper" />, document.getElementById('root'));

?

使用 <Component {...props} /> 相當于給組件增加了屬性。

帶參裝飾器

import React from 'react'; import ReactDom from 'react-dom';let Wrapper = id => Component => props =>(<div id={id}>{props.Name}<hr /><Component {...props} /></div>); @Wrapper("wrapper") class Root extends React.Component {render() {return <div>{this.props.Name}</div>; } }ReactDom.render(<Root Name="Riper" />, document.getElementById('root'));

簡單改寫，就可以得到帶參裝飾器

如果覺得不好接受，可以先寫成原始的形式，熟悉了箭頭函數語法后，再改成精簡的形式。

?

轉載于:https://www.cnblogs.com/rprp789/p/9991698.html

總結

以上是生活随笔為你收集整理的chapter2.3、react高阶组件，装饰器的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。