用初学者的视角来探索 React Hooks 的必备知识和常见坑

2023-12-06 02:21:48

作为一名刚工作的校招萌新，一个 00 后，一个常年用 Vue2 的，一个 Vue3 萌新，一个 React 小白。本文将从一个初学者的角度，介绍使用 React Hooks 必备的知识点和常见的“坑”。

函数式组件

函数式组件是 React Hooks 的基础，它是一种通过函数来定义的组件。函数式组件不包含任何状态，也不包含任何生命周期方法。因此，函数式组件的代码通常很简洁，易于理解和维护。

const MyComponent = () => {
  return <div>Hello world!</div>;
};

状态是 React 组件中存储的数据，它可以随着时间的推移而变化。状态管理是 React 中一个重要的概念，它决定了组件如何响应用户的交互和数据的变化。

React Hooks 提供了多种状态管理方法，最常用的两个是 useState 和 useContext。

useState 用于管理组件内部的状态，它接受一个初始值，并返回一个数组，数组的第一个元素是当前状态，数组的第二个元素是一个函数，用于更新状态。

const [count, setCount] = useState(0);

useContext 用于管理组件外部的状态，它接受一个 Context 对象，并返回该 Context 对象的当前值。

const count = useContext(CountContext);

useEffect 钩子用于在组件挂载、更新和卸载时执行某些副作用。副作用是指那些不属于组件渲染过程的代码，比如对 DOM 的操作、网络请求等。

useEffect(() => {
  document.title = `Count: ${count}`;
}, [count]);

useState 钩子用于管理组件内部的状态，它接受一个初始值，并返回一个数组，数组的第一个元素是当前状态，数组的第二个元素是一个函数，用于更新状态。

const [count, setCount] = useState(0);

useContext 钩子用于管理组件外部的状态，它接受一个 Context 对象，并返回该 Context 对象的当前值。

const count = useContext(CountContext);

useRef 钩子用于创建可变的引用对象，它接受一个初始值，并返回一个对象，对象的 current 属性指向当前值。

const ref = useRef(null);

useCallback 钩子用于创建缓存的回调函数，它接受一个函数和一个依赖项数组，并返回一个缓存的回调函数，该回调函数只会在依赖项发生变化时更新。

const handleClick = useCallback(() => {
  setCount(count + 1);
}, [count]);

useMemo 钩子用于创建缓存的计算结果，它接受一个函数和一个依赖项数组，并返回该函数的计算结果，该计算结果只会在依赖项发生变化时更新。

const memoizedValue = useMemo(() => {
  return computeExpensiveValue(props);
}, [props]);

在使用 React Hooks 时，需要注意一些常见的“坑”。

不要在 useEffect 中更新状态 。这会导致无限循环，因为 useEffect 会在状态更新后重新运行。
不要在函数式组件中使用生命周期方法 。函数式组件没有生命周期方法，因此无法使用 componentDidMount、componentDidUpdate 和 componentWillUnmount 等方法。
**不要在函数式组件中使用 this ** 。函数式组件没有 this 关键字，因此无法使用 this.props 和 this.state 等属性。