使用 Hoc 响应渲染

IT技术 javascript reactjs react-native
2021-05-25 18:50:56

所以我正在学习一些教程，但我对使用 HOC 时的渲染方式感到困惑

所以首先，我猜props从父母流向孩子并且是一个方向？

在这里我们创建了两个 HOC，The Aux和withclass

除了传递 props.children 之外，Aux 没有做任何特别的事情 

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 );

[问题]所以基于上面的代码，如果有人能解释一下到底发生了什么，事情的执行和呈现方式？

其次，我们{...this.props}在我们的 withClass HOC 中使用，因为根据指导员他们被包裹，因此我们的其他组件，即使他们收到props他们也不能通过他们。有人可以用一个例子来解释这个吗？还{...this.props}创建了所有props的副本？并且它不应该是这样 <WrappedComponent = {...this.props} />，而不是 <WrappedComponent {...this.props} />

1个回答

首先，什么是 HOC？

HOC 是高阶组件。这意味着它是一个函数，它将一个组件作为它的第一个参数，然后返回一个组件。

从这个定义中，您可以立即看到：

  • withClass 是一个 HOC
  • Aux不是HOC

Aux 是一个功能组件。经典的 React 组件是通过定义一个继承自 React.Component 的类来创建的。定义组件的一种更新、更简单的方法是创建简单地接受props作为第一个参数并返回应该呈现的内容的函数。

所以基于上面的代码，如果有人可以解释到底发生了什么，事情的执行和呈现方式？

好吧，让我们看看App只是作为一个组件。我们有withClass并且App你正在出口withClass(App, classes.App). 如果我们不使用 HOC 而使用功能组件，会是什么样子？它看起来像这样：

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

在这种情况下，没有props传递给 App。因此，对于此用例，无需props通过写入{...props}. 然后您只需导出 AppWithClass。

但通常你编写的 HOC 是可重用的。在这种情况下，您不知道将传递给您的 HOC 的组件是否会收到props。出于这个原因，您希望您创建的组件接受任何props传递给它的组件并将它们传递给包装的组件。

假设您有一个Button带参数的组件colour。您通常会像这样使用它：

<Button colour="red"/>

但是您想用 a 包装它div并向其添加一个类div。所以你使用withClass如下：

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

现在你可以使用Button如下：

<ButtonWithClass colour="red"/>

你真正会得到的是：

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

如果您在HOC 中{...this.props}渲染时没有写入，则不会传递到. 在您的 HOC 中，等于上述情况。WrappedComponentwithClasscolourButtonWrappedComponentButton

语法{...this.props}是对象字面量扩展语法和 JSX 自身行为的组合。以这种方式使用的对象传播语法意味着给定对象的键将成为props名称，而值将成为它们各自的值。因此，当您编写代码时，{...{ colour: 'red' }}您是在要求 JSX 从您定义的内联对象中获取 props。

继续上面的例子：

<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"/>;

我希望这有帮助！

其它你可能感兴趣的问题
上一篇Azure 无法访问 React Web 应用程序中的环境变量 下一篇React - 能够通过 props 控制 SVG 的填充颜色