feat: 2022.08.23

pingan8787 · pingan8787 · commit 65ad4249bf9e · 2022-08-23T22:42:26.000+08:00
diff --git a/Cute-Vue/Blog/11 个需要避免的 React 错误用法.md b/Cute-Vue/Blog/11 个需要避免的 React 错误用法.md
@@ -216,11 +216,11 @@ useEffect(() => {
 
 ### 问题描述
 
-我们在类组件中，经常使用 `componentDidMount()` 生命周期方法去清理一些副作用，比如定时器、事件监听等。
+我们在类组件中，经常使用 `componentWillUnmount()` 生命周期方法去清理一些副作用，比如定时器、事件监听等。
 
 ### 解决方法
 
-可以为 `useEffect()`的副作用函数设置返回函数，该函数类似 `componentDidMount()` 生命周期方法的作用：
+可以为 `useEffect()`的副作用函数设置返回函数，该函数类似 `componentWillUnmount()` 生命周期方法的作用：
 
 ```jsx
 useEffect(() => {
@@ -229,6 +229,21 @@ useEffect(() => {
 }, [name, age]);
 ```
 
+另外，当需要实现`componentWillUnmount` 生命周期函数的效果时，可以在 `useEffect()`函数返回一个函数即可，该函数会在组件卸载时执行：
+
+```jsx
+export default function App() {
+  const [count, setCount] = useState(0);
+  useEffect(() => {
+    setCount(count + 1);
+    return () => {
+      console.log("[组件已卸载]");
+    };
+  }, []);
+  return <div className="App">{count}</div>;
+}
+```
+
 ### 文档介绍
 
 [React - Example Using Hooks](https://reactjs.org/docs/hooks-effect.html#example-using-hooks-1)
diff --git a/Cute-Vue/Blog/Top 11 Mistakes to Avoid When Using React In 2022.md b/Cute-Vue/Blog/Top 11 Mistakes to Avoid When Using React In 2022.md
@@ -42,6 +42,8 @@ const listItems = numbers.map((number, index) => <li key={index}>{number}</li>);
 
 `key` helps React identify which elements have changed, such as been added or removed. So we need to set a unique `key` value for each element in the array.
 
+For the value of `key`, it is best to set it to a unique value. In the above example, `index` is used as the value of `key`. Officially, it is not recommended. The order of the list will change, and there is no unique value or a last resort. In this case, performance will be degraded.
+
 ### Documentation
 
 [React - Basic List Component](https://reactjs.org/docs/lists-and-keys.html#basic-list-component)
@@ -217,11 +219,11 @@ useEffect(() => {
 
 ### Problem
 
-In class components, we use the `componentDidMount()` lifecycle method to clean up some side effects, such as timers, event listeners, etc.
+In class components, we use the `componentWillUnmount()` lifecycle method to clean up some side effects, such as timers, event listeners, etc.
 
 ### Solutions
 
-A return function can be set for the side effect function of `useEffect()`, which is similar to the role of the `componentDidMount()` lifecycle method:
+A return function can be set for the side effect function of `useEffect()`, which is similar to the role of the `componentWillUnmount()` lifecycle method:
 
 ```jsx
 useEffect(() => {
diff --git a/Cute-Vue/Blog/[My Notes]15 Useful Custom React Hooks for Your Next Web App.md b/Cute-Vue/Blog/[My Notes]15 Useful Custom React Hooks for Your Next Web App.md
