feat: test 2 type of Comp

Author: ceilf6

React/sandboxs/src/index.js

@@ -2,4 +2,24 @@ import React from 'react'; // 虽然也许可能没有使用，如果删了就
 import ReactDOM from 'react-dom';
 
 // import './test/test1'
-import './test/toggleImg'
+// import './test/toggleImg'
+
+import FuncComp from './test/Comp/func'
+import ClassComp from './test/Comp/class';
+const el = (<FuncComp str="ceilf6" num={7}></FuncComp>)
+console.log(el)
+// 组件生成的仍然是React元素，但是 type: ƒ Comp()
+// 如果首字母不大写的话就是普通元素
+const el2 = (<ClassComp str="ceilf6" num={7}></ClassComp>) // type: class ClassComp
+console.log(el2)
+const allEl = (
+    <>
+        {el}
+        {el2}
+        {<FuncComp useless={false} useful
+            obj={{ name: "ceilf6", age: 20, ui: (<div>nihao</div>) }}
+        >
+        </FuncComp >}
+    </>
+)
+ReactDOM.render(allEl, document.getElementById('root'))

React/sandboxs/src/test/Comp/class.js

@@ -0,0 +1,14 @@
+import React from 'react'
+
+export default class ClassComp extends React.Component {
+    constructor(props) {
+        super(props); // this.props = props
+        console.log("=== props", props)
+    }
+
+    render() {
+        return (
+            <h1>nihao2 {this.props.num}</h1>
+        )
+    }
+}

React/sandboxs/src/test/Comp/func.jsx

@@ -0,0 +1,19 @@
+// imr
+import React from 'react'
+
+export default function FuncComp(props) {
+    console.log("=== props",props)
+    /**
+     * 危险！！否则排查很麻烦
+     */
+    // if(props?.obj?.name) props.obj.name = "250"
+    // props.obj = {name: "250"}
+    // error: readonly
+    return (
+        <>
+            <h1>nihao {props.str} {props.num}</h1>
+            <h1>objName: {props?.obj?.name}</h1>
+            <h1>objUI: {props?.obj?.ui}</h1>
+        </>
+    )
+}