두통을 피하고 더 좋은 개발자가 되기 위해서는 이 두 가지의 차이를 알아야 한다!《React》의 합성과 계승

이 문서는 다음과 같습니다.
https://www.blog.duomly.com/composition-vs-inheritance-in-react/

조합 및 상속 소개

composition vs inheritation 비교에 오신 걸 환영합니다.
만약 당신이 고급 개발자나 프로그래머라면, 나는 당신이 가장 유행하는 개념, 디자인 모델, 그리고 그 안에 있는 것들이 어떻게 작동하는지 알고 있을 것이다.
하지만 전단 개발자들이 이렇게 조합과 계승을 중시하는 것은 많지 않다.
이것은 자주 토론하는 화제가 아니다. 나는 모든 개발자가 왜 이런 식이나 이런 방식으로 해결 방안을 만들었는지 설명할 수 있는 것은 아니라는 것을 알아차렸다.
오늘의 글에서 우리는 두 가지 프로그래밍 개념, 즉 조합과 계승을 토론할 것이다.
나는 너희들에게 구성이 무엇인지, 계승이 무엇인지 알려줄 것이다. 그러나 단지 뿐만 아니라.
너는 React에서 그것들의 js에서의 외관을 이해할 것이다.js.
다음에 우리는 그것들을 비교하여 어느 것이 더 좋은지, 언제 조합을 사용하는지, 언제 계승을 사용하는지 볼 것이다.
이것은 조합과 계승에 관한 글이기 때문에 반응을 하기 위한 것이기 때문에 나는 일반적인 계승이나 조합 같은 프로그래밍 개념을 깊이 있게 토론하지 않을 것이다.
나는 그것들을 간단명료하게 설명할 것이며, 이 주제인 비교에 대해 집중적으로 토론할 것이다.
우리 시작합시다!
만약 당신이 동영상을 좋아한다면, 여기는 유튜브 버전의 화이트보드입니다.

JavaScript의 상속

JavaScript의 상속은 OOP 프로그래밍 개념으로 하위 객체에서 상위 객체의 특성을 상속할 수 있습니다.
예를 들어 만약에 우리가 차량과 유사한 부모 대상을 만들 수 있다면, 그 속성은 모든 차와 유사하다. 예를 들어 바퀴, 변속기, 엔진과 등과 유사하다.
다음에 우리는 자동차를 자동차의 자대로 만들어 자동차의 속성을 계승할 수 있다.
이것은 우리의 자동차가 한 대의 자동차라는 것을 의미하기 때문에, 그것은 처음부터 바퀴, 전조등, 엔진, 변속기를 설치할 것이다.
물론 우리는 대상에게 더 많은 기능을 추가할 수 있다.
코드 예제를 살펴보겠습니다.

function vehicle() {
 this.engine = true;
 this.lights = 4;
 this.gearbox = true;
 this.wheels = 4;
}

function car(color, power) {
 vehicle.call(this);
 this.color = color;
 this.power = power;
}

const newCar = new car('red', 1000);
console.log(newCar);

// {
//  color: "red",
//  engine: true,
//  gearbox: true,
//  lights: 4,
//  power: 1000,
//  wheels: 4
// }

JavaScript의 합성은 무엇입니까

클래스와 관련된 조합도 있고 함수 조합도 있습니다.
우리는 일반적인 구도 개념에 대해 깊이 토론하지 않지만, 나는 가능한 한 이 개념을 React 사례에 들어갈 때까지 많이 설명할 것이다.
이것은 간단한 함수 조합이다.
그래서 우리는 두 가지 기능이 있는데, 시동등과 시동 엔진이다.
기계 차량은 전조등과 엔진을 가동할 수 있는데, 그것들은 물체로 기계적 특징을 구성한다.분배하다.
다음 단계에, 우리는 자신의 자동차 기능을 가진 자동차, 예를 들어 창문을 여는 것을 창조할 수 있지만, 그것은 여전히 모든 기계 기능을 가지고 있다.
이를 실현하기 위해서는 카피처스와 mechanical Features를 조합하여 자동차의 대상 구조 함수로 되돌려야 한다.
결과적으로 이 차는 이 모든 기능을 갖추고 있어 이를 취소할 수 있다.
코드 예제를 살펴보겠습니다.

const canStartLights = self => ({
 startLights: () => console.log(`Starting all ${self.lights} lights`)
});

const canStartEngine = self => ({
 startEngine: () => console.log(`Starting engine, and ${self.power}HP makes noise`)
});

const mechanicalFeatures = self => Object.assign({}, canStartLights(self), canStartEngine(self));

const car = (lights, power, windows, color) => {
 const self = {
  lights, power, windows, color
 }
 const carFeatures = self => ({
  openWindows: () => console.log(`${self.color} car is opening all ${self.windows} windows`)
 })

 return Object.assign(self, mechanicalFeatures(self), carFeatures(self));
}

const newCar = car(4, 700, 2, 'Red');
newCar.startEngine();
// Starting engine, and 700HP makes noise
newCar.startLights();
// Starting all 4 lights
newCar.openWindows();
// Red car is opening all 2 windows

React의 상속

React의 계승은 JS와 매우 비슷해서 이 주제에 대한 보충이 많지 않다.
예를 들어, 클래스를 사용하는 경우 상속은 JavaScript 클래스와 같습니다.
우리는 간단한 확장만 사용하면 부모 구성 요소로부터 계승할 수 있다.
코드 예제를 살펴보겠습니다.

