처음부터 React-like 프레임워크를 작성하는 공사 구축 실현

최근에 인터넷에서 Build your own React라는 글을 보았는데 저자는 0부터 간단한 유형의 React 프레임워크를 실현했다. 너무 많은 최적화는 없지만 React의 핵심 사상인 Concurrent Mode, Fiber Reconciler 등이 모두 실현되었다. 보고 나서 React를 이해하는 데 큰 도움이 되었다. 그래서 저는 Build your own React를 바탕으로 코드를 분리하고 자신의 프레임워크 공정을 구축하고 싶다.그리고 튜토리얼에서 완성하지 못한 다른 기능을 보완합니다. 코드는rac에 있습니다.

공사 건설

기술 창고에서 저는 Type Script로 개발하고 Rollup으로 포장하는 것을 선택했습니다. 모두 평소에 많이 사용하지 않는 기술입니다. 함께 손을 연습하고 웹 팩보다 Rollup 설정이 더 간단합니다.프로젝트에서 tsconfig를 만듭니다.json과 rollup.config.js, 그리고 필요한 rollup 플러그인, 예를 들어 rollup-plugin-typescript2, rollup-plugin-terser를 설치합니다.또한 examples 폴더를 준비하여 소형 demo 프로젝트를 만들고 tsx 개발을 사용합니다

jsx 지원

TypeScript가 jsx를 지원하려면 tsconfig에서 jsx TypeScript를 켜야 합니다. preserve,react,react-native입니다. 우리는react로 설정하면 TypeScript는 코드의 jsx를 React로 번역합니다.createElement, 이것도 jsx를 사용할 때 React가 역할 영역에 있어야 하는 이유입니다.
그러나 우리는 스스로 React-like 프레임워크를 실현해야 한다. 완전히 React에 줄 수 있다.createElement 이름을 바꿉니다.작성자는 Build your own React에서/** @jsx Didact를 사용합니다.createElement */주석, 컴파일러가 jsx의 출력 함수를 Didact로 바꾸도록 알려줍니다.create Element, 이 방법은 현재 파일에만 적용됩니다. 프로젝트에서 모든 파일에 한 줄의 주석을 추가하는 것을 사용하면 번거롭습니다.우리는 다른 방법을 통해 tsconfig에서 jsxFactory 속성을 통해 지정합니다. 여기는 h라고 합니다. React를 제외하고는.createEmenent, 그리고 특수한 요소 - Fragment, TypeScript는 기본적으로 React로 번역됩니다.Fragment, 우리는 jsxFragmentFactory를 통해 Fragment로 직접 바꿉니다.
tsconfig.json:

{
  "compilerOptions": {
    "target": "esnext",
    "module": "commonjs",
    "moduleResolution": "node",
    "jsx": "react", // enable jsx
    "jsxFactory": "h", // React.createElement => h
    "jsxFragmentFactory": "Fragment", // React.Fragment => Fragment
    "rootDir": "./src",
    "lib": ["dom", "es2015"]
  }
}

Rollup 구성

Rollup의 설정은 비교적 간단합니다. input, output 외에 플러그인을 추가하면 됩니다.

const path = require('path')
const typescript = require('rollup-plugin-typescript2')
const { terser } = require('rollup-plugin-terser')
const eslint = require('@rollup/plugin-eslint')

export default {
  input: 'src/index.ts',
  output: [
    { file: 'dist/rac.umd.js', format: 'umd', name: 'rac' }
  ],
  plugins: [
    terser(),
    eslint({
      throwOnError: true,
      include: ['src/**/*.ts']
    }),
    typescript({
      verbosity: 0,
      tsconfig: path.resolve(__dirname, 'tsconfig.json'),
      useTsconfigDeclarationDir: true
    })
  ]
}

Eslint in TypeScript

Eslint가 TypeScript를 지원할 수 있도록 Eslint에 대한 추가 구성이 필요합니다.

module.exports = {
  parser: '@typescript-eslint/parser',
  env: {
    es6: true,
    browser: true
  },
  plugins: [
    '@typescript-eslint'
  ],
  extends: [
    'eslint:recommended',
  ],
  parserOptions: {
    sourceType: 'module'
  },
  rules: {
    ...
  }
}

프로젝트 구조
React의 새로운 Fiber 구조는 몇 가지 핵심 개념이 있는데 Build your own React에서 저자는

Step I: The createElement Function

Step II: The render Function

Step III: Concurrent Mode

Step IV: Fibers

Step V: Render and Commit Phases

Step VI: Reconciliation

Step VII: Function Components

Step VIII: Hooks

이 몇 단계는 점차적으로 하나의 mini React를 실현했다. 코드의 읽기 가능성과 유지보수성을 높이기 위해 이러한 기능을 서로 다른 파일로 구분한다.

.
├── README.md
├── examples  // demo 
├── package.json
├── rollup.config.js
├── src
│   ├── dom.ts
│   ├── h.ts
│   ├── hooks.ts
│   ├── index.ts
│   ├── reconciler.ts
│   ├── scheduler.ts
│   └── type.ts
└── tsconfig.json

dom.ts에서 DOM 관련 작업을 처리합니다

h.ts에서 jsxFactory, jsxFragmentFactory에 대한 실현이다

hooks.ts에서 훅스에 대한 실현입니다

reconciler.ts는 Reconcile 단계와commit 단계의 실현이다

shceduler.ts는 작업 스케줄러의 실현이다

type.ts는 일부 유형 정의입니다

이 공사에 이르러 구축되었다. 전체 공사의 구조와 일부 코드 실현에 있어서fre라는 구조를 참고했다.
이 글은 처음부터 React-like 프레임워크를 작성하는 공사 구축의 실현에 관한 글입니다. 더 많은 React-like 구축 내용은 저희 이전의 글을 검색하거나 아래의 관련 글을 계속 훑어보십시오. 앞으로 많은 응원 부탁드립니다!