Terokai amalan terbaik untuk memperkenalkan komponen tertib lebih tinggi dalam React

Ini adalah bahagian ketiga siri komponen peringkat tinggi. Dalam tutorial pertama ini, kita bermula dari awal. Kami mempelajari asas sintaks ES6, fungsi tertib tinggi dan komponen tertib tinggi.

Corak komponen tertib lebih tinggi berguna untuk mencipta komponen abstrak - anda boleh menggunakannya untuk berkongsi data (keadaan dan tingkah laku) dengan komponen sedia ada. Dalam bahagian kedua siri ini, saya menunjukkan contoh praktikal kod menggunakan corak ini. Ini termasuk penghalaan yang dilindungi, mencipta bekas generik yang boleh dikonfigurasikan, melampirkan penunjuk pemuatan pada komponen dan banyak lagi.

Dalam tutorial ini, kami akan melihat beberapa amalan terbaik dan pertimbangan yang perlu anda pertimbangkan semasa menulis HOC.

Pengenalan

React pernah mempunyai sesuatu yang dipanggil Mixins, yang berfungsi dengan baik dengan kaedah React.createClass. Mixin membenarkan pembangun berkongsi kod antara komponen. Walau bagaimanapun, mereka mempunyai beberapa kelemahan dan idea itu akhirnya ditinggalkan. Mixin belum dinaik taraf untuk menyokong kelas ES6, dan Dan Abramov juga menulis artikel mendalam yang menerangkan mengapa mixin dianggap berbahaya. React.createClass 方法配合得很好。 Mixins 允许开发人员在组件之间共享代码。然而，它们有一些缺点，这个想法最终被放弃了。 Mixin 没有升级为支持 ES6 类，Dan Abramov 甚至写了一篇深入的文章来解释为什么 Mixin 被认为是有害的。

高阶组件作为 Mixins 的替代品出现，并且它们支持 ES6 类。此外，HOC 不需要对 React API 做任何事情，并且是一种与 React 配合良好的通用模式。然而，HOC 也有缺陷。尽管高阶组件的缺点在较小的项目中可能并不明显，但您可以将多个高阶组件链接到单个组件，如下所示。

const SomeNewComponent = 
        withRouter(RequireAuth(LoaderDemo(GenericContainer(CustomForm(Form)))))

您不应该让链接发展到您问自己这样的问题：“这些道具从哪里来？”本教程解决了高阶组件模式的一些常见问题以及正确解决这些问题的解决方案。

HOC 的问题

与 HOC 相关的一些常见问题与 HOC 本身关系不大，而与它们的实现有关。

正如您所知，HOC 非常适合代码抽象和创建可重用代码。然而，当你堆叠了多个 HOC 时，如果某些东西看起来不合适或者某些 props 没有显示，那么调试起来就会很痛苦，因为 React DevTools 为你提供的有关可能出现问题的线索非常有限。

现实世界的 HOC 问题

为了了解 HOC 的缺点，我创建了一个示例演示，其中嵌套了我们在上一教程中创建的一些 HOC。我们有四个高阶函数包装单个 ContactList 组件。如果代码没有意义或者您没有遵循我之前的教程，这里是其工作原理的简短摘要。

withRouter 是一个 HOC，是 React-router 包的一部分。它使您可以访问历史对象的属性，然后将它们作为道具传递。

withAuth 查找 authentication 属性，如果身份验证为 true，则呈现 WrappedComponent。如果身份验证为 false，则会将 '/login' 推送到历史对象。

withGenericContainer 除了 WrappedComponent 之外还接受一个对象作为输入。 GenericContainer 进行 API 调用并将结果存储在状态中，然后将数据作为 props 发送到包装的组件。

withLoader 是一个附加加载指示器的 HOC。指示器旋转，直到获取的数据达到状态。

BestPracticeDemo.jsx

class BestPracticesDemo extends Component {

    render() {

		return(
            <div className="contactApp">
    			<ExtendedContactList authenticated = {true} {...this.props} contacts ="this" />
    	    </div>
     	)
	}
}