class Vehicle {
 constructor(color) {
  this.color = color;
 }
}

class Car extends vehicle {}

const redCar = new Car(„red");

함수 계승이 있으면 새로운 실례를 만들어서 실현할 수 있지만, React에서는 유행하는 해결 방안이 아니다. 다음 단계에서 나는 왜 이 화제에 그렇게 신경을 쓰지 말아야 하는지 설명할 것이다.

React의 성분은 무엇입니까

그룹 구성은 그룹 모델과 관련된 React에서 가장 기본적인 모델 중 하나이다.
그것은 많은 작은 위젯을 사용하여 우리가 심지어 매우 복잡한 함수를 구축하는 데 도움을 준다.
조합을 사용하면 우리는 구성 요소에서 다른 구성 요소를 실현할 수 있다.
예를 들어 사용자 프로필을 구축할 때userProfile 구성 요소를 만들고userPhoto에 구성 요소를 넣고userDescription을 하위 도구로 사용할 수 있습니다.
코드 예제를 살펴보겠습니다.

const UserProfile = props => {
 return <div className="user-profile">{props.children}</div>
}

<UserProfile>
 <UserPhoto/>
 <UserDescription/>
</UserProfile>

React에서 합성과 계승은 어떻게 된 거예요?

이런 조합은 자바스크립트에서 유행하지 않는다(es6 이전에는 틀림없이 하지 않았을 것이다). 가장 자주 사용하는 것은 OOP 스타일의 고전적인 계승이지만 React가 게임에 등장했을 때 모든 것이 달라졌다.
리액트의 디자인과 구조는 하나의 기묘한 방식으로 조합을 사용해 개발 시간을 크게 단축시켰지만 그뿐만이 아니다.엄밀히 말하면 반응할 수 있는 좋은 점이 있으니 이따가 알려드릴게요.
이 모든 것이 프로그래밍 방법에 약간의 혼란을 초래했고, React에서 응용을 구축할 때 어떤 개념이 정확한지 모든 사람이 알지 못했다.js.

상속보다 무거운 원인을 이루다

우리가 응용 프로그램을 개발해서 반응을 할 때, 왜 우리가 계승이 아니라 조합을 선택해야 하는지 설명할 수 있는 몇 가지 주요 이유가 있다.
첫 번째는 너무 많은 모듈을 끼워 넣을 가능성을 피하는 것이다.
도구 때문에.얘들아, 우리는 분리된 곳에서 코드를 분리할 수 있어.우리는 구성 요소를 깊이 연구하고 많은ifs를 만들 필요가 없다.
다음 중요한 일.작성의 경우 React에서 설계한 모든 것이 어셈블리 모델을 따릅니다.
구도를 사용하는 것이 더 안전하다. 왜냐하면 우리는 상호작용을 하지 않기 때문이다.
우리는 여전히 계승의 기초 위에서 그것들을 사용할 수 있다. 예를 들어, 우리가 조합된 고급 구성 요소 (HOC) 를 구축할 때, 그러나 HOC에 관해서는, 나는 단독으로 글을 한 편 쓸 것이다. 왜냐하면 이것은 큰 주제이기 때문이다.

왜 합성을 상속에 두지 않습니까?

우리가 반응에 대해 이야기하면.JS, 그룹이 아닌 클래식 계승을 사용할 이유가 없을 수도 있다.
우리가 반응구역에 들어와도JS 문서에서 저자는 상반된 상황을 발견하지 못했다고 말한다.
이것은 React의 관점입니다. 이것은 사실입니다.그들의 구도 이념은 매우 좋고 효과도 매우 좋다.
순수 자바스크립트와 같은 다른 상황에 대해 클래식 계승은 더욱 편리하고 경험이 없는 개발자에게는 더욱 사용하기 쉽다고 말하고 싶습니다.
어떤 경우 (React에서 제외), 우리에게 가장 편리한 것은 슈퍼 클래스, 하위 클래스, 확장된 클래스 조합을 포함하는 것이다.
그래서 이것은 고전적인 계승과 조합이 가져온 좋은 결합과 같지만 초보자에게 아주 적합한 모델은 절대 아니다.

조합 및 상속 개요

이제 당신은 구도와 계승의 작업 원리를 이해했습니다. 축하합니다!
자네도 다른 점과 언제 사용하는지 알고 있네.
나는 지금 당신이 어떤 것이 당신의 상황에 더 적합한지 알 수 있을 뿐만 아니라, 현재 진행 중인 프로젝트 중 무엇이 옳고, 왜 재구성할 가치가 있는지 이해할 수 있을 것이라고 믿는다.
이것은 저희 React 시리즈의 다음 편입니다. UI나 API 호출만 만드는 것이 아니라 React에 대해 깊이 있게 토론할 것입니다.
내 생각은 너에게 너의 반응을 보여주는 것이다.JS는 왜 일이 발생했는지, 내부에서 어떻게 일했는지, 그리고 React로 구축된 기업급 해결 방안을 설계하고 관리할 수 있는 충분한 지식을 제공합니다.js.

읽어주셔서 감사합니다.'심도 있는 반응'다음 회에서 뵙겠습니다.
도리의 라드크