feat: 瀹屽杽鎵撳寘缁撴灉涓巎sx鏂规硶锛岄€傚簲鏈€鏂扮増17+缂栬瘧

juanlou1217 · juanlou1217 · commit 56f525371a6d · 2025-10-17T01:49:50.000+08:00
diff --git a/dist/modules/react/index.js b/dist/modules/react/index.js
@@ -18,11 +18,11 @@
 	        type, // 元素类型
 	        ref, // 元素引用
 	        props, // 元素属性
-	        _mark: 'juanlou'
+	        _mark: '_juanlou'
 	    };
 	};
 	// jsx 函数 参数 ： type, config, children
-	const jsx = (type, config, ...maybeChildren) => {
+	const jsx = (type, config) => {
 	    //  React 会从 config 中提取 key 和 ref，剩下的都放到 props 对象
 	    let key = null;
 	    let ref = null;
@@ -46,17 +46,6 @@
 	            props[prop] = val;
 	        }
 	    }
-	    // 检测是否有子组件 ， 数组 或 单独
-	    const maybeChildrenLength = maybeChildren.length;
-	    if (maybeChildrenLength) {
-	        if (maybeChildrenLength === 1) {
-	            // 只有一个的时候，就扁平化 去除 []
-	            props.children = maybeChildren[0];
-	        }
-	        else {
-	            props.children = maybeChildren;
-	        }
-	    }
 	    return ReactElement(type, key, ref, props);
 	};
 
diff --git a/dist/modules/react/jsx-dev-runtime.js b/dist/modules/react/jsx-dev-runtime.js
@@ -18,11 +18,11 @@
 	        type, // 元素类型
 	        ref, // 元素引用
 	        props, // 元素属性
-	        _mark: 'juanlou'
+	        _mark: '_juanlou'
 	    };
 	};
 	// jsx 函数 参数 ： type, config, children
-	const jsx = (type, config, ...maybeChildren) => {
+	const jsx = (type, config) => {
 	    //  React 会从 config 中提取 key 和 ref，剩下的都放到 props 对象
 	    let key = null;
 	    let ref = null;
@@ -46,17 +46,6 @@
 	            props[prop] = val;
 	        }
 	    }
-	    // 检测是否有子组件 ， 数组 或 单独
-	    const maybeChildrenLength = maybeChildren.length;
-	    if (maybeChildrenLength) {
-	        if (maybeChildrenLength === 1) {
-	            // 只有一个的时候，就扁平化 去除 []
-	            props.children = maybeChildren[0];
-	        }
-	        else {
-	            props.children = maybeChildren;
-	        }
-	    }
 	    return ReactElement(type, key, ref, props);
 	};
 	const jsxDEV = jsx;
diff --git a/dist/modules/react/jsx-runtime.js b/dist/modules/react/jsx-runtime.js
@@ -18,11 +18,11 @@
 	        type, // 元素类型
 	        ref, // 元素引用
 	        props, // 元素属性
-	        _mark: 'juanlou'
+	        _mark: '_juanlou'
 	    };
 	};
 	// jsx 函数 参数 ： type, config, children
-	const jsx = (type, config, ...maybeChildren) => {
+	const jsx = (type, config) => {
 	    //  React 会从 config 中提取 key 和 ref，剩下的都放到 props 对象
 	    let key = null;
 	    let ref = null;
@@ -46,17 +46,6 @@
 	            props[prop] = val;
 	        }
 	    }
-	    // 检测是否有子组件 ， 数组 或 单独
-	    const maybeChildrenLength = maybeChildren.length;
-	    if (maybeChildrenLength) {
-	        if (maybeChildrenLength === 1) {
-	            // 只有一个的时候，就扁平化 去除 []
-	            props.children = maybeChildren[0];
-	        }
-	        else {
-	            props.children = maybeChildren;
-	        }
-	    }
 	    return ReactElement(type, key, ref, props);
 	};
 	const jsxDEV = jsx;
diff --git a/dist/modules/react/package.json b/dist/modules/react/package.json
@@ -1,16 +1,6 @@
 {
-  "name": {
-    "name": "react",
-    "version": "1.0.0",
-    "description": "react公用方法,核心 API 与组件模型",
-    "module": "index.ts",
-    "dependencies": {
-      "shared": "workspace:*"
-    },
-    "keywords": [],
-    "author": "",
-    "license": "ISC",
-    "packageManager": "pnpm@10.17.0"
-  },
+  "name": "react",
+  "description": "react公用方法,核心 API 与组件模型",
+  "version": "1.0.0",
   "main": "index.js"
 }
diff --git a/notes-react/notes/2.JSX转换.md b/notes-react/notes/2.JSX转换.md
@@ -70,20 +70,44 @@ AST 转换为 JavaScript 函数调用，并处理语法规则（如 `class` →
 - React 17 前（传统运行时）：
 
   ```js
+  React.createElement(type, config, ...children)
+  
   React.createElement("div", { className: "header" }, "Hello");
   ```
 
 - React 17+（自动运行时）：
 
   ```js
   import { jsx as _jsx } from 'react/jsx-runtime';
+  _jsx(Component, config)
   _jsx("div", { className: "header", children: "Hello" });
   ```
-
+  
   优势：自动导入 jsx-runtime，无需手动引入 React，支持 Tree-shaking
