upd: react

victorsun · victorsun · commit e50589c614ed · 2023-02-26T23:20:09.000+08:00
diff --git a/12-前端框架/03-React/react18/00-start/01-三个核心api.html b/12-前端框架/03-React/react18/00-start/01-三个核心api.html
diff --git a/12-前端框架/03-React/react18/00-start/02-JSX.html b/12-前端框架/03-React/react18/00-start/02-JSX.html
diff --git a/12-前端框架/03-React/react18/00-start/03-create-react-app.html b/12-前端框架/03-React/react18/00-start/03-create-react-app.html
diff --git a/12-前端框架/03-React/react18/00-start/script/babel.min.js b/12-前端框架/03-React/react18/00-start/script/babel.min.js
diff --git a/12-前端框架/03-React/react18/00-start/script/react-dom.development.js b/12-前端框架/03-React/react18/00-start/script/react-dom.development.js
diff --git a/12-前端框架/03-React/react18/00-start/script/react.development.js b/12-前端框架/03-React/react18/00-start/script/react.development.js
diff --git a/12-前端框架/03-React/react18/01-函数组件和类组件/App1.js b/12-前端框架/03-React/react18/01-函数组件和类组件/App1.js
@@ -0,0 +1,5 @@
+const App = () => {
+  return <h1>函数组件</h1>
+};
+
+export default App;
diff --git a/12-前端框架/03-React/react18/01-函数组件和类组件/App2.js b/12-前端框架/03-React/react18/01-函数组件和类组件/App2.js
@@ -0,0 +1,39 @@
+import React from "react";
+
+class App extends React.Component {
+
+  // ...类组件使用 this 获取各类属性方法
+
+  // 创建属性存储DOM对象
+  divRef = React.createRef();
+
+  // 向state中添加属性
+  state = {
+    count: 0,
+  };
+
+  clickHandler = () => {
+    // 【1】
+    // this.setState({count: 1});
+
+    // 【2】
+    this.setState(prevState => {
+      return {
+        count: prevState.count + 1
+      }
+    });
+  };
+
+  // 必须包含 render 方法，返回虚拟 DOM
+  render() {
+    return (
+      <div ref={this.divRef}>
+        <h1>类组件{this.props.item}</h1>
+        <span>{this.state.count}</span>
+        <button onClick={this.clickHandler}>click</button>
+      </div>
+    );
+  }
+}
+
+export default App;
diff --git a/12-前端框架/03-React/react18/01-函数组件和类组件/index.js b/12-前端框架/03-React/react18/01-函数组件和类组件/index.js
@@ -0,0 +1,10 @@
+import ReactDOM from "react-dom/client";
+import App1 from "./App1"; // 函数组件
+import App2 from "./App2"; // 类组件
+
+const root = ReactDOM.createRoot(document.getElementById('root'));
+
+const propDatas = [1, 2, 3];
+const app2 = propDatas.map(item => <App2 item={item} />);
+
+root.render(<div><App1/>{app2}</div>);
diff --git a/12-前端框架/03-React/react18/02-event/App.js b/12-前端框架/03-React/react18/02-event/App.js
@@ -0,0 +1,46 @@
+const App = () => {
+
+    /*
+        原生DOM操作
+
+        <button onclick="alert('test')">click</button>
+        <button id="test">click</button>
+        document.getElementById('test').onclick = function(){};
+        document.getElementById('test').addEventListener('click', function(){}, false);
+     */
+
+    /*
+        React中事件通过元素属性设置
+
+        和原生JS不同，React中事件的属性需要使用驼峰命名法：
+           onclick -> onClick
+           onchange -> onChange
+
+        属性值不能直接执行代码，而是需要一个回调函数：
+           onclick="alert('test')"
+           onClick={()=>{alert('test')}}
+     */
+
+    const clickHandler = (event) => {
+
+        // return false; // 在React中，无法通过return false取消默认行为，原生也不推荐这样用
+        event.preventDefault(); // 取消默认行为
+        event.stopPropagation(); // 取消事件的冒泡
+
+        // 注意：React中的事件对象 event 不是原生的事件对象，因此无需再考虑兼容问题
+    };
+
+
+    return <div
+        {/* 事件的集中绑定方式 */}
+        style={{width: 200, height: 200, margin: '100px auto', backgroundColor:'#aaa'}}>
+
+        <button onClick={() => { alert('test'); }}>click</button>
+        <a href="https://csxiaoyao.com" onClick={clickHandler}>取消默认跳转行为</a>
+    </div>
+};
+
+
+
+// 导出App
+export default App;
diff --git a/12-前端框架/03-React/react18/02-event/index.js b/12-前端框架/03-React/react18/02-event/index.js
@@ -0,0 +1,6 @@
+import ReactDOM from "react-dom/client";
+import App from "./App";
+
+const root = ReactDOM.createRoot(document.getElementById('root'));
+
+root.render(<App/>);
diff --git a/12-前端框架/03-React/react18/03-props/App.js b/12-前端框架/03-React/react18/03-props/App.js
@@ -0,0 +1,10 @@
+// 类组件写法参考《函数组件和类组件》
+// props.children 用于获取元素体，参考《portal》
+const App = (props) => {
+  // 注意class的处理
+  return (
+      <div className={`item ${props.className}`}>{props.item}</div>
+  );
+};
+
+export default App;
diff --git a/12-前端框架/03-React/react18/03-props/index.js b/12-前端框架/03-React/react18/03-props/index.js
@@ -0,0 +1,6 @@
+import ReactDOM from "react-dom/client";
+import App from "./App";
+
+const root = ReactDOM.createRoot(document.getElementById('root'));
+const data = 1;
+root.render(<App item={data} className="content" />);
diff --git a/12-前端框架/03-React/react18/04-state/App.js b/12-前端框架/03-React/react18/04-state/App.js
@@ -0,0 +1,43 @@
+import {useState} from "react";
+
+const App = () => {
+
+  // 类组件写法参考《函数组件和类组件》
+
+  // [初始值, 修改函数]
+  const [counter, setCounter] = useState(1);
+  const [user, setUser] = useState({ name: 'csxiaoyao', age: 30 });
+
+  const addHandler = () => {
+    // 直接给 counter 赋值不会触发重新渲染
+    // counter += 1;
+
+    // !!! [默认setState是异步的] !!!
+    setCounter(counter + 1);
+
+    // !!! [同步写法] !!!
+    setCounter((prevCounter)=>{
+      return prevCounter + 1;
+    });
+  };
+
+  // 对象的修改
+  const updateUserHandler = () => {
+    // 浅复制
+    /*
+    const newUser = Object.assign({}, user);
+    newUser.name = 'sunshine';
+    setUser(newUser);
+    */
+    setUser({...user, name: 'sunshine'});
+  };
+
+
+  return <div className={'app'}>
+    <h1>{counter}</h1>
+    <button onClick={addHandler}>+</button>
+    <button onClick={updateUserHandler}>change</button>
+  </div>;
+};
+
+export default App;
diff --git a/12-前端框架/03-React/react18/04-state/index.js b/12-前端框架/03-React/react18/04-state/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/>);
diff --git a/12-前端框架/03-React/react18/05-ref/App.js b/12-前端框架/03-React/react18/05-ref/App.js
@@ -0,0 +1,28 @@
+import {useRef} from "react";
+
+const App = () => {
+  /*
+    使用 react 获取原生 DOM 对象
+      1. 使用 useRef() 钩子函数创建一个存储DOM对象的容器（只能用于函数组件或自定义钩子）
+        useRef 返回一个普通的JS对象
+        {current:undefined}
+        尽量不要直接创建一个对象替代 useRef，因为自己创建的对象每次渲染都会创建一个新对象，而useRef创建的对象每次渲染获得的是同一个对象
+
+      2. 将容器设置为目标DOM对象元素的ref属性，react会自动将当前元素的DOM对象，设置为容器current属性
+        <h1 ref={xxx}>...</h1>
+
+      3. 类组件写法参考《函数组件和类组件》
+   */
+  const h1Ref = useRef(); // 创建一个容器，h1Ref={current:null}
+
+  const clickHandler = () => {
+    h1Ref.current.innerText = 'changed';
+  };
+
+  return <div className={'app'}>
+    <h1 id="header" ref={h1Ref}>origin</h1>
+    <button onClick={clickHandler}>change</button>
+  </div>;
+};
+
+export default App;
diff --git a/12-前端框架/03-React/react18/05-ref/index.js b/12-前端框架/03-React/react18/05-ref/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/>);
diff --git a/12-前端框架/03-React/react18/06-表单处理/App.js b/12-前端框架/03-React/react18/06-表单处理/App.js
@@ -0,0 +1,44 @@
+import React, {useState} from 'react';
+
+const App = () => {
+    // 存储表单中的数据
+    const [formData, setFormData] = useState({
+      inputDesc:'',
+    });
+
+    // 监听内容变化
+    const descChangeHandler = (e) => {
+      setFormData({
+        ...formData,
+        inputDesc: e.target.value
+      });
+    };
+
+    const formSubmitHandler = (e) => {
+      // 取消表单的默认提交行为
+      e.preventDefault();
+
+      console.log(formData);
+
+      setFormData({
+        inputDesc: '',
+      });
+    };
+
+  return (
+    <form onSubmit={formSubmitHandler}>
+      <div className="form-item">
+          {
+            /* htmlFor 聚焦 */
+          }
+          <label htmlFor="desc">内容</label>
+          <input onChange={descChangeHandler} value={formData.inputDesc} id="desc" type="text"/>
+      </div>
+      <div className="form-btn">
+          <button>submit</button>
+      </div>
+    </form>
+  );
+};
+
+export default App;
diff --git a/12-前端框架/03-React/react18/06-表单处理/index.js b/12-前端框架/03-React/react18/06-表单处理/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/>);
diff --git a/12-前端框架/03-React/react18/07-portal/App.js b/12-前端框架/03-React/react18/07-portal/App.js
@@ -0,0 +1,12 @@
+import React from 'react';
+import Backdrop from "./Backdrop";
+
+const App = () => {
+  return (
+    <Backdrop>
+      <div>portal</div>
+    </Backdrop>
+  );
+};
+
+export default App;
diff --git a/12-前端框架/03-React/react18/07-portal/Backdrop.js b/12-前端框架/03-React/react18/07-portal/Backdrop.js
@@ -0,0 +1,12 @@
+import ReactDOM from "react-dom";
+
+const backdropRoot = document.getElementById('backdrop-root');
+
+const Backdrop = (props) => {
+  // props.children 用于获取元素体
+  return ReactDOM.createPortal(<div className="backdrop">
+    {props.children}
+  </div>, backdropRoot);
+};
+
+export default Backdrop;
diff --git a/12-前端框架/03-React/react18/07-portal/index.html b/12-前端框架/03-React/react18/07-portal/index.html
@@ -0,0 +1,14 @@
+<!DOCTYPE html>
+<html lang="zh">
+<head>
+    <meta charset="UTF-8">
+    <title>react</title>
+</head>
+<body>
+<div id="root"></div>
+
+<!--用来渲染遮罩层-->
+<div id="backdrop-root"></div>
+
+</body>
+</html>
diff --git a/12-前端框架/03-React/react18/07-portal/index.js b/12-前端框架/03-React/react18/07-portal/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/>);
diff --git a/12-前端框架/03-React/react18/08-css/App.js b/12-前端框架/03-React/react18/08-css/App.js
@@ -0,0 +1,12 @@
+import React from 'react';
+import Backdrop from "./Backdrop";
+
+const App = () => {
+  return (
+    <Backdrop>
+      <div>portal</div>
+    </Backdrop>
+  );
+};
+
+export default App;
diff --git a/12-前端框架/03-React/react18/08-css/index.css b/12-前端框架/03-React/react18/08-css/index.css
@@ -0,0 +1,8 @@
+* {
+  margin: 0;
+  padding: 0;
+}
+
+.global-style {
+  border: 2px solid red;
+}
diff --git a/12-前端框架/03-React/react18/08-css/index.js b/12-前端框架/03-React/react18/08-css/index.js
@@ -0,0 +1,25 @@
+import ReactDOM from "react-dom/client";
+
+// [1] 外部样式表
+import './index.css';
+// [3] 推荐：CSS Module
+import style from './index.module.css'
+
+const StyleDemo = () => {
+
+  const useBorder = true;
+
+  // [2] 内联样式
+  const innerStyle = {
+    border: useBorder ? '1px solid blue' : 'none',
+  };
+  
+  return (
+    <div className={`demo ${useBorder?' global-style':''}`} style={useBorder ? innerStyle : ''}>
+      <div className={style.moduleStyle} style={{color:'red', backgroundColor:'#aaa', fontSize:20, borderRadius:12}}>demo</div>
+    </div>
+  );
+};
+
+const root = ReactDOM.createRoot(document.getElementById('root'));
+root.render(<StyleDemo/>);
diff --git a/12-前端框架/03-React/react18/08-css/index.module.css b/12-前端框架/03-React/react18/08-css/index.module.css
@@ -0,0 +1,8 @@
+* {
+  margin: 0;
+  padding: 0;
+}
+
+.moduleStyle {
+  border: 2px solid yellow;
+}
diff --git a/12-前端框架/03-React/react18/09-fragment/index.js b/12-前端框架/03-React/react18/09-fragment/index.js
@@ -0,0 +1,13 @@
+import ReactDOM from "react-dom/client";
+import { Fragment } from "react";
+
+const Demo = () => {
+  return (
+    <Fragment>
+      <div>fragment不渲染外层  <>也可以这么处理</></div>
+    </Fragment>
+  );
+};
+
+const root = ReactDOM.createRoot(document.getElementById('root'));
+root.render(<Demo/>);
diff --git a/12-前端框架/03-React/react18/10-effect&StrictMode/App.js b/12-前端框架/03-React/react18/10-effect&StrictMode/App.js
diff --git a/12-前端框架/03-React/react18/10-effect&StrictMode/index.js b/12-前端框架/03-React/react18/10-effect&StrictMode/index.js