const ContactList = ({contacts}) => {
	
	return(
		<div>
			<ul>
      {contacts.map(
        (contact) => <li key={contact.email}>
         
          <img src={contact.photo}    style="max-width:90%" height="100px"  alt="Terokai amalan terbaik untuk memperkenalkan komponen tertib lebih tinggi dalam React" />
          <div className="contactData">
          <h4>{contact.name}</h4>
           <small>{contact.email}</small>  <br/><small> {contact.phone}</small>
          </div>
         
        </li>
      )}
    </ul>
		</div>
		)
}

const reqAPI = {reqUrl: 'https://demo1443058.mockable.io/users/', 
                reqMethod:'GET', resName:'contacts'}	

const ExtendedContactList = withRouter(
                                withAuth(
                                    withGenericContainer(reqAPI)(
                                        withLoader('contacts')
                                            (ContactList))));

export default BestPracticesDemo;

现在您可以亲眼看到高阶组件的一些常见陷阱。让我们详细讨论其中的一些内容。

基本注意事项

不要忘记在 HOC 中传播道具

假设我们在组合层次结构的顶部有一个 authenticated = { this.state.authenticated } 属性。我们知道这是一个重要的道具，并且应该将其一直延伸到演示组件。然而，想象一下中间 HOC，例如 withGenericContainer，决定忽略它的所有 props。

//render method of withGenericContainer
render() {
	return(
		<WrappedComponent />
    )
}

这是一个非常常见的错误，在编写高阶组件时应该尽量避免。不熟悉 HOC 的人可能会发现很难弄清楚为什么所有的 props 都丢失了，因为很难隔离问题。所以，永远记住在你的 HOC 中传播 props。

//The right way

render() {
	return(
		<WrappedComponent {...this.props} {...this.state} />)
}

不要传递超出 HOC 范围的不存在的 props

HOC 可能会引入 WrappedComponent 可能没有任何用处的新属性。在这种情况下，传递仅与组合组件相关的 props 是一个很好的做法。

高阶组件可以通过两种方式接受数据：作为函数的参数或作为组件的 prop。例如， authenticated = { this.state.authenticated } 是一个 prop 示例，而在 withGenericContainer(reqAPI)(ContactList)

Komponen pesanan lebih tinggi muncul sebagai pengganti Mixin, dan ia menyokong kelas ES6. Selain itu, HOC tidak memerlukan melakukan apa-apa dengan API React dan merupakan corak umum yang berfungsi dengan baik dengan React. Walau bagaimanapun, HOC juga mempunyai kelemahan. Walaupun kelemahan komponen tertib tinggi mungkin tidak jelas dalam projek yang lebih kecil, anda boleh memautkan berbilang komponen tertib tinggi kepada satu komponen, seperti yang ditunjukkan di bawah. 🎜

var OriginalComponent = () => <p>Hello world.</p>;

class App extends React.Component {
  render() {
    return React.createElement(enhanceComponent(OriginalComponent));
  }
};

🎜Anda tidak sepatutnya membiarkan pautan anda sampai ke tahap anda bertanya kepada diri sendiri soalan seperti: "Dari manakah prop ini berasal?" 🎜 🎜soalan HOC🎜 🎜Sesetengah isu biasa berkaitan HOC kurang berkaitan dengan HOC itu sendiri dan lebih berkaitan dengan pelaksanaannya. 🎜 🎜Seperti yang anda ketahui, HOC bagus untuk pengabstrakan kod dan mencipta kod boleh guna semula. Walau bagaimanapun, apabila anda mempunyai berbilang HOC yang disusun, sukar untuk menyahpepijat jika sesuatu kelihatan tidak betul atau prop tertentu tidak muncul kerana React DevTools memberi anda petunjuk yang sangat terhad tentang perkara yang mungkin berlaku. 🎜

Masalah HOC dunia sebenar

