React vs Vue: 개인적인 관점

전단 개발자로서 저는 다행히도 React와 Vue와 함께 일합니다.저는 React에서 거의 1년(2017-2018년) 동안 일했고 2018년 7월(저는 가입MotorK)부터 Vue에서 일했습니다.
이 글은 React와 Vue 사이의 어느 것이 가장 좋은지에 관한 것이 아니라 제 개인적인 관점에 관한 것입니다.나는 문장 끝에 내가 좋아하는 것을 쓰지 않을 것이다. 그러나 나는 지금 쓸 것이다.처음엔
제가 제일 좋아하는 건요.🥁🥁🥁 Vue!왜 그런지 설명해 드릴게요.

카탈로그

Separation of concerns

No JSX

Computed props

Mixins

Ecosystem

관심사 분리

Vue의 가장 좋은 특징 중 하나는 SFC(단일 파일 구성 요소)의 "주점 분리"입니다.Vue의 SFC에는 HTML, JavaScript, CSS 코드를 분할하는 것을 목표로 하는 <template>, <script> 및 <style> 세 개의 사용 가능한 블록이 있습니다.
그래서 당신이 중국증권감독위원회에서 볼 수 있는 것은:

<template>
    <section class="awesome-vue-component">
        <header class="awesome-vue-component__header">{{header}}</header>
        <div class="awesome-vue-component__body">{{body}}</div>
        <footer class="awesome-vue-component__header">{{footer}}</footer>
    </section>
</template>

<script>
    export default {
        name: 'AwesomeVueComponent',
        props: {
            header: {
                type: String,
                required: true,
            },
            body: {
                type: String,
                required: true,
            },
            footer: {
                type: String,
                required: true,
            },
        }
    }
</script>

<style lang="scss" scoped>
    .awesome-vue-component {
        &__header { 
            font-size: 18px;
        }

        &__body { 
            font-size: 14px;
        }

        &__footer { 
            font-size: 11px;
        }
    }
</style>

React의 동일한 코드는 다음과 같습니다.

import "awesome-react-component.scss";

class AwesomeReactComponent extends React.Component {
    render() {
        const {
            header,
            body,
            footer
        } = this.props;

        return (
            <section className="awesome-vue-component">
                <header className="awesome-vue-component__header">{header}</header>
                <div className="awesome-vue-component__body">{body}</div>
                <footer className="awesome-vue-component__footer">{footer}</footer>
            </section>
        );
    }
}

React는 블록을 지원하지 않기 때문에 SCS를 가져오는 유일한 방법은 외부를 읽는 것입니다.scss 파일, 이것은 구성 요소에 약간의 복잡성을 증가시켰다.

JSX 없음

제가 보여드린 바와 같이, React는 이해하기 쉬운 코드를 작성할 수 없습니다.블록이 없으므로 HTML과 JavaScript를 혼합해야 합니다.이 블렌드를 JSX라고 하는데, UI 섹션을 설명하는 데 사용되는 JavaScript 구문 확장입니다.
근데 왜 저는 JSX를 안 좋아하죠?
예를 들겠습니다.

Vue 코드

<template>
    <section class="posts">
        <section v-for="post in posts" :key="post.id" class="post">
            <header class="post__header">
                <h3 class="post__title">{{post.title}}</h3>
            </header>
            <div class="post__body">{{post.body}}</div>
            <footer class="post__footer">
                <p>{{post.footer}}</p>
            </footer>
        </section>
    </section>
</template>

React 코드

class Posts extends React.Component {
    render() {
        return (
            const posts = this.props.posts.map( post => {
                return (
                    <section key={post.id} className="post">
                        <header className="post__header">
                            <h3 className="post__title">{post.title}</h3>
                        </header>
                        <div className="post__body">{post.body}</div>
                        <footer className="post__footer">
                            <p>{post.footer}</p>
                        </footer>
                    </section>
                )
            } );

            <section className="posts">
                {posts}
            </section>
        )
    }
}

나는 Vue의 코드가 더욱 읽을 수 있고, 더욱 명확하며, 이해하기 쉽다는 것을 발견했다.
내 말은: 그것은 어쨌든 HTML 코드일 뿐이지 않습니까?

나는 너희들 중 일부가 "헤이, 너는 포스트 구성 요소를 만들고 코드를 안에 넣어야 해."라고 생각하고 있다는 것을 안다.네: 정확합니다. 하지만 이 점은 React를 사용하려면 HTML과 JavaScript 코드를 혼합해야 한다는 것입니다. 이것은 제가 정말 좋아하지 않는 것입니다. 왜냐하면 이것은 당신이 더 많은 버그를 작성할 수 있기 때문입니다.