-
   
-
+  
+  
+  还有17前后编译的结果也不同
+  
+  ```
+  <div>
+    hello
+    <span>world</span>
+  </div>
+  
+  // 17后编译成：
+  jsx('div', {
+    	children: ['hello', jsx('span', { children: 'world' })]
+  })
+  
+  // 17前编译成：
+  React.createElement('div', 
+  	null,
+    	'hello',
+    	React.createElement('span', null, 'world')
+  )
+  ```
+  
   
 
 #### **运行时：**
@@ -179,15 +203,122 @@ reactElement() 函数进行统一的工厂对象创建输出
 
 新建script/rollup/react.config.js
 
+进行书写打包配置规则，根据模块的package.json中的信息 生成路径
+
+配置关键 
+
+```js
+{	
+	input: `${pkgPath}/${module}`,
+	output: {
+		file: `${pkgDistPath}/index.js`,
+		name: 'React',
+		format: 'umd' // UMD 格式（浏览器+Node都可用）
+	},
+    plugins: [
+		...getBaseRollupPlugins(), // TS编译 + CommonJS转换
+		generatePackageJson({
+			// 自动生成 package.json
+			inputFolder: `${pkgPath}`,
+			outputFolder: `${pkgDistPath}`,
+			baseContents: (name, description, version) => ({
+				name,
+				description,
+				version,
+				main: 'index.js'
+				})    
+    ] 
+        
+}
+```
+
+
+
+
+
+并配置打包命令
+
+
 
+接下来打包成功后，进行调试 
 
+```
+pnpm link --global // 请求被连接
+
+pnpm link react --global // 主动去连接
+```
+
+将当前项目链接到全局 node_modules 中，使得该项目可以在全局范围内被其他项目引用或使用。
 
 
 
+创建调试测试项目
+
+```cmd
+npx create-react-app react-demo
+```
+
 
 
+index中
+
+```js
+import React from 'react';
+
+const aa =
+    <div >
+        hello
+        <span>world</span>
+    </div>
+
+console.log(React)
+console.log(aa)
+```
+
 
 
+经过编译后是
+
+```js
+import { jsx as _jsx } from 'react/jsx-runtime';
+import React from 'react';
+
+const aa = _jsx('div', {
+  children: [
+    'hello',
+    _jsx('span', { children: 'world' })
+  ]
+});
+```
+
+编译器会自动添加运行时的库，并使用的
+
+> import { jsx as _jsx } from 'react/jsx-runtime';
+
+
+
+因此为一下逻辑
+
+```md
+你的代码：
+<div>hello</div>
+        ↓
+Babel/TypeScript 编译
+        ↓
+自动导入：import { jsx } from 'react/jsx-runtime'
+        ↓
+转换为：jsx('div', { children: 'hello' })
+        ↓
+执行 jsx() 函数（来自 dist/modules/react/jsx-runtime.js）
+        ↓
+返回 ReactElement 对象：
+{
+  $$typeof: Symbol(react.element),
+  type: 'div',
+  props: { children: 'hello' },
+  _mark: 'juanlou'  ← 你的自定义标记！
+}
+```
 
 
 
diff --git a/packages/react/src/jsx.ts b/packages/react/src/jsx.ts
@@ -21,12 +21,12 @@ const ReactElement = function (
 		type, // 元素类型
 		ref, // 元素引用
 		props, // 元素属性
-		_mark: 'juanlou'
+		_mark: '_juanlou'
 	};
 };
 
 // jsx 函数 参数 ： type, config, children
-export const jsx = (type: ElementType, config: any, ...maybeChildren: any) => {
+export const jsx = (type: ElementType, config: any) => {
 	//  React 会从 config 中提取 key 和 ref，剩下的都放到 props 对象
 	let key: Key = null;
 	let ref: Ref = null;
@@ -52,17 +52,6 @@ export const jsx = (type: ElementType, config: any, ...maybeChildren: any) => {
 			props[prop] = val;
 		}
 	}
-
-	// 检测是否有子组件 ， 数组 或 单独
-	const maybeChildrenLength = maybeChildren.length;
-	if (maybeChildrenLength) {
-		if (maybeChildrenLength === 1) {
-			// 只有一个的时候，就扁平化 去除 []
-			props.children = maybeChildren[0];
-		} else {
-			props.children = maybeChildren;
-		}
-	}
 	return ReactElement(type, key, ref, props);
 };
 
diff --git a/script/rollup/react.config.js b/script/rollup/react.config.js
@@ -18,17 +18,18 @@ export default [
 		output: {
 			file: `${pkgDistPath}/index.js`,
 			name: 'React',
-			format: 'umd'
+			format: 'umd' // UMD 格式（浏览器+Node都可用）
 		},
 		plugins: [
-			...getBaseRollupPlugins(),
+			...getBaseRollupPlugins(), // TS编译 + CommonJS转换
 			generatePackageJson({
+				// 自动生成 package.json
 				inputFolder: `${pkgPath}`,
 				outputFolder: `${pkgDistPath}`,
-				baseContents: (name, description, version) => ({
-					name,
-					description,
-					version,
+				baseContents: (pkg) => ({
+					name: pkg.name,
+					description: pkg.description,
+					version: pkg.version,
 					main: 'index.js'
 				})
 			})
