Vue 고차 컴포넌트 사용 방법

이 글은 주로 Vue 고급 컴포넌트 탐색의 사용법을 소개합니다. 편집자는 이것이 꽤 좋다고 생각하므로 이제 공유하고 참고용으로 제공하겠습니다. 편집자를 따라 살펴보겠습니다. 모두에게 도움이 되기를 바랍니다.

고차 구성 요소(HOC)는 React 생태계에서 일반적인 어휘입니다. React에서 코드를 재사용하는 주요 방법은 higher-order 구성 요소를 사용하는 것입니다. -order Components 이며 이는 공식적으로 권장되는 접근 방식이기도 합니다. Vue에서 코드를 재사용하는 주요 방법은 mixins를 사용하는 것이며, Vue에서는 고차 컴포넌트 개념이 거의 언급되지 않습니다. Vue에서 고차 구성 요소를 구현하는 것은 React만큼 간단하지 않기 때문입니다. 그 이유는 React와 Vue의 차이점 때문입니다. 디자인 아이디어는 다르지만 Vue에서 고차 컴포넌트를 사용할 수 없다는 의미는 아닙니다. 단지 에서 고차 컴포넌트를 사용함으로써 얻을 수 있는 이점이 있을 뿐입니다. Vue는 >mixins와 비교되며 질적인 변화는 없습니다. 이 글에서는 주로 기술적인 관점에서 Vue 고차 컴포넌트의 구현을 설명하고, React와 Vue의 관점에서 분석해보겠습니다. . HOC )是 React 生态系统的常用词汇， React 中代码复用的主要方式就是使用高阶组件，并且这也是官方推荐的做法。而 Vue 中复用代码的主要方式是使用 mixins ，并且在 Vue 中很少提到高阶组件的概念，这是因为在 Vue 中实现高阶组件并不像 React 中那样简单，原因在于 React 和 Vue 的设计思想不同，但并不是说在 Vue 中就不能使用高阶组件，只不过在 Vue 中使用高阶组件所带来的收益相对于 mixins 并没有质的变化。本篇文章主要从技术性的角度阐述 Vue 高阶组件的实现，且会从 React 与 Vue 两者的角度进行分析。

从 React 说起

起初 React 也是使用 mixins 来完成代码复用的，比如为了避免组件不必要的重复渲染我们可以在组件中混入 PureRenderMixin ：

const PureRenderMixin = require('react-addons-pure-render-mixin')
const MyComponent = React.createClass({
 mixins: [PureRenderMixin]
})

后来 React 抛弃了这种方式，进而使用 shallowCompare ：

const shallowCompare = require('react-addons-shallow-compare')
const Button = React.createClass({
 shouldComponentUpdate: function(nextProps, nextState) {
 return shallowCompare(this, nextProps, nextState);
 }
})

这需要你自己在组件中实现 shouldComponentUpdate 方法，只不过这个方法具体的工作由 shallowCompare 帮你完成，即浅比较。

再后来 React 为了避免开发者在组件中总是要写这样一段同样的代码，进而推荐使用 React.PureComponent ，总之 React 在一步步的脱离 mixins ，他们认为 mixins 在 React 生态系统中并不是一种好的模式(注意：并没有说 mixins 不好，仅仅针对 React 生态系统)，观点如下：

1、 mixins 带来了隐式依赖

2、 mixins 与 mixins 之间， mixins 与组件之间容易导致命名冲突

3、由于 mixins 是侵入式的，它改变了原组件，所以修改 mixins 等于修改原组件，随着需求的增长 mixins 将变得复杂，导致滚雪球的复杂性。

具体大家可以查看这篇文章 Mixins Considered Harmful 。不过 HOC 也并不是银弹，它自然带来了它的问题，其观点是： 使用普通组件配合 render prop 可以做任何 HOC 能做的事情 。

本篇文章不会过多讨论 mixins 和 HOC 谁好谁坏，就像技术本身就没有好坏之分，只有适合不适合。难道 React 和 Vue🎜React에서 시작🎜🎜처음에는 React도 mixins를 사용하여 구성 요소의 불필요한 반복 렌더링을 방지하는 등 코드 재사용을 완료했습니다. PureRenderMixin을 구성 요소에 혼합할 수 있습니다. 🎜

🎜rrreee🎜나중에 React는 이 메서드를 버리고 shallowCompare를 사용했습니다. : 🎜

🎜rrreee🎜이를 위해서는 구성 요소에 shouldComponentUpdate 메서드를 직접 구현해야 하지만 이 메서드의 특정 작업은 완료됩니다. byshallowCompare는 얕은 비교를 완료하는 데 도움이 됩니다. 🎜🎜 나중에 개발자가 컴포넌트에 항상 동일한 코드를 작성하는 것을 방지하기 위해 React에서는 React.PureComponent를 사용하는 것이 좋습니다. mixins에서 점차 멀어지고 있습니다. 그들은 mixins가 React 생태계에서 좋은 모델이 아니라고 믿습니다. code>mixins는 좋지 않습니다. React 생태계에만 해당), 보기는 다음과 같습니다: 🎜🎜1. mixins는 암시적 종속성을 가져옵니다 🎜🎜2 , mixins와 mixins 사이, 그리고 mixins와 구성요소 사이에서는 mixins로 인해 쉽게 이름 충돌이 발생할 수 있습니다. > 방해가 되며 원래 구성 요소를 변경하므로 mixins를 수정하는 것은 원래 구성 요소를 수정하는 것과 동일합니다. 수요가 증가함에 따라 mixins는 복잡해지고 눈덩이처럼 복잡해집니다. 🎜🎜자세한 내용은 유해하다고 간주되는 믹스인 기사를 확인하세요. 그러나 HOC는 만능은 아닙니다. 당연히 그 자체로 문제가 발생합니다. 요점은 render prop과 함께 일반 구성 요소를 사용하면 HOC가 할 수 있는 모든 작업을 수행할 수 있다는 것입니다. 🎜🎜이 글에서는 mixins와 HOC 사이에서 누가 좋고 나쁘는지에 대해 너무 많이 논의하지는 않을 것입니다. 기술 자체가 좋고 나쁘다는 것이 아니라 적합 여부만 따질 것입니다. 아니면. React와 Vue 두 형제도 마찬가지 아닌가요?

위 내용은 Vue 고차 컴포넌트 사용 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!