每个开发人员都必须知道的基本 React 技巧

React 非常强大，但掌握它意味着超越基础知识并学习一些鲜为人知的技巧来简化开发。以下是我个人最喜欢的 20 个 React 技巧的概述，它们可以提高您的工作效率并帮助您编写更干净、更有效的代码。让我们直接进入示例！

---

1. 条件渲染的短路评估

通过短路评估避免使用冗长的 if 语句进行条件渲染。

{isLoading && <Spinner />}

这将呈现 >仅当 isLoading 为 true 时，保持 JSX 干净。

---

2. 带有类名库的动态类名

类名库可以轻松有条件地应用类。

npm install classnames

import classNames from 'classnames';

const buttonClass = classNames({
  'btn': true,
  'btn-primary': isPrimary,
  'btn-secondary': !isPrimary,
});

<button className={buttonClass}>Click Me</button>

---

3. 使用 useMemo 记住昂贵的计算

如果计算成本很高，请将其存储起来，这样 React 就不会进行不必要的重新计算。

const sortedData = useMemo(() => data.sort(), [data]);

仅当数据更改时才重新计算排序数据。

---

4. 使用 useEffect 对输入进行去抖

通过消除输入更改的抖动来避免不断的重新渲染。

const [value, setValue] = useState('');
const [debouncedValue, setDebouncedValue] = useState('');

useEffect(() => {
  const handler = setTimeout(() => setDebouncedValue(value), 500);
  return () => clearTimeout(handler);
}, [value]);

<input value={value} onChange={(e) => setValue(e.target.value)} />

---

5. 可重用逻辑的自定义挂钩

将逻辑封装在自定义挂钩中以跨组件重用它。

function useFetch(url) {
  const [data, setData] = useState(null);

  useEffect(() => {
    fetch(url).then(res => res.json()).then(setData);
  }, [url]);

  return data;
}

const Component = () => {
  const data = useFetch('/api/data');
  return <div>{data ? JSON.stringify(data) : 'Loading...'}</div>;
};

---

6. 使用 React.lazy 延迟加载组件

通过拆分组件来优化加载时间。

const LazyComponent = React.lazy(() => import('./LazyComponent'));

function App() {
  return (
    <React.Suspense fallback={<div>Loading...</div>}>
      <LazyComponent />
    </React.Suspense>
  );
}

---

7. 使用 useRef 访问之前的 Props 或 State

要访问以前的状态值，请使用 useRef。

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

useEffect(() => {
  prevCount.current = count;
}, [count]);

console.log(`Previous: ${prevCount.current}, Current: ${count}`);

---

8. 通过将函数传递给 useCallback 来避免重新渲染

如果某个函数不需要更改，请使用 useCallback 来记忆它。

const increment = useCallback(() => setCount(count + 1), [count]);

---

9. 解构道具以实现更简洁的代码

在函数参数中解构 props。

const User = ({ name, age }) => (
  <div>{name} is {age} years old</div>
);

---

10. React.Fragment 用于在没有额外 Div 的情况下对元素进行分组

包裹元素而不添加额外的 DOM 节点。

<>
  <p>Paragraph 1</p>
  <p>Paragraph 2</p>
</>

---

11. 捕获 JavaScript 错误的错误边界

捕获子组件中的错误以防止整个应用程序崩溃。

class ErrorBoundary extends React.Component {
  state = { hasError: false };

  static getDerivedStateFromError() {
    return { hasError: true };
  }

  render() {
    if (this.state.hasError) return <h1>Something went wrong.</h1>;
    return this.props.children;
  }
}

Jagroop2001 (Jagroop) · GitHub

?‍?全栈开发人员 | ？机器学习开发人员 | ？开发关系专业版 – ？可供租用 - Jagroop2001

github.com

12. 使用 PropTypes 进行 Prop 验证

通过定义 prop 类型尽早发现错误。

{isLoading && <Spinner />}

---

13. 使用 useReducer 的状态减速器

对于复杂的状态逻辑，useReducer 可以更加高效。

npm install classnames

---

14. useLayoutEffect 进行 DOM 操作

在 DOM 更新之后、绘制之前运行效果。

import classNames from 'classnames';

const buttonClass = classNames({
  'btn': true,
  'btn-primary': isPrimary,
  'btn-secondary': !isPrimary,
});

<button className={buttonClass}>Click Me</button>

---

15. 用 Context 和 useContext 封装状态逻辑

无需道具钻探即可创建全局状态。

const sortedData = useMemo(() => data.sort(), [data]);

---

16. 避免在 JSX 中定义内联函数

内联定义函数会导致重新渲染。相反，在外部定义它们。

const [value, setValue] = useState('');
const [debouncedValue, setDebouncedValue] = useState('');

useEffect(() => {
  const handler = setTimeout(() => setDebouncedValue(value), 500);
  return () => clearTimeout(handler);
}, [value]);

<input value={value} onChange={(e) => setValue(e.target.value)} />

---

17. 在 JSX 中使用可选链来实现安全的属性访问

优雅地处理 null 或未定义的值。

function useFetch(url) {
  const [data, setData] = useState(null);

  useEffect(() => {
    fetch(url).then(res => res.json()).then(setData);
  }, [url]);

  return data;
}

const Component = () => {
  const data = useFetch('/api/data');
  return <div>{data ? JSON.stringify(data) : 'Loading...'}</div>;
};

---

18. 使用 key 属性避免重新渲染问题

渲染列表时始终使用唯一键。

const LazyComponent = React.lazy(() => import('./LazyComponent'));

function App() {
  return (
    <React.Suspense fallback={<div>Loading...</div>}>
      <LazyComponent />
    </React.Suspense>
  );
}

---

19. 使用命名导出导出组件以实现更好的导入控制

命名导出使导入特定组件变得更加容易。

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

useEffect(() => {
  prevCount.current = count;
}, [count]);

console.log(`Previous: ${prevCount.current}, Current: ${count}`);

然后根据需要导入：

const increment = useCallback(() => setCount(count + 1), [count]);

---

20. 可重用组件模式：高阶组件（HOC）

用 HOC 包裹组件以添加额外的逻辑。

const User = ({ name, age }) => (
  <div>{name} is {age} years old</div>
);

---

掌握这些技巧将帮助你编写更简洁、可读、高效的 React 代码！快乐编码！

以上是每个开发人员都必须知道的基本 React 技巧的详细内容。更多信息请关注PHP中文网其他相关文章！