🎜Untuk memahami kelemahan HOC, saya mencipta contoh demo bersarang dengan beberapa HOC yang kami buat dalam tutorial sebelumnya. Kami mempunyai empat fungsi tertib tinggi yang membalut satu komponen Senarai Kenalan. Jika kod itu tidak masuk akal atau anda tidak mengikuti tutorial saya sebelum ini, berikut ialah ringkasan ringkas tentang cara ia berfungsi. 🎜 🎜withRouter ialah HOC dan merupakan sebahagian daripada pakej React-router. Ia membolehkan anda mengakses sifat objek sejarah dan kemudian memberikannya sebagai prop. 🎜🎜🎜 🎜withAuth mencari atribut authentication dan jika pengesahan adalah benar, menjadikan WrappedComponent kod >. Jika pengesahan palsu, '<code class="inline">/login' akan ditolak ke objek sejarah. 🎜 🎜withGenericContainer menerima objek sebagai input sebagai tambahan kepada WrappedComponent. GenericContainer membuat panggilan API dan menyimpan hasilnya dalam keadaan, kemudian menghantar data sebagai prop kepada komponen yang dibalut. 🎜 🎜withLoader ialah HOC yang melampirkan penunjuk pemuatan. Penunjuk berputar sehingga data yang diperoleh mencapai status. 🎜

BestPracticeDemo.jsx

var OriginalComponent = () => <p>Hello world.</p>;
var EnhancedComponent = enhanceComponent(OriginalComponent);

class App extends React.Component {
  render() {
    return React.createElement(EnhancedComponent);
  }
};

🎜Kini anda boleh melihat sendiri beberapa perangkap biasa komponen tertib lebih tinggi. Mari kita bincangkan beberapa perkara ini secara terperinci. 🎜 🎜Langkah berjaga-jaga asas🎜

Jangan lupa untuk menyebarkan prop dalam HOC

🎜Andaikan kita mempunyai harta authenticated = { this.state.authenticated } di bahagian atas hierarki gubahan. Kami tahu ini adalah prop penting dan harus memanjangkannya sehingga ke komponen pembentangan. Walau bagaimanapun, bayangkan HOC perantaraan, seperti withGenericContainer, memutuskan untuk mengabaikan semua propnya. 🎜

function logger(WrappedComponent) {
 WrappedComponent.prototype.componentWillReceiveProps = function(nextProps) {
    console.log('Current props: ', this.props);
    console.log('Next props: ', nextProps);
  };
  // We're returning the WrappedComponent rather than composing
  //it
  return WrappedComponent;
}

🎜Ini adalah kesilapan yang sangat biasa dan harus dielakkan semasa menulis komponen tertib tinggi. Orang yang tidak biasa dengan HOC mungkin sukar untuk mengetahui mengapa semua prop hilang kerana sukar untuk mengasingkan masalah. Jadi, sentiasa ingat untuk menyebarkan prop dalam HOC anda. 🎜

function logger(WrappedComponent) {
  return class extends Component {
    componentWillReceiveProps(nextProps) {
      console.log('Current props: ', this.props);
      console.log('Next props: ', nextProps);
    }
    render() {
      // Wraps the input component in a container, without mutating it. Good!
      return <WrappedComponent {...this.props} />;
    }
  }
}

Jangan melepasi prop yang tidak wujud di luar skop HOC

🎜HOC mungkin memperkenalkan sifat baharu kepada WrappedComponent yang mungkin tidak berguna. Dalam kes ini, adalah amalan yang baik untuk menghantar prop yang hanya berkaitan dengan komponen yang digubah. 🎜 🎜Komponen tertib lebih tinggi boleh menerima data dalam dua cara: sebagai parameter fungsi atau sebagai prop komponen. Contohnya, authenticated = { this.state.authenticated } ialah contoh prop, manakala dalam withGenericContainer(reqAPI)(ContactList) , kami menghantar data sebagai parameter. 🎜

因为 withGenericContainer 是一个函数，所以您可以根据需要传入任意数量的参数。在上面的示例中，配置对象用于指定组件的数据依赖性。然而，增强组件和包装组件之间的契约是严格通过 props 进行的。

因此，我建议通过函数参数填充静态时间数据依赖项，并将动态数据作为 props 传递。经过身份验证的道具是动态的，因为用户可以通过身份验证，也可以不通过身份验证，具体取决于他们是否登录，但我们可以确定 reqAPI 对象的内容不会动态更改。

不要在渲染方法中使用 HOC

这是一个您应该不惜一切代价避免的示例。

var OriginalComponent = () => <p>Hello world.</p>;

