用Hoc反應渲染

Question

所以我正在關注一些教程，我對使用HOC時事物呈現方式感到困惑

所以首先，我猜道具從父母流向孩子，這是一個方向嗎？

在這里，我們創建了兩個HOC，即Aux和withclass

輔助人員除了傳遞道具外沒有什么特別的事情。

const aux = (props) => props.children;

export default aux;

withClass HOC函數采用兩個參數App和className。

const withClass = (WrappedComponent, className) => {
   return class extends Component {
       render () {
           return (
               <div className={className}>
                   <WrappedComponent {...this.props} />
               </div>
           )
       }
   }

作為參數傳遞的App.js如下所示

import React, { PureComponent } from 'react';

import classes from './App.css';
import Persons from '../components/Persons/Persons';
import Cockpit from '../components/Cockpit/Cockpit';
import Aux from '../hoc/Aux';
import withClass from '../hoc/withClass';

class App extends PureComponent {
//something 
  render () {
if ( this.state.showPersons ) {
  persons = <Persons
    persons={this.state.persons}
    clicked={this.deletePersonHandler}
    changed={this.nameChangedHandler} />;
}

return (
  <Aux>
    <button onClick={() => { this.setState( { showPersons: true } ) }}>Show Persons</button>
    <Cockpit
      appTitle={this.props.title}
      showPersons={this.state.showPersons}
      persons={this.state.persons}
      clicked={this.togglePersonsHandler} />
    {persons}
  </Aux>
);

  }
}

export default withClass( App, classes.App );

[問題]因此，根據上述代碼，如果有人可以解釋發生的確切情況，事物的執行和渲染方式？

其次，我們在withClass HOC中使用了{...this.props} ，因為根據講師的指示，它們被包裹起來，因此包裝了我們的其他組件，即使他們收到了道具卻無法通過它們。 有人可以舉例說明嗎？ 還{...this.props}創建所有道具的副本嗎？ 而不應該像<WrappedComponent = {...this.props} />而不是<WrappedComponent {...this.props} />

Answer 1

首先，什么是HOC？

HOC是高階組件 。 這意味着它是一個函數，它將組件作為其第一個參數，然后返回一個組件。

通過此定義，您可以立即看到：

• withClass是一個HOC
• 輔助不是 HOC

輔助是功能組件。 通過定義從React.Component繼承的類來創建經典React組件。 定義組件的更新，更簡單的方法是創建僅接受props作為第一個參數並返回應呈現內容的函數。

因此，根據上述代碼，如果有人可以解釋發生的確切情況，事物執行和渲染的方式？

好吧，讓我們將App視為一個組件。 我們有withClass和App並且您正在導出withClass(App, classes.App) 。 如果不使用HOC，而使用功能組件，會是什么樣？ 看起來像這樣：

const AppWithClass = props =>
  <div className={classes.App}>
    <App/>
  </div>

在這種情況下， 沒有道具傳遞到App 。 因此，在此用例中，無需通過編寫{...props}來傳遞props 。 然后，您只需導出AppWithClass。

但是通常您編寫可重用的HOC。 在這種情況下，您不知道將傳遞給HOC的組件是否會收到道具。 因此，您希望創建的組件采用傳遞給它的所有props 並將它們傳遞給包裝的組件。

假設您有一個帶參數colour的Button組件。 您通常會這樣使用它：

<Button colour="red"/>

但是您想用div包裝它，並向該div添加一個類。 因此，您可以如下使用withClass ：

const ButtonWithClass = withClass(Button, "button-class");

現在，您可以按以下方式使用Button ：

<ButtonWithClass colour="red"/>

實際上，您將獲得：

<div className="button-class">
  <Button colour="red"/>
</div>

如果在withClass HOC中渲染WrappedComponent時未編寫{...this.props} ，則colour不會傳遞給Button 。 在您的HOC中，在上述情況下， WrappedComponent等於Button 。

語法{...this.props}是對象文字擴展語法和JSX自己的行為的組合。 以這種方式使用的對象擴展語法意味着給定對象的鍵將成為屬性名稱，而值將成為其各自的值。 因此，當您編寫{...{ colour: 'red' }}您是在要求JSX從您內聯定義的對象中獲取道具。

繼續上面的示例：

<ButtonWithClass colour="red"/>

在withClass內部，這等效於：

const WrappedComponent = Button;
return <WrappedComponent {...this.props}/>;

在這里this.props等於{ colour: 'red' } 。 因此，以上內容變為：

const WrappedComponent = Button;
return <WrappedComponent {...{ colour: 'red' }}/>;

然后變成：

const WrappedComponent = Button;
return <WrappedComponent colour="red"/>;

希望對您有所幫助！