爲什麼在組件導出期間應用HOC而不是導入組件

我的基本內容是HOC如連接（用於與redux存儲庫連接）和其他HOC在將組件導出時應用於組件。爲什麼在組件導出期間應用HOC而不是導入組件

像這樣

import React, { Component } from 'react'; 
import './App.css'; 
import myHoc from './myHoc/index'; 

class App extends Component { 
    render() { 
    return (
     <div className="App"> 
     </div>); 
    } 
} 
export default myHoc({})(App);

凡作爲一個更好的事情是在導入過程中應用HOC，因爲它會更容易使可重用的組件。相同的組件可以從商店或道具中挑選道具，並且由父組件負責檢查要將哪些HOC應用於組件。

我知道我們可以利用這需要組件容器組件和渲染孩子，但只是添加代碼的JSX（不會好看，如果有許多容器組件）

雖然我們可以做這樣的

import React, { Component } from 'react'; 
import './App.css'; 
import myHoc from './myHoc/index'; 
import AppChild from './AppChild'; 
const NewAppChild = myHoc({},()=> { 
})(AppChild); 
class App extends Component { 
    state = { 
    count: 1, 
    }; 

    reRender =() => { 
    this.setState({count: this.state.count + 1}); 
    }; 

    render() { 
    return (
     <div className="App"> 
     <NewAppChild handleClick={this.reRender} count={this.state.count}/> 
     </div> 
    ); 
    } 
} 

export default App;

我的問題是，有沒有更好的辦法可以處理這種情況，我希望將我的HOC應用於導入，即每個容器組件都可以導入它，並且可以根據需要應用不同的HOC 。

來源

2017-07-25 Anup

有這個設計選擇沒有單一的具體原因 - 正如你已經看到的，無論你使用的組件，你可以調用你的HOC - 但我看到至少有1優勢：配置&組件重用。

在你的例子中，myHoc不帶任何參數或配置，所以這不一定適用，但是想象一下，你是從redux中調用connect。

在大多數使用情況，connect接受2個配置功能 - mapStateToProps & mapDispatchToProps - 定義的行爲。如果你在MyComponent中定義了那些，那麼任何消費組件可以import MyComponent from 'MyComponent'並開始使用它。

如果您改爲依靠父組件調用connect()，那麼您也迫使每位消費者重新實現connect的配置。這可能意味着許多重複配置的實例，並增加了消耗組件的複雜性。

話雖這麼說，當然也有情況下，您可能希望這行爲 - 例如，如果你想connect相同成分不同狀態的定義。最終你需要選擇最好的模式來支持你需要的組件。

來源

2017-07-25 10:47:40

爲什麼在組件導出期間應用HOC而不是導入組件

回答

相關問題