계산 도구

계산 도구는 또 다른 괜찮은 Vue 기능이다.기본적으로, 그것들은 하나의 함수이며, 그 결과는 반응 의존 관계 캐시를 바탕으로 한다.
... 세계태권도연맹?!
네, 더 잘 설명해 드릴게요.
계산 속성은 반응성 데이터(속성 또는 데이터)에 의존하는 논리를 포장하고 반응성 의존 관계가 변화할 때만 평가한다.
실례를 하나 들겠습니다.

<template>
    <div class="dummy-vue-component">
        <p>{{greetByMethod()}}</p>
        <p>{{greetByComputed}}</p>
    </div>
</template>

<script>
    export default {
        name: 'DummyComponent',
        props: {
            name: {
                type: String,
                required: true,
            }
        },
        methods: {
            greetByMethod() {
                return `Hello ${this.name}`;
            }
        },
        computed: {
            greetByComputed() {
                return `Hello ${this.name}`;
            }
        }
    }
</script>

greetByMethod()와 greetByComputed()는 같은 결과를 얻지만 중요한 차이점은 첫 번째 결과는 UI가 다시 렌더링될 때마다 호출되고 두 번째 결과는 this.name 변경될 때만 재평가됩니다.따라서 쉽게 이해할 수 있는 것처럼 컴퓨터 도구가 더 좋고 성능이 더 좋다.
보기에서 파라미터를 전달해야 할 때만 방법을 사용해야 한다.그렇지 않으면 계산을 사용합니다.
N, B. 계산 도구를 사용할 때 () 를 제거해야 합니다. 그렇지 않으면 Vue가 방법처럼 실행되고 응용 프로그램은 더 이상 작동하지 않습니다.

혼합물

Mixin은 구성 요소 간에 코드 세션 (도구, 계산, 방법, 생명주기 방법) 을 공유할 수 있습니다.기본적으로 Vue 인스턴스에 주입할 수 있는 JavaScript 객체가 포함되어 있습니다.

/**
 * @mixin InputMixin
 */
export const InputMixin = {
    data() {
        return {
            value: ''
        }
    },
    props: {
        id: {
            type: String,
            required: true,
        },
        name: {
            type: String,
            required: true,
        }
    },
    computed: {
        getUniqueKey() {
            return `${this.name}-${this.id}`
        }
    }
}

이것은 간단한 혼합물로 다음과 같은 방식으로 성분을 주입할 수 있다.

<template>
    <div class="input-text">
        <input
            v-model="value"
            :id="getUniqueKey" 
            :name="name" 
            type="text" />
    </div>
</template>

<script>
    import { InputMixin } from './base-mixin';

    /**
     * @mixes InputMixin
     */
    export default {
        name: 'InputText',
        mixins: [
            InputMixin
        ]
    }
</script>

InputText 구성 요소는 전체 base-mixin.js 내용을 포함합니다: 데이터, 도구, 계산.
만약 다른 구성 요소가 있다면, 같은 도구, 계산, 데이터가 필요하다면, 코드가 중복되지 않도록 이 혼합을 사용할 수 있습니다.멋있지 않아요?
N, B. mixin은 구성 요소의 복잡성을 증가시켰기 때문에 @mixes JSDoc 표시를 사용해서 구성 요소가 mixin을 사용하고 있음을 표시해야 합니다.

생태계

Vue를 지원하는 또 다른 점은 믿을 수 없는 생태계입니다.
나는 Vue를 마이크로 프레임워크로 정의하는 것을 좋아한다. 왜냐하면 그것은 Vuex 및 Vue Router 등 다른 라이브러리와 함께 확장할 수 있기 때문이다.이 두 라이브러리는 Vue의 핵심 팀에서 관리합니다. 이것은 React에 없습니다.실제로 React도 설치Redux와React Router를 확장할 수 있지만 React팀에서 관리하는 프로젝트가 아니라는 것은 비공식적인 것을 의미한다.
이런 가능성은 무시할 수도 과소평가할 수도 없다. 왜냐하면 같은 팀에서 처리하는 라이브러리가 있기 때문에 더욱 안정적인 응용 프로그램을 가지는 것이 정말 중요하다.

따라와

👾 GitHub

📷

만약 네가 이 직위를 좋아한다면, 너는 나에게 하나를 줄 수 있다☕️ onPayPal.🙂