什么是高階組件？

一個高階組件只是一個包裝了另外一個 React 組件的 React 組件。

高階組件可以做什么？

• 代碼復(fù)用，邏輯抽象，抽離底層準(zhǔn)備（bootstrap）代碼
• 渲染劫持
• State 抽象和更改
• Props 更改

如何實現(xiàn)高階組件

• 1.屬性代理
• 2.反向繼承

屬性代理

function HOC(WrappedComponent){return class HOC extends Component {render(){const newProps = {type:'HOC'};return <div><WrappedComponent {...this.props} {...newProps}/></div>}} } @HOC class OriginComponent extends Component {render(){return <div>這是原始組件</div>} } //const newComponent = HOC(OriginComponent) 復(fù)制代碼

Props Proxy 可以做什么？

• 更改 props
• 通過 refs 獲取組件實例
• 抽象 state
• 把 WrappedComponent 與其它 elements 包裝在一起

上面的例子是使用屬性代理的方法，增加了一個props屬性

反向繼承

function HOC(WrappedComponent){return class HOC extends WrappedComponent {//繼承了傳入的組件test1(){return this.test2() + 5;}componentDidMount(){console.log('1');this.setState({number:2});}render(){//使用super調(diào)用傳入組件的render方法return super.render();}} } @HOC class OriginComponent extends Component {constructor(props){super(props);this.state = {number:1}}test2(){return 4;}componentDidMount(){console.log('2');}render(){return (<div>{this.state.number}{'and'}{this.test1()}這是原始組件</div>)} } //const newComponent = HOC(OriginComponent)復(fù)制代碼

上述例子使用了方向代理，為何叫反向繼承呢，因為OriginComponent是被動的被HOC繼承，反向繼承可以做劫持渲染

可以用反向繼承高階組件做什么？

• 渲染劫持（Render Highjacking）
• 操作 state

你無法更改或創(chuàng)建 props 給 WrappedComponent 實例，因為 React 不允許變更一個組件收到的 props，但是你可以在 render 方法里更改子元素/子組件們的 props。

例子1：條件性渲染。如果 this.props.loggedIn 是 true，這個高階組件會原封不動地渲染 WrappedComponent，如果不是 true 則不渲染（假設(shè)此組件會收到 loggedIn 的 prop）

function iiHOC(WrappedComponent) {return class Enhancer extends WrappedComponent {render() {if (this.props.loggedIn) {return super.render()} else {return null}}} } 復(fù)制代碼

參考

• 深入理解 React 高階組件
• 帶著三個問題深入淺出React高階組件

轉(zhuǎn)載于:https://juejin.im/post/5ac1d6bef265da2396128bdb

總結(jié)

以上是生活随笔為你收集整理的react高阶组件的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。