Hace unos días una pequeña pareja y yo estábamos hablando, hablando de la parte delantera de la entrevista ahora más y más difícil cada vez está xxx principio, no he visto un problema como fuente xx,
Después me preguntas cómo aprender debe framework de código ahora la corriente principal, por lo que con este artículo.
Cuando se trata de usar que se reacciona muy simple y reaccionar reactdom presentó dos documentos clic en OK, pero estos dos archivos se compilan paquete, no podemos depuración punto de interrupción de depuración de la consola o en el interior,
Así que me gustaría aprender el marco de código fuente, el primer paso es necesario con el fin de llevar a cabo una variedad de información de depuración ejecutar localmente dentro de la fuente.
Así, el chisme no dice, acaba de empezar el tema
Reaccionar para obtener el código fuente
Aquí he optado por utilizar la versión 16.10.0,
La obtención por supuesto reaccionan repositorio git
Crear un proyecto de prueba
-
Crear un proyecto de prueba a través de la aplicación crear reaccionan localmente
-
Después de crear el proyecto que desea modificar el código fuente y la configuración webopack, necesitamos 'Want juerga' para salir solución
npm run eject - Bajo el directorio del proyecto será más de un archivo de configuración
El proyecto fue creado para reemplazar el archivo de código fuente descargado
- El código fuente del proyecto descarga 16.10.0 echado en el directorio src
- Cambiar el archivo de configuración == / config / webpack.config.js == compilar y ejecutar el proyecto cuando la fuente de nuestras ha sido importada
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'),
},
}
Control de errores
Después de la sustitución se ha completado, y debido a la versión del compilador se encontrará con una variedad de errores,
Los tipos específicos de errores y soluciones, aquí para hacer una introducción breve
error de detección de flujo
- Debido a reaccionar el código fuente usando una comprobación de tipos de flujo para hacer estas cosas,
Así que tenemos que instalar == @ babel / plugin-transform-fluir-strip-tipos == Este plugin ignoran detección del tipo de
- Plug-in de instalación
npm install @babel/plugin-transform-flow-strip-types -D
- Configuración enchufable
//在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类型检测
],
...
}
error de configuración hostconfig
- Modificar el archivo == src / reaccionar / paquetes / reaccionar-reconciliador / src / ReactFiberHostConfig.js ==, según exportar ambiente hostconfig.
//添加以下代码
export * from './forks/ReactFiberHostConfig.dom';
Parte del error de las variables globales
- objeto stringifed modificación == / config / env.js == aumentos propiedad
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 错误
- Modificar el archivo src / == reaccionar / packages / shared / 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';
invariante () Habida cuenta de la función
-
Control de errores Bajo == reaccionar / paquetes / invariant.js == función src / shared / archivo invariante
- Modificado de la siguiente manera:
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.',
);
}
Hasta ahora reaccionan proyectos ahora corren el código fuente usado para la importación react16.10.0 hemos descargado, podemos estar mal en el código fuente de la salida de depuración de
Por ejemplo, he probado la salida reaccionar / fuente 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;
Desprecian la configuración del entorno de prueba local demasiados problemas, puede directamente desde el pequeño git principal de mi proyecto he configurado el desplegable proyectos de desarrollo
npm install
npm start
GIT
ReactSourceCodeAnalyze:
https://github.com/fchangjun/ReactSourceCodeAnalyze.git
Si se siente este artículo útil, por favor pequeño número de preocupación pública primaria, transmitido fácilmente al siguiente.