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

React에서 시작

처음에는 React도 mixins를 사용하여 구성 요소의 불필요한 반복 렌더링을 방지하는 등 코드 재사용을 완료했습니다. PureRenderMixin을 구성 요소에 혼합할 수 있습니다.

rrreee

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

rrreee이를 위해서는 shouldComponentUpdate 메서드는 구성 요소에서 직접 수행해야 하지만 이 메서드의 특정 작업은 shallowCompare, 즉 얕은 비교를 통해 완료됩니다.

나중에 개발자가 컴포넌트에 항상 동일한 코드를 작성하는 것을 방지하기 위해 React에서는 React.PureComponent를 사용하는 것이 좋습니다. mixins에서 점차 멀어지고 있습니다. 그들은 mixins가 React 생태계에서 좋은 모델이 아니라고 믿습니다. code>mixins는 좋지 않습니다. React 생태계에만 해당), 보기는 다음과 같습니다:

1. mixins는 암시적 종속성을 가져옵니다

2 , mixins와 mixins 사이, 그리고 mixins와 구성요소 사이에서는 mixins로 인해 쉽게 이름 충돌이 발생할 수 있습니다. > 방해가 되며 원래 구성 요소를 변경하므로 mixins를 수정하는 것은 원래 구성 요소를 수정하는 것과 동일합니다. 수요가 증가함에 따라 mixins는 복잡해지고 눈덩이처럼 복잡해집니다.

자세한 내용은 유해하다고 간주되는 믹스인 기사를 확인하세요. 그러나 HOC는 만능은 아닙니다. 당연히 그 자체로 문제가 발생합니다. 요점은 render prop과 함께 일반 구성 요소를 사용하면 HOC가 할 수 있는 모든 작업을 수행할 수 있다는 것입니다.

위 내용은 모두를 위해 제가 정리한 내용입니다. 앞으로 모든 사람에게 도움이 되기를 바랍니다.

관련 기사:

jQuery는 반복적 무한 계층 기능을 구현합니다.

JavaScript에서 책임 체인 모드를 구현하는 방법

Ajax와 Jquery를 사용하여 드롭다운 상자의 보조 연결을 구현합니다.

vue 정보 -awesome-swiper 플러그인 문제

vue에서 더 나은 스크롤 플러그인을 사용하는 방법

jquery로 지정된 인덱스 값을 얻는 방법

🎜Vue 프레임워크에서 관련 상품 구성 요소 개발🎜 🎜🎜🎜Vue에서 처음으로 스타일러스 설치 방법 사용하기(세부 튜토리얼) 🎜🎜🎜🎜 Express와 Koa 사용 비교(세부 튜토리얼) 🎜🎜🎜🎜 vue의 온라인 유료 강좌(세부 튜토리얼) 🎜🎜

위 내용은 Vue 상위 수준 구성 요소 사용 정보의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!