feat[ptr]: useRef 源码分析

Author: ceilf6

.effect-pictures/react-ref失控.png

@@ -6,27 +6,31 @@ import React,{useState} from 'react'
 // import ForceReRender from './test/Context/ForceReRender'
 // import FormTest from './components/Form/Test'
 // import EventTest from './Source-Event/Test'
-import UseReducerText from './test/UseReducerText'
 
-const UseStateText = (props) => {
-    const {initialData} = props
+// import UseReducerText from './test/UseReducerText'
+// const UseStateText = (props) => {
+//     const {initialData} = props
 
-    const [state,setState] = useState(() => 666*initialData)
-    return (
-        <button onClick={() => setState(state*10)}>
-            {state}
-        </button>
-    )
-}
+//     const [state,setState] = useState(() => 666*initialData)
+//     return (
+//         <button onClick={() => setState(state*10)}>
+//             {state}
+//         </button>
+//     )
+// }
+
+import RefLoseControl from './test/RefLoseControl'
 
 const el = (
     <>
         {/* <CheckBoxGroupText />
         <SelectText />
         <RadioBoxGroupText /> */}
 
-        <UseReducerText />
-        <UseStateText initialData={1}/>
+        {/* <UseReducerText />
+        <UseStateText initialData={1}/> */}
+    
+        <RefLoseControl />
     </>
 )
 

React/sandboxs/src/App.jsx

@@ -1,7 +1,7 @@
 import React from 'react'; // 虽然也许可能没有使用，如果删了就会报错React.createElement
 import ReactDOM from 'react-dom';
 
-import ClassCompRender from './test/ClassCompRender'
+// import ClassCompRender from './test/ClassCompRender'
 
 // import './test/test1'
 // import './test/toggleImg'
@@ -63,60 +63,60 @@ import App from './App'
 ReactDOM.render(<App />, document.getElementById('root'))
 
 
-const app = <div className="prop">
-    <h1>
-        标题
-        {["abc", null, <p>段落</p>]}
-    </h1>
-    <p>
-        {undefined}
-    </p>
-    <ClassCompRender />
-</div>;
-
-function setProps(dom, props = {}) {
-    for (const [key, value] of Object.entries(props)) {
-        if (key === 'children' || value == null) continue;
-
-        if (key === 'className') {
-            dom.setAttribute('class', value);
-        } else if (key === 'style' && typeof value === 'object') {
-            Object.assign(dom.style, value);
-        } else if (/^on[A-Z]/.test(key) && typeof value === 'function') {
-            const eventName = key.slice(2).toLowerCase();
-            dom.addEventListener(eventName, value);
-        } else if (key in dom) {
-            dom[key] = value;
-        } else {
-            dom.setAttribute(key, String(value));
-        }
-    }
-}
-function render(vnode, container) {
-    if (Array.isArray(vnode)) {
-        vnode.forEach(child => render(child, container));
-        return;
-    }
-
-    if (vnode == null || typeof vnode === 'boolean') return;
-
-    if (typeof vnode === 'string' || typeof vnode === 'number') {
-        container.appendChild(document.createTextNode(String(vnode)));
-        return;
-    }
-
-    if (typeof vnode.type === 'function') {
-        render(vnode.type(vnode.props || {}), container);
-        return;
-    }
-
-    if (!vnode || typeof vnode !== 'object' || !vnode.type) return;
-
-    const dom = document.createElement(vnode.type);
-    setProps(dom, vnode.props);
-    render(vnode.props?.children, dom); // 直接递归，不手动包一层 list
-    container.appendChild(dom);
-}
+// const app = <div className="prop">
+//     <h1>
+//         标题
+//         {["abc", null, <p>段落</p>]}
+//     </h1>
+//     <p>
+//         {undefined}
+//     </p>
+//     <ClassCompRender />
+// </div>;
+
+// function setProps(dom, props = {}) {
+//     for (const [key, value] of Object.entries(props)) {
+//         if (key === 'children' || value == null) continue;
+
+//         if (key === 'className') {
+//             dom.setAttribute('class', value);
+//         } else if (key === 'style' && typeof value === 'object') {
+//             Object.assign(dom.style, value);
+//         } else if (/^on[A-Z]/.test(key) && typeof value === 'function') {
+//             const eventName = key.slice(2).toLowerCase();
+//             dom.addEventListener(eventName, value);
+//         } else if (key in dom) {
+//             dom[key] = value;
+//         } else {
+//             dom.setAttribute(key, String(value));
+//         }
+//     }
+// }
+// function render(vnode, container) {
+//     if (Array.isArray(vnode)) {
+//         vnode.forEach(child => render(child, container));
+//         return;
+//     }
+
+//     if (vnode == null || typeof vnode === 'boolean') return;
+
+//     if (typeof vnode === 'string' || typeof vnode === 'number') {
+//         container.appendChild(document.createTextNode(String(vnode)));
+//         return;
+//     }
+
+//     if (typeof vnode.type === 'function') {
+//         render(vnode.type(vnode.props || {}), container);
+//         return;
+//     }
+
+//     if (!vnode || typeof vnode !== 'object' || !vnode.type) return;
+
+//     const dom = document.createElement(vnode.type);
+//     setProps(dom, vnode.props);
+//     render(vnode.props?.children, dom); // 直接递归，不手动包一层 list
+//     container.appendChild(dom);
+// }
 // const root = document.getElementById('root');
 // render(app, root);
 

React/sandboxs/src/index.js

@@ -0,0 +1,14 @@
+import React, { useState, useRef } from 'react'
+
+export default () => {
+    const [isShow, setShow] = useState(true);
+    const ref = useRef(null);
+
+    return (
+        <div>
+            <button onClick={() => setShow(!isShow)}>React操作DOM</button>
+            <button onClick={() => ref.current.remove()}>开发者DOM</button>
+            {isShow && <p ref={ref}>ceilf6</p>}
+        </div>
+    );
+}