From 76bc77cb65a9a00bba1c83fab005cc637711f39e Mon Sep 17 00:00:00 2001
From: ellis <sunhongfei@sensorsdata.cn>
Date: Sun, 21 May 2023 16:56:15 +0800
Subject: [PATCH] =?UTF-8?q?chore:=20node=20commonjs=20=E7=9A=84=E5=AF=BC?=
 =?UTF-8?q?=E5=85=A5=E5=92=8C=E5=AF=BC=E5=87=BA?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 node/commonjs.md                              | 89 +++++++++++++++++++
 ...72\347\241\200\347\237\245\350\257\206.md" | 17 +++-
 2 files changed, 105 insertions(+), 1 deletion(-)
 create mode 100644 node/commonjs.md

diff --git a/node/commonjs.md b/node/commonjs.md
new file mode 100644
index 0000000..6f7f0d6
--- /dev/null
+++ b/node/commonjs.md
@@ -0,0 +1,89 @@
+## exports 是 module.exports 的引用。
+
+重新给 exports 赋值，会导致 exports 将不再是 module.exports 的引用。
+
+> exports 的有效用法：
+
+```js
+// 示例1： ✅
+exports.fn = function() {}
+
+// 示例2： ❎
+// exports 不再是 module.exports 的引用。无法真正导出任何内容。
+exports = {
+  fn: function() {}
+}
+
+// ✅
+// 如果想用示例2，给 exports 赋值后，需要再把exports 赋值给 module.exports
+module.exports = exports = {
+  fn: function() {}
+}
+```
+
+**推荐以下写法：**
+
+```js
+// 写法1
+exports.fn1 = function() {}
+exports.fn2 = function(){}
+exports.obj = {}
+//  这个时候就不能 module.exports = something; 因为这样会覆盖 exports。导致只导出了 something, 但是可以 module.exports = exports;
+
+
+// 写法2
+module.exports = function() {};
+module.exports.otherOjb = {};
+module.exports.otherFn = function() {};
+
+// 写法3
+module.exports = exports = {
+  fn: function() {}
+  obj: {}
+	//...
+}
+```
+
+
+
+
+
+## 被 module.exports 导出后，如何使用
+
+./child.js
+
+```js
+module.exports = function() {
+  return 'hello world';
+}
+
+module.exports.subFn = function() {
+	return '我是 subFn';
+}
+```
+
+./parent.js
+
+```js
+// require 进来的就是 module.exports 导出的。
+const fn = reuqire('./child.js')
+
+fn(); // 'hello world'
+
+fn.subFn(); // '我是 subFn'
+```
+
+
+
+总之，exports 不是很安全的，尽量使用 module.exports 导出模块内容。
+
+```js
+// balabala ....
+
+module.exports = {
+  // balabala...
+}
+```
+
+
+
diff --git "a/\345\211\215\347\253\257\351\235\242\350\257\225\347\254\224\350\256\260/React \345\237\272\347\241\200\347\237\245\350\257\206.md" "b/\345\211\215\347\253\257\351\235\242\350\257\225\347\254\224\350\256\260/React \345\237\272\347\241\200\347\237\245\350\257\206.md"
index 3af3b70..016fda5 100644
--- "a/\345\211\215\347\253\257\351\235\242\350\257\225\347\254\224\350\256\260/React \345\237\272\347\241\200\347\237\245\350\257\206.md"	
+++ "b/\345\211\215\347\253\257\351\235\242\350\257\225\347\254\224\350\256\260/React \345\237\272\347\241\200\347\237\245\350\257\206.md"	
@@ -61,7 +61,7 @@ React 17 开始，事件不再绑定在 document 上。
   * DOM 事件，setTimeout：异步更新，合并 state
   * Automatic Batching 自动批处理
 
-# 组件生命周期
+# 组件生命周期 
 
 https://projects.wojtekmaj.pl/react-lifecycle-methods-diagram/
 
@@ -120,3 +120,18 @@ https://projects.wojtekmaj.pl/react-lifecycle-methods-diagram/
 
 
 
+
+
+## React 组件声明周期分三个阶段
+
+### 挂载阶段：
+
+constructor => getDerivedStateFromProps => render => 【更新DOM和refs】  => componentDidMount
+
+### 更新阶段：
+
+【props | state | forceUpdate】 => getDerivedFromProps => shouldComponentUpdate => render => getSnapshotBeforeUpdate  => 【更新dom和refs】 => componentDidUpdate
+
+### 卸载阶段：
+
+componentWillUnmount
-- 
Gitee