upd: react

victorsun · victorsun · commit 34f92006da33 · 2023-04-10T22:23:54.000+08:00
diff --git a/12-前端框架/03-React/react18/12-reducer/index.js b/12-前端框架/03-React/react18/12-reducer/index.js
@@ -1,4 +1,3 @@
-import React from 'react';
 import ReactDOM from 'react-dom/client';
 import App from "./App";
 
diff --git a/12-前端框架/03-React/react18/13-memo/App.js b/12-前端框架/03-React/react18/13-memo/App.js
@@ -0,0 +1,24 @@
+import React, {useState} from 'react';
+import A from "./components/A";
+
+/**
+ * React.memo() 一个高阶组件，用于缓存组件
+ * 接收一个组件作为参数，并返回一个包装过的新组件，只有组件的props发生变化才会触发渲染
+ */
+
+const App = () => {
+    const [count, setCount] = useState(1);
+    const clickHandler = () => {
+        setCount(prevState => prevState + 1);
+    };
+
+    return (
+        <div>
+            <h2>App - {count}</h2>
+            <button onClick={clickHandler}>App 不触发A渲染</button>
+            <A/>
+        </div>
+    );
+};
+
+export default App;
diff --git a/12-前端框架/03-React/react18/13-memo/components/A.js b/12-前端框架/03-React/react18/13-memo/components/A.js
@@ -0,0 +1,23 @@
+import React, {useState} from 'react';
+import B from "./B";
+
+const A = () => {
+    console.log('A渲染');
+
+    const [count, setCount] = useState(1);
+    const clickHandler = () => {
+        setCount(prevState => prevState + 1);
+    };
+
+    const test = count % 4 === 0;
+
+    return (
+        <div>
+            <h2>组件A - {count}</h2>
+            <button onClick={clickHandler}>%4触发B渲染</button>
+            <B test={test}/>
+        </div>
+    );
+};
+
+export default React.memo(A);
diff --git a/12-前端框架/03-React/react18/13-memo/components/B.js b/12-前端框架/03-React/react18/13-memo/components/B.js
@@ -0,0 +1,14 @@
+import React from 'react';
+
+const B = (props) => {
+    console.log('B渲染');
+
+    return (
+        <div>
+            <h2>组件B</h2>
+            <p>{props.test && 'test'}</p>
+        </div>
+    );
+};
+
+export default React.memo(B);
diff --git a/12-前端框架/03-React/react18/13-memo/index.js b/12-前端框架/03-React/react18/13-memo/index.js
@@ -0,0 +1,5 @@
+import ReactDOM from 'react-dom/client';
+import App from "./App";
+
+const root = ReactDOM.createRoot(document.getElementById('root'));
+root.render(<App/>);

Original file line number	Diff line number	Diff line change
`@@ -1,4 +1,3 @@`
`1`		`-import React from 'react';`
`2`	`1`	`import ReactDOM from 'react-dom/client';`
`3`	`2`	`import App from "./App";`
`4`	`3`