class App extends React.Component {
  render() {
    return React.createElement(enhanceComponent(OriginalComponent));
  }
};

除了性能问题之外，您还将在每次渲染时丢失 OriginalComponent 及其所有子组件的状态。要解决这个问题，请将 HOC 声明移到 render 方法之外，使其仅创建一次，以便渲染始终返回相同的EnhancedComponent。

var OriginalComponent = () => <p>Hello world.</p>;
var EnhancedComponent = enhanceComponent(OriginalComponent);

class App extends React.Component {
  render() {
    return React.createElement(EnhancedComponent);
  }
};

不要改变包装组件

改变 HOC 内的包装组件将导致无法在 HOC 外部使用包装组件。如果您的 HOC 返回 WrappedComponent，您几乎总是可以确定自己做错了。下面的例子演示了突变和组合之间的区别。

function logger(WrappedComponent) {
 WrappedComponent.prototype.componentWillReceiveProps = function(nextProps) {
    console.log('Current props: ', this.props);
    console.log('Next props: ', nextProps);
  };
  // We're returning the WrappedComponent rather than composing
  //it
  return WrappedComponent;
}

组合是 React 的基本特征之一。您可以在其渲染函数中将一个组件包装在另一个组件内，这就是所谓的组合。

function logger(WrappedComponent) {
  return class extends Component {
    componentWillReceiveProps(nextProps) {
      console.log('Current props: ', this.props);
      console.log('Next props: ', nextProps);
    }
    render() {
      // Wraps the input component in a container, without mutating it. Good!
      return <WrappedComponent {...this.props} />;
    }
  }
}

此外，如果您改变 HOC 内的 WrappedComponent，然后使用另一个 HOC 包装增强组件，则第一个 HOC 所做的更改将被覆盖。为了避免这种情况，您应该坚持组合组件而不是改变它们。

命名空间通用 Propnames

当您有多个堆叠时，命名空间道具名称的重要性是显而易见的。组件可能会将 prop 名称推送到已被另一个高阶组件使用的 WrappedComponent 中。

import React, { Component } from 'react';

const withMouse = (WrappedComponent) => {
  return class withMouse extends Component {
    constructor(props) {
      super(props);
      this.state = {
        name: 'Mouse'
      }
    }

    render() {

      return(
        <WrappedComponent {...this.props}  name={this.state.name} />
      );
    
    }
  }
}


const withCat = (WrappedComponent) => {
  return class withCat extends Component {

    render() {
      return(
        <WrappedComponent {...this.props} name= "Cat"  /> 
      )
    }
  }
}

const NameComponent = ({name}) => {
  
  return(
    <div> {name} </div>)
}


const App =() => {

  const EnhancedComponent  = withMouse(withCat(NameComponent));
  
  return(
  <div> <EnhancedComponent />  </div>)
}

export default App;

withMouse 和 withCat 都在尝试推送自己的 name 版本。如果EnhancedComponent也必须共享一些同名的props怎么办？

<EnhancedComponent name="This is important" />

这不会给最终开发人员带来混乱和误导吗？ React Devtools 不会报告任何名称冲突，您必须查看 HOC 实现细节才能了解出了什么问题。

这可以通过提供 HOC 属性名称的范围作为约定来解决。因此，您将拥有 withCat_name 和 withMouse_name 而不是通用的 prop 名称。

这里需要注意的另一件有趣的事情是，对属性进行排序在 React 中非常重要。当您多次拥有相同的属性并导致名称冲突时，最后一个声明将始终保留。在上面的例子中，Cat 获胜，因为它被放置在 { ...this.props } 之后。

如果您希望通过其他方式解决名称冲突，您可以重新排序属性并在最后传播 this.props 。这样，您就可以设置适合您的项目的合理默认值。

使用有意义的显示名称使调试更容易

由 HOC 创建的组件在 React Devtools 中显示为普通组件。很难区分两者。您可以通过为高阶组件提供有意义的 displayName 来简化调试。在 React Devtools 上拥有这样的东西不是明智的吗？

<withMouse(withCat(NameComponent)) > 
... 
</withMouse(withCat(NameComponent))>

