使用 Hoc 响应渲染 [英] React Render with Hoc

查看：53
本文介绍了使用 Hoc 响应渲染的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

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

所以首先，我猜道具从父级流向子级并且是一个方向性的?

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

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

const aux = (props) =>props.children;导出默认辅助；

withClass HOC 函数接受两个参数 App 和 className..

const withClass = (WrappedComponent, className) =>{返回类扩展组件{使成为 () {返回 (
<WrappedComponent {...this.props}/>
)}}

我们作为参数传递的 App.js 看起来像这样 

import React, { PureComponent } from 'react';从'./App.css'导入类；从'../components/Persons/Persons'导入人员；从'../components/Cockpit/Cockpit'导入驾驶舱；从'../hoc/Aux'导入辅助；从 '../hoc/withClass' 导入 withClass；类 App 扩展 PureComponent {//某物使成为 () {如果(this.state.showPersons){人 = <人人={this.state.persons}点击={this.deletePersonH​​andler}changed={this.nameChangedHandler}/>;}返回 (<辅助><button onClick={() =>{ this.setState( { showPersons: true } ) }}>Show Persons</button><驾驶舱appTitle={this.props.title}showPersons={this.state.showPersons}人={this.state.persons}clicked={this.togglePersonsHandler}/>{人}</辅助>);}}导出默认 withClass( App, classes.App );

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

其次，我们在 withClass HOC 中使用了 {...this.props}，因为根据讲师的说法，它们被包装起来，因此我们的另一个组件，即使它们接收道具他们不能通过它们.有人可以用一个例子来解释这个吗?还 {...this.props} 创建所有道具的副本?不应该是 <WrappedComponent = {...this.props}/> 而不是 <WrappedComponent {...this.props}/>

解决方案

首先，什么是 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.因此，对于此用例，无需通过编写 {...props} 来传递 props.然后您只需导出 AppWithClass.

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

假设您有一个 Button 组件，它接受一个参数 colour.您通常会像这样使用它:

但是您想用 div 包装它，并向该 div 添加一个类.所以你使用 withClass 如下:

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

现在您可以使用 Button 如下:

实际上你会得到的是:

<按钮颜色="红色"/>

如果您在 withClass HOC 中渲染 WrappedComponent 时没有编写 {...this.props}，则 colour 不会传递给 Button.在您的 HOC 中，WrappedComponent 在上述情况下等于 Button.

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

继续上面的例子:

在 withClass 中，这相当于:

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

这里 this.props 等于 { colour: 'red' }.所以上面变成了:

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

然后变成:

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

希望能帮到你！

So I am following some tutorial and I am confused regarding how things render when using HOC

So firstly, I guess props flow from parent to child and is one directional?

Here we created two HOC, The Aux and withclass

The Aux doesn't do anything special besides passing props.children 

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

export default aux;

The withClass HOC function takes two parameter App and className..

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

And our App.js which is passed as an argument looks like this 

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

[Question] So based on the above code if someone can please explain what exactly happens, the way things execute and render?

Secondly, We used {...this.props} in our withClass HOC because according to the instructor they are wrapped and hence our other component, even though they receive prop they can't pass them. Can someone explain this with an example? Also {...this.props} creates copy of all the props? and shouldn't it be like <WrappedComponent = {...this.props} /> instead of <WrappedComponent {...this.props} />

解决方案

First of all, what is a HOC?

A HOC is a Higher-order component. This means it is a function that takes as its first argument a component and then returns a component.

From this definition you can immediately see that:

  • withClass is an HOC
  • Aux is not an HOC

Aux is a functional component. Classic React components are created by defining a class that inherits from React.Component. A newer, simpler way of defining components is to create functions that simply accept props as the first parameter and return what should be rendered.

So based on the above code if someone can please explain what exactly happens, the way things execute and render?

Well, let's look at App just as a component. We have withClass and App and you're exporting withClass(App, classes.App). What would it look like if, instead of using an HOC we used a functional component? It'd look like this:

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

In this case, no props are passed to App. So with this use-case, there is no need to pass props through by writing {...props}. And you'd then simply export AppWithClass.

But usually you write HOCs to be reusable. In that case, you don't know if the component that will be passed to your HOC will receive props or not. For that reason, you want the component you create to take any props passed to it and to pass them through to the wrapped component.

Let's say you have a Button component that takes a parameter colour. You'd typically use it like this:

<Button colour="red"/>

But you want to wrap it with a div and add a class to that div. So you use withClass as follows:

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

Now you can use Button as follows:

<ButtonWithClass colour="red"/>

And really what you'll get is:

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

If you did not write {...this.props} when rendering WrappedComponent in your withClass HOC, then colour would not get passed through to Button. In your HOC, WrappedComponent is equal to Button in the above case.

The syntax {...this.props} is a combination of the Object literal spread syntax and JSX's own behaviour. The Object spread syntax used in this way means the keys of the given object will become the prop names and the values will become their respective values. So when you write {...{ colour: 'red' }} you're asking JSX to get props from an object that you define inline.

To continue with the above example:

<ButtonWithClass colour="red"/>

Inside withClass this becomes equivalent to:

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

And here this.props equals { colour: 'red' }. So the above becomes:

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

Which then becomes:

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

I hope that helps!

这篇关于使用 Hoc 响应渲染的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
前端开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