加入react事件Demo

Author: fishedee

react/event/.editorconfig

@@ -0,0 +1,16 @@
+# http://editorconfig.org
+root = true
+
+[*]
+indent_style = space
+indent_size = 2
+end_of_line = lf
+charset = utf-8
+trim_trailing_whitespace = true
+insert_final_newline = true
+
+[*.md]
+trim_trailing_whitespace = false
+
+[Makefile]
+indent_style = tab

react/event/.gitignore

@@ -0,0 +1,20 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/npm-debug.log*
+/yarn-error.log
+/yarn.lock
+/package-lock.json
+
+# production
+/dist
+
+# misc
+.DS_Store
+
+# umi
+/src/.umi
+/src/.umi-production
+/src/.umi-test
+/.env.local

react/event/.prettierignore

@@ -0,0 +1,8 @@
+**/*.md
+**/*.svg
+**/*.ejs
+**/*.html
+package.json
+.umi
+.umi-production
+.umi-test

react/event/.prettierrc

@@ -0,0 +1,11 @@
+{
+  "singleQuote": true,
+  "trailingComma": "all",
+  "printWidth": 80,
+  "overrides": [
+    {
+      "files": ".prettierrc",
+      "options": { "parser": "json" }
+    }
+  ]
+}

react/event/.umirc.ts

@@ -0,0 +1,11 @@
+import { defineConfig } from 'umi';
+
+export default defineConfig({
+  nodeModulesTransform: {
+    type: 'none',
+  },
+  history: {
+    type: 'hash',
+  },
+  fastRefresh: {},
+});

react/event/README.md

@@ -0,0 +1,15 @@
+# umi project
+
+## Getting Started
+
+Install dependencies,
+
+```bash
+$ yarn
+```
+
+Start the dev server,
+
+```bash
+$ yarn start
+```

react/event/mock/.gitkeep

@@ -0,0 +1,38 @@
+{
+  "private": true,
+  "scripts": {
+    "start": "umi dev",
+    "build": "umi build",
+    "postinstall": "umi generate tmp",
+    "prettier": "prettier --write '**/*.{js,jsx,tsx,ts,less,md,json}'",
+    "test": "umi-test",
+    "test:coverage": "umi-test --coverage"
+  },
+  "gitHooks": {
+    "pre-commit": "lint-staged"
+  },
+  "lint-staged": {
+    "*.{js,jsx,less,md,json}": [
+      "prettier --write"
+    ],
+    "*.ts?(x)": [
+      "prettier --parser=typescript --write"
+    ]
+  },
+  "dependencies": {
+    "@ant-design/pro-layout": "^6.5.0",
+    "react": "17.x",
+    "react-dom": "17.x",
+    "umi": "^3.5.36"
+  },
+  "devDependencies": {
+    "@types/react": "^17.0.0",
+    "@types/react-dom": "^17.0.0",
+    "@umijs/preset-react": "1.x",
+    "@umijs/test": "^3.5.36",
+    "lint-staged": "^10.0.7",
+    "prettier": "^2.2.0",
+    "typescript": "^4.1.2",
+    "yorkie": "^2.0.0"
+  }
+}

react/event/package.json

@@ -0,0 +1,51 @@
+import React, { useEffect } from 'react';
+
+const App:React.FC<any> = (props)=>{
+    useEffect(()=>{
+        //React事件有两步
+     	//原生事件冒泡，从底层一起触发到document的冒泡
+     	//合成事件冒泡，React创建的事件，从React底层组件到React顶层组件的冒泡。合成事件绑定是通过隐式绑定document的原生事件来实现的。
+     	//所以，事件的方式是底层原生事件->document第一次隐式绑定事件（合成事件冒泡）->document第二次显式绑定的事件
+     	/*
+     	合成事件的意义在抹平不同浏览器上的事件差异，而且避免在列表的每个DOM上都挂载一个事件，造成灾难
+     	*/
+        const documentClick = ()=>{
+            console.log('document click');
+        }
+        const divClick = ()=>{
+            console.log('原生outClick');
+        }
+        document.addEventListener('click', documentClick);
+        document.getElementById('div1')?.addEventListener('click',divClick);
+        return ()=>{
+            document.removeEventListener('click',documentClick);
+            document.getElementById('div1')?.removeEventListener('click',divClick);
+        }
+    },[]);
+
+    const outerClick = ()=>{
+        console.log('outerClick');
+    }
+
+    const innerClick = ()=>{
+        console.log('innerClick');
+    }
+    //http://www.qiutianaimeili.com/html/page/2020/04/2020426gbkc8mhwpfi.html
+    /*
+    因此我们点击inner的div的时候，输出是：
+    原生outClick
+    innerClick
+    outerClick
+    document click
+    */
+    return(
+        <div id="div1" onClick={outerClick}>
+            this is outer
+            <div onClick={innerClick}>
+                this is inner
+            </div>
+        </div>
+    )
+}
+
+export default App;

react/event/src/pages/bubble/basic.tsx

@@ -0,0 +1,49 @@
+import React, { useEffect ,MouseEvent} from 'react';
+
+const App:React.FC<any> = (props)=>{
+    useEffect(()=>{
+        const documentClick = ()=>{
+            console.log('document click');
+        }
+        const divClick = ()=>{
+            console.log('原生outClick');
+        }
+        document.addEventListener('click', documentClick);
+        document.getElementById('div1')?.addEventListener('click',divClick);
+        return ()=>{
+            document.removeEventListener('click',documentClick);
+            document.getElementById('div1')?.removeEventListener('click',divClick);
+        }
+    },[]);
+
+    const outerClick = ()=>{
+        console.log('outerClick');
+    }
+
+    const innerClick = (e:MouseEvent<HTMLDivElement>)=>{
+        console.log('innerClick');
+        //这个方法只能阻止合成事件，不能阻止原生事件
+        e.stopPropagation();
+        //这个方法能阻止原生事件，但只能阻止document上的原生事件，不能触发原始click
+        e.nativeEvent.stopImmediatePropagation();
+    }
+    //http://www.qiutianaimeili.com/html/page/2020/04/2020426gbkc8mhwpfi.html
+    /*
+    因此我们点击inner的div的时候，输出是：
+    原生outClick
+    innerClick
+    document click
+    这个时候，少了outerClick这个合成事件的触发，以及少了document上的原生事件
+    但是！！，不会少了div1上的原生事件触发，这是因为合成事件是在document上的原生事件上实现的。合成事件是div的原生事件冒泡上来后的产物，不可能在停止冒泡后，能回滚之前的事件输出	
+    */
+    return(
+        <div id="div1" onClick={outerClick}>
+            this is outer
+            <div onClick={innerClick}>
+                this is inner
+            </div>
+        </div>
+    )
+}
+
+export default App;