那么 displayName 是什么？每个组件都有一个 displayName 属性，可用于调试目的。最流行的技术是包装 WrappedComponent 的显示名称。如果 withCat 是 HOC，并且 NameComponent 是 WrappedComponent，则 displayName 将是 withCat(NameComponent).

const withMouse = (WrappedComponent) => {
  class withMouse extends Component {
    /*                       */   
 }

  withMouse.displayName = `withMouse(${getDisplayName(WrappedComponent)})`;
  return withMouse;
}

const withCat = (WrappedComponent) => {
  class withCat extends Component {
   /*                          */
  }

  withCat.displayName = `withCat(${getDisplayName(WrappedComponent)})`;
  return withCat;
}

function getDisplayName(WrappedComponent) {
  return WrappedComponent.displayName || WrappedComponent.name || 'Component';
}

高阶组件的替代方案

尽管 Mixins 已经消失，但说高阶组件是唯一允许代码共享和抽象的模式是有误导性的。另一种替代模式已经出现，我听说有人说它比 HOC 更好。深入探讨这个概念超出了本教程的范围，但我将向您介绍渲染道具和一些基本示例，以演示它们为何有用。

渲染道具有许多不同的名称：

• 渲染道具
• 儿童道具
• 像孩子一样发挥作用
• 渲染回调

这是一个简单的示例，应该解释渲染道具的工作原理。

class Mouse extends Component {

  constructor() {
    super();
    this.state = {
      name: "Nibbles"
    }
  }
  render() {
    return(
      <div>
        {this.props.children(this.state)}
      </div>
    )
  
  }
}

class App extends Component {
  render() {
    return(
      <Mouse>
        {(mouse) => <div> The name of the mouse is {mouse.name} </div> }
      </Mouse> 
      )
  }
}

如您所见，我们已经摆脱了高阶函数。我们有一个名为 Mouse 的常规组件。我们将渲染 this.props.children() 并将状态作为参数传递，而不是在其 render 方法中渲染包装的组件。所以我们给 Mouse 一个 render prop，而 render prop 决定应该渲染什么。

Dalam erti kata lain, keadaan Mouse 组件接受一个函数作为子属性的值。当 Mouse 渲染时，它返回 Mouse dan fungsi prop render boleh menggunakannya sesuka hati.

Apa yang saya suka tentang mod ini:

• Dari sudut kebolehbacaan, sumber props lebih jelas.
• Mod ini dinamik dan fleksibel. HOC digubah dalam masa statik. Walaupun saya tidak pernah mendapati ini sebagai pengehadan, props render digabungkan secara dinamik dan lebih fleksibel.
• Komposisi komponen yang dipermudahkan. Anda boleh mengucapkan selamat tinggal kepada bersarang berbilang HOC.

Kesimpulan

Komponen tertib lebih tinggi ialah corak yang boleh digunakan untuk membina komponen yang teguh dan boleh diguna semula dalam React. Jika anda akan menggunakan HOC, terdapat beberapa peraturan asas yang perlu anda ikuti. Ini supaya anda tidak menyesali keputusan anda untuk menggunakannya nanti. Saya telah meringkaskan kebanyakan amalan terbaik dalam tutorial ini.

HOC bukan satu-satunya model popular masa kini. Pada penghujung tutorial ini, saya memperkenalkan anda kepada corak lain yang dipanggil render props, yang semakin popular di kalangan pembangun React.

Saya tidak akan menilai satu mod dan mengatakan yang ini lebih baik daripada yang lain. Apabila React berkembang dan ekosistem di sekelilingnya menjadi matang, semakin banyak corak akan muncul. Pada pendapat saya, anda harus mempelajari semuanya dan berpegang pada yang sesuai dengan gaya anda dan yang anda rasa selesa.

Ini juga menandakan tamatnya siri tutorial komponen peringkat tinggi. Kami telah bermula dari awal dan menguasai teknologi canggih yang dipanggil HOC. Jika saya terlepas apa-apa atau anda mempunyai cadangan/idea, saya ingin mendengarnya. Anda boleh menyiarkannya dalam komen.

Atas ialah kandungan terperinci Terokai amalan terbaik untuk memperkenalkan komponen tertib lebih tinggi dalam React. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!