최초 내 것 personal blog
나는 줄곧 Angular 2+와 Ember로 네트워크 응용 프로그램을 구축하고 있다.2016년 이래로 React 프로젝트를 시작할 기회가 없습니다.
내가 CrazyEgg 일을 할 때, 나는 기존의react 응용 프로그램에 대해 약간의 변경을 했지만, 그것들은 대부분 CSS였다.나는 정말 지금까지 완전한 경험을 한 적이 없다.나는 지금까지 React를 깊이 연구한 적이 없다.
그래서 저는 이렇게 하기로 했습니다. 저는 40시간을 들여서 간단한 React CRUD 응용 프로그램을 구축하고 원본 코드를 깊이 있게 이해하며 전체 과정에서 어떻게 작동하는지 이해했습니다.

나는 Toggl로 나의 시간을 기록했다.훌륭한 도구입니다.

React는 라이브러리입니다.

각도 아니야.
Angular는 고유의 MVC/MVVM(또는 MVW 프레임워크로 루트, http 요청, 애니메이션, 폼 등 광범위한 기능을 처리하기 위해 몇 개의 작은 패키지(또는 libraries를 덧붙인다.
다른 한편,react는 단지 V일 뿐입니다. 이것은 사실상 시각층과 관계가 있습니다.와, 잠깐만!나를 오해하지 마라, 나는 결코 너를 폄하하고 싶은 것이 아니다.사실상 이런 전문화는 React에 약간의 장점을 주었고 본고의 나머지 부분에서 토론한 일부 방면에서 이것은 틀림없이 Angular보다 우수할 것이다.
React는 당신에게 더 많은 자유를 주었다고 할 수 있습니다.더 적은 템플릿과 더 빠른 초기 설정.그러나,react를 사용하여 복잡한 웹 앱을 구축하려면,reactrouter,reactpromise,Redux 같은 다른 라이브러리에 의존해야 합니다.테스트용 효소일 수도 있어요.
React에서는 Redux 또는 MobX 같은 상태 관리 라이브러리에 의존할 수 있습니다.
물론 우리는 여전히 Angularverse의 외부 도서관, 예를 들어 RxJS 또는 NgRx에 의존하여 상태 관리를 한다.
하나의 단점은 학습 곡선이 매우 가파르다는 것이다.각도 구조는 백엔드 Java 프레임워크의 영향을 약간 받습니다.이것은 TypeScript를 사용하여 구축되었고 ish 표준 파일 구조가 뚜렷합니다.만약 네가 무대 뒤에서 왔다면 다행이다.그렇지 않으면, 의존 주입이 무엇인지, 정적 유형이 무엇인지, 그리고 기본적인 대상을 향한 개념, 예를 들어 계승과 다태성을 이해해야 한다.

React's architecture ? It doesn't have any.

하지만 일부best practices도 있다.
만약 당신이 간단한 스파나 미친 애니메이션 마술을 하고 싶다면, 프로젝트 구조의 번거로움을 걱정하지 않아도 된다. 이것은 아마도 매우 좋을 것이다.그러나 만약 당신이 기능이 완비된 응용 프로그램, 예를 들어 분석기 테이블을 개발하고 싶다면 이것은 당신이 더 많은 결정을 해야 한다는 것을 의미한다.이러한 의사 결정에는 타사 라이브러리 선택, 코드 구성 및 파일 구조 선택 방법, JS 유지 또는 TypeScript 사용(yes you can TS in react이 포함됩니다.

보너스

"Let's have everything in one place" - A wild Facebook Engineer, 2013

JSX 모두가 미쳤다.논란이 된 지 2년 만에 전방 지역사회가 깨달았다it's actually not that bad.
JSX에서 HTML에 JS 논리가 포함되어 있거나, 실제로 JS에서 HTML을 작성합니다.wut?!🤔🤔🤔

// Something like this
const element = <h1>Hello, world!</h1>;
// or even this
const element = (
  <h1>
    Hello, {formatName(user)}!
  </h1>
);


// Look at this
const greetings = ['hola', 'Hello', 'Hey', 'sup'];

const listElement = (
            <ul>
              {greetings.map(
                   greeting => <li>greeting</li>  // 🤯🤯🤯
              )}
            </ul>)

다른 한편, 보수적인 각도에서는 UI와 논리를 명확하게 분리한다.HTML 파일에서 TypeScript를 사용하여 .ts 파일에서 템플릿을 작성합니다. 마치 우리 부모님이 우리를 키우신 것처럼.
이 차이는 매우 논쟁적이다.만약에 공식적인 프레임워크-y 경험이 있다면 각도법은 더욱 읽을 수 있고 이해하기 쉽다.JSX는 모든 내용이 파일이기 때문에 더 좋은 코드를 완성하고 컴파일할 때 검사합니다.각도가 특수한 스테로이드 HTML 버전을 사용하려면 ng-for 및 ng-if 와 같은 사용자 정의 명령을 사용하는 방법을 배워야 한다는 것을 기억하십시오.

데이터 바인딩

단독 템플릿 파일과 TS 파일이 있든, JSX 파일에 혼합되어 있든, 결국은 UI와 그것을 실행하는 논리가 있을 것이다.템플릿에 JS 변수에서 값을 추출하는 입력 필드가 있다고 가정합니다.

각도 MVVM 데이터 바인딩.
Angular에서 TS 코드에서 프로그래밍 방식으로 값을 변경하거나 브라우저에서 입력 필드에 쓰기를 변경한 경우 두 방향으로 이동할 수 있습니다.이것은 양방향 데이터 귀속이라고 한다.
React의 작동 원리는 약간 다릅니다.프로그래밍을 통해서만 이 상태(JS 변수의 값)를 변경할 수 있으며 UI가 자동으로 업데이트됩니다.그러나 사용자가 브라우저에서 HTML 입력 필드 값을 변경하면 JS 변수에 반영되지 않습니다.이것은 단방향 귀속입니다.React에서 양방향 바인딩을 수행하기 위해 리셋과 DOM 이벤트에 의존합니다.

// Updating state in React
<input value={someData} onChange={({ target: { value }}) => this.setState({ someData: value })} />

DOM 작업

만약 네가 자신이 무엇을 하고 있는지 알고 있다면, 반응은 매우 빠르다.진짜 빠르다.
이 배후의 원인은 React가 변경 사항을 찾기 위해 DOM 트리를 기본적으로 구분하고 변경 사항만 업데이트하기 위한 Virtual DOM 을 사용했기 때문이다. (예를 들어git의 작업 방식)
Angular는 변경할 대상 요소를 찾아 편집할 때까지 일반 DOM을 사용하여 트리 전체를 훑어봅니다.
전체적으로 볼 때, 당신이 페이지에서 대량의 요소를 사용하여 미친 짓을 하지 않는 한 성능상의 이러한 차이는 무시할 수 있다.만약 조심하지 않으면 이것은 사실상 JS 엔진의 메인 라인을 막고 UI를 동결할 것이다.

1500 이상 단원 테스트

Angular CLI를 사용하면 테스트 실행 프로그램에서 실행되는 Jasmine 테스트 프레임워크에서 제공하는 템플릿 파일을 포함하는 항목으로 설정할 수 있습니다.Jasmine, 예를 들어 Karma나 QUNit 대신 Karma를 사용해도 된다.Mocha, Jenkins 또는 TravisCI 등 지속적인 통합 서비스와 통합하고 싶다면 카마도 좋은 역할을 할 수 있다.
React는 구성 없이 기존 Jest를 사용합니다.Jest 옆에 있는 AirBnb 효소 라이브러리도 사용할 수 있습니다.CircleCI 테스트에서 DOM 상호 작용을 촉진하기 위해 JQuery API를 시뮬레이션합니다.
이게 다야!