React 구성 요소 전환 Vue 구성 요소 의 명령 쓰기

현재 React 와 Vue 의 비교 화 를 바탕 으로react-to-vue도 구 를 개발 하 는 목적 은 구성 요소 의 재 활용 성 을 한층 더 향상 시 키 고 구성 요소 의 재 활용 을 한 프레임 에 만 국한 시 키 는 것 이 아니 라
간단 한 소개
react-tovue 도구 에 대해 서 는 모든 react 응용 이 아 닌 기본 적 인 react component 로 전환 합 니 다.기본 react component 의 정 의 는 props 와 state 를 기반 으로 하 는 구성 요소 이 며,보 내기 요청 도 포함 할 수 있 습 니 다.
본 고 는 먼저 두 프레임 의 구성 요소 의 공통성 과 호 환 되 지 않 는 부분 을 소개 한 다음 에 react-tovue 의 사용 과 원 리 를 소개 한다.실제 업무 에서 육 금 소 100 여 개의 react 기초 업무 구성 요 소 는 react-to-vue 가 90%이상 전환 되 어 vue 구성 요소 가 될 수 있다.
두 프레임 의 구성 요소 공통성 을 점검 하 다.
1. props

// react
FrontendMagazine.propTypes = {
  name: PropTypes.string
}
FrontendMagazine.defaultProps = {
  name: 'FrontendMagazine'
}
// vue
{
  name: 'frontend-magazine',
  props: {
    name: {
      type: String,
      default: 'FrontendMagazine'
    }
  }
}

2.구성 요소 자체 상태
프레임
설명 하 다.
React
초기 화 할 때 this.state={xxx}을 통 해 설정 합 니 다.
Vue
data 반환 함 수 를 통 해 값 을 설정 합 니 다.react 의 state 와 달리 vue 는 응답 식 입 니 다.
3.라 이 프 사이클
생명주기 명 은 다 르 지만 대응 하 는 것 은 많 지 않다.

4.사건 처리
프레임
설명 하 다.
React
해당 이벤트 가 구성 요소 의 인 스 턴 스 방법 에 추가 되 었 습 니 다.
Vue
디자인 이 비교적 좋 고 사건 처리 가 모두 하나의 methods 대상 아래 에 추가 되 어 찾기 쉽 고 직관 적 이다.

// react
class FrontendMagazine {
  clickme () {
    // xxxx
  }
}
// vue
{
  name: 'frontend-magazine',
  methods: {
    clickme () {
      // xxx
    }
  }
}

5.구성 요소 오류 캡 처
프레임
설명 하 다.
React
componentDidCatch
Vue
errorCaptured
6.jsx 문법
react 는 jsx 를 바탕 으로 쓴 것 입 니 다.vue 에 있어 서 많은 장면 에서 template 로 쓸 수 있 지만 vue 도 jsx 문법 을 완전히 지원 합 니 다.이 도구 에 대해 서도 react 의 jsx 문법 을 vue 가 지원 하 는 jsx 로 바 꿀 뿐 입 니 다.
두 프레임 이 호 환 되 지 않 는 곳.
react 는 최신 버 전에 서 flagments 의 지원 이 있 습 니 다.루트 노드 가 여러 노드 로 돌아 갈 수 있 도록 합 니 다.현재 vue 가 지원 하 는 것 을 보지 못 했 습 니 다.그리고 react 구성 요 소 를 디자인 할 때 높 은 단 계 를 사 용 했 습 니 다.이 도구 에 대해 서도 지원 하지 않 습 니 다.
react-to-vue 도구
설치 및 사용

# install
npm install -g react-to-vue
# usage
Usage: rtv [options] file(react component)

Options:

 -V, --version     output the version number
 -o --output [string] the output file name
 -t --ts        it is a typescript component
 -h, --help      output usage information

 # demo
 rtv demo.js
원리 절차

입력 한 파일 에 대해 서 는 먼저 babylon 을 사용 하여 분석 하여 ast

를 생 성 합 니 다.

파일 이 type:script 이면 해당 ts 설명 을 삭제 합 니 다

ast 를 옮 겨 다 니 며 먼저 propTypes 와 defaultProps

를 추출 합 니 다.

구성 요소 유형 에 따라 함수 구성 요소 와 클래스 구성 요 소 를 처리 합 니 다

클래스 구성 요소 에서 수명 주기,state 등 정 보 를 전환 해 야 합 니 다

마지막 으로 추출 한 정보 에 따라 vue 구성 요소 로 연결 하여 prettier-esint 를 통 해 미화

전환 전후 대비
 
원본 을 여 는 react 와 vue 구성 요 소 를 동시에 쓰 는 방법
만약 당신 의 구성 요소 가 모두 에 게 원본 으로 사용 되 려 고 한다 면,작 가 는 작은 제안 이 있 습 니 다.react 구성 요 소 를 쓰 면서 vue 구성 요소 로 전환 하려 고 합 니 다.문제 가 있 으 면 코드 를 바 꾸 고 가능 한 한 프레임 워 크 지원 을 해 보 세 요.그러면 당신 이 쓴 구성 요 소 는 react 와 vue 프로젝트 에서 동시에 사용 할 수 있 습 니 다.
총결산
위 에서 말 한 것 은 소 편 이 소개 한 React 구성 요소 가 Vue 구성 요 소 를 바 꾸 는 명령 작성 입 니 다.여러분 에 게 도움 이 되 기 를 바 랍 니 다.궁금 한 점 이 있 으 시 면 메 시 지 를 남 겨 주세요.소 편 은 제때에 답 해 드 리 겠 습 니 다.여기 서도 저희 사이트 에 대한 여러분 의 지지 에 감 사 드 립 니 다!