며칠 작은 파트너 전 이제 점점 더 어려워 모든 차례 XXX 원칙, XX 소스와 같은 문제를 보지 못했다되는 인터뷰의 프론트 엔드에 대해서 이야기, 이야기하고,
그렇게이 문서와, 어떻게해야 지금 주류 소스 프레임 워크를 배울 수있는 나 한테 물어 후.
그것은 매우 간단 반응 reactdom 확인을 클릭하여 두 문서를 도입 반응한다 사용에 관해서 만,이 두 파일은 패키지를 컴파일 할 때, 우리는 디버그 중단 점 콘솔 디버깅 또는 내부에 수 없습니다,
나는 소스 코드 프레임 워크를 배우고 싶습니다 그래서 첫 번째 단계는 로컬 소스 내에서 실행 디버깅 출력의 다양한 수행하기 위해 필요하다.
음, 가십은 주제를 시작 말하지 않는다
소스 코드를 얻기 위해 반응
여기에 내가 버전 16.10.0를 사용하기로 결정했습니다,
물론 구하기는 자식 저장소 반응
테스트 프로젝트를 만듭니다
-
로컬로 만들-반응-응용 프로그램을 통해 테스트 프로젝트를 만듭니다
-
당신은 소스 코드와 webopack 구성을 수정할 프로젝트를 생성 한 후, 우리는 솔루션을 제공하는 '원치 마구'필요
npm run eject - 프로젝트 디렉토리에서 더 많은 설정 파일의 것
이 프로젝트는 다운로드 된 소스 코드 파일을 대체하기 위해 만들어졌습니다
- 프로젝트 소스 코드를 다운로드 16.10.0 src 디렉토리에 던져
- 구성 파일 == / 설정 / webpack.config.js == 컴파일을 변경하고 프로젝트를 실행할 때 우리 가져온의 소스
resolve:{
...,
alias: {
// Support React Native Web
// https://www.smashingmagazine.com/2016/08/a-glimpse-into-the-future-with-react-native-for-web/
// 'react-native': 'react-native-web',
// Allows for better profiling with ReactDevTools
// ...(isEnvProductionProfile && {
// 'react-dom$': 'react-dom/profiling',
// 'scheduler/tracing': 'scheduler/tracing-profiling',
// }),
// ...(modules.webpackAliases || {}),
'react': path.resolve(__dirname, '../src/react/packages/react'),
'react-dom': path.resolve(__dirname, '../src/react/packages/react-dom'),
'legacy-events': path.resolve(__dirname, '../src/react/packages/legacy-events'),
'shared': path.resolve(__dirname, '../src/react/packages/shared'),
'react-reconciler': path.resolve(__dirname, '../src/react/packages/react-reconciler'),
},
}
오류 처리
교체가 다양한 오류가 발생합니다, 때문에 컴파일러의 버전을 완료 한 후,
오류 및 솔루션의 특정 유형, 여기에 대한 간략한 소개를 할 수
유량 검출 오차
- 이 물건을 할 흐름 유형 검사를 사용하여 소스 코드를 반응하기 때문에,
우리는 == 설치해야합니다 그래서 @ 바벨 / 플러그인 - 변환 - 흐름 - 스트립 타입 ==이 플러그인 타입 감지를 무시를
- 플러그인 설치
npm install @babel/plugin-transform-flow-strip-types -D
- 플러그인 구성
//在webpack.config.js的babel-loader中添加配置
{
test: /\.(js|mjs|jsx|ts|tsx)$/,
include: paths.appSrc,
loader: require.resolve('babel-loader'),
options: {
customize: require.resolve(
'babel-preset-react-app/webpack-overrides'
),
plugins: [
...,
[require.resolve('@babel/plugin-transform-flow-strip-types')]
// 配置忽略flow类型检测
],
...
}
hostconfig에 구성 오류
- 파일을 수정 == SRC / 반응 / 패키지 / 반응-조정자 / SRC / ReactFiberHostConfig.js ==, hostconfig에 환경을 내보낼 따라.
//添加以下代码
export * from './forks/ReactFiberHostConfig.dom';
글로벌 변수 오류의 일부
- stringifed 객체 변형 == / 구성 / env.js == 증가 속성
const stringified = {
'process.env': Object.keys(raw).reduce((env, key) => {
env[key] = JSON.stringify(raw[key]);
return env;
}, {}),
"__DEV__": true,
"__PROFILE__": true,
"__UMD__": true
};
hasOwnProperty ReactSharedInternals.js 错误
- 파일 == SRC / 반응 / 패키지 / 공유 / ReactSharedInternals.js을 수정합니다. ==
// react此时未export内容，直接从ReactSharedInternals拿值
// import React from 'react';
// 此时React为undefined
// const ReactSharedInternals = React.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED;
import ReactSharedInternals from '../react/src/ReactSharedInternals';
불변 () 함수가 주어진
-
== SRC / 반응 / 패키지 / 공유 / invariant.js == 파일 불변 기능에서 오류 처리
- 다음과 같이 개정 :
export default function invariant(condition, format, a, b, c, d, e, f) {
if(condition) return ;
throw new Error(
'Internal React error: invariant() is meant to be replaced at compile ' +
'time. There is no runtime version.',
);
}
지금까지 프로젝트는 지금 우리가 다운로드 수입 react16.10.0에 사용 된 소스 코드를 실행 반응, 우리는 출력을 디버깅 소스 코드에서 잘못 될 수 있습니다
예를 들어, 내가 출력 반응 테스트 /하는 index.js 소스
'use strict';
const React = require('./src/React');
console.log('源码测试',React)
// TODO: decide on the top-level export form.
// This is hacky but makes it work with both Rollup and Jest.
module.exports = React.default || React;
로컬 테스트 환경 구성 너무 많은 문제 경멸, 직접 작은 메인 자식 내 프로젝트에서 나는 드롭 다운 개발 프로젝트를 구성 할 수 있습니다
npm install
npm start
GIT
ReactSourceCodeAnalyze :
https://github.com/fchangjun/ReactSourceCodeAnalyze.git
이 문서 유용한 느끼는 경우, 주요 공공 우려의 소수를 기쁘게, 쉽게 다음을 전달.