React 18 最佳实践

在组件外部声明 CSS

不要在其他组件中声明组件

让子组件决定是否应该渲染

使用 useCallback 和 useMemo

使用 useCallback 防止函数重新创建
使用 useCallback 防止依赖项更改
使用 useCallback 防止 useEffect 触发
不要将外部函数包装在 useCallback 中
不要将 useMemo 与空依赖数组一起使用

useEffect 相关

当不需要依赖项时，向 useEffect 添加空依赖项
始终将所有依赖项添加到 useEffect 和其他 React Hooks

hooks

不要在 If 语句中使用 Hook
return 后不使用 Hook

当组件不应重新渲染时，使用 useRef 而不是 useState

可以通过用 useRef 替换 useState 来优化组件渲染。来看下面的例子：

import { useEffect } from "react";
 
const Component = () => {
	const [triggered, setTriggered] = useState(false);
 
	useEffect(() => {
		if (!triggered) {
			setTriggered(true);
			// …
		}
	}, [triggered]);
};

当运行上面的代码时，组件将在调用 setTriggered 时重新渲染。在这种情况下，触发状态变量可能是确保 effect 仅运行一次的一种方法。

由于在这种情况下触发变量的唯一用途是跟踪函数是否已被触发，因此不需要组件渲染任何新状态。因此，可以将 useState 替换为 useRef，这样更新时就不会触发组件重新渲染。

import { useRef } from "react";
 
const Component = () => {
	const triggeredRef = useRef(false);
 
	useEffect(() => {
		if (!triggeredRef.current) {
			triggeredRef.current = true;
 
			// …
		}
	}, []);
};

当使用 useRef 时，React 将在组件卸载并再次安装时重置其值。在这种情况下，就可以要使用 useRef。

🪴 小胖的数字花园

探索