前端 React 开发中必须知道的 5 个技巧

2021 年 12 月 30 日
本文字数：1843 字
阅读完需：约 6 分钟

React 是构建前端应用程序的绝佳框架。本文将为大家介绍一些技巧，不但可以提高编写代码的能力，使你成为更优秀的 React 开发人员，而且还能帮助你在以前会害怕的面试中取得突出的成绩。

1. 延迟加载

延迟加载是一种设计模式，会前端培训延迟对象或资源的加载或初始化，直到需要它们为止。这极大地提高了性能。在 React 示例中，减少的包大小可以导致更快的初始加载时间，这在如今用户等待耐心持续减少的情况下至关重要。

幸运的是，React 很容易实现延迟加载。你需要做的就是使用 React.lazy 包动态导入语句 import()。

假设我们有一个 Counter.js 文件：

// Counter.jsimport { useState } from 'React'
const Counter = () => {  const [count, setCount] = useState('');
  const increment = () => setCount(count => count + 1);  const decrement = () => setCount(count => count - 1);
  return (    <div>      <button onClick={decrement}> - <button>      <span> {count} <span>      <button onClick={increment}> + <button>    </div>  );};

复制代码

在 App.js 中延迟加载此 counter：

// App.jsimport { lazy } from 'React'
const Counter = lazy(() => import('./Counter'));
const App = () => {  return (    <div>    <Suspense fallback={<Loader />}>        <Counter />    </Suspense>    </div>  );};

复制代码

Counter 仅在需要时才会延迟加载，并且在加载时显示 Loader 组件。

自定义钩子

随着 React 16.8 的发布，开发人员开始接触 React Hooks。简单来说，Hooks 是允许你在轻量级功能组件中实现额外特性，例如状态和生命周期方法的功能，这些功能以前仅限于相对重量级的类组件。

除了 React 开箱即用提供的 Hooks 之外，开发人员还可以自己编写 Hooks 来满足个人需求。

假设你需要访问窗口尺寸，那么可以创建一个 useWindowSize 钩子来解决问题。

import { useState, useEffect } from 'react'

function useWindowSize() {const [windowSize, setWindowSize] = useState({width: 0,height: 0,})

useEffect(() => {const handler = () => {setWindowSize({width: window.innerWidth,height: window.innerHeight,})}

handler()window.addEventListener('resize', handler)
// Remove event listener on cleanupreturn () => {  window.removeEventListener('resize', handler)}

复制代码

}, [])

return windowSize}

React Fragment

React 要求所有组件都返回单个元素。这在很长一段时间，是导致我们不得不将所有内容包装在 div 中或使用数组表示法的主要原因。

const DivWrap = () => {    return (        <div>            <ComponentA />            <ComponentB />        </div>    )}
const ArrayNotation = () => {    return [        <ComponentA key="a" />        <ComponentB key="b" />    ]}

复制代码

在 React 16.2 之后，引入了 Fragment。它是一个 React 元素，可用于将元素组织在一起，但不会在 DOM 中添加任何元素。

import { Fragment } from 'react'
const Frag = () => {    return (        <Fragment>            <ComponentA />            <ComponentB />        </Fragment>    )}
// Or after Babel 7const FragNewSyntax = () => {    return (        <>            <ComponentA />            <ComponentB />        </>    )}

复制代码

开发工具

React Dev Tools 是一个惊人的扩展，可用于 Chrome 和 Firefox。它通过为我们提供所有细节，如 prop、状态、钩子以及每个组件之间的任何内容，使应用程序的调试变得轻而易举。

你还可以使用它来深入了解部分顶级公司网站的代码库，例如 Netflix、Twitter、Facebook，以及其他使用 React 的网站。

高阶组件（HOC）

你是否厌倦了总是要在网站的页面上添加导航栏、侧边栏和页脚？那么不妨试试高阶组件 (HOC) ！

HOC 是 React 用于重用组件逻辑的高级技术。它允许你接受组件并返回包含 HOC 的功能或数据的新组件。

withRouter()或 connect()是一些常见 HOC 示例。

让我们来创建 withLayout HOC，它接受 Element 并自动添加 Navbar、Sidebar 和 Footer。

const withLayout = (Element) => {    return (props) => (        <>            <Navbar />            <Sidebar/>            <Element {...props} />            <Footer />        </>    );}

复制代码

使用 HOC

const Home = () => {    return (        <h1>            I am Home!        </h1>    )}
export default withLayout(Home)

复制代码

原创作者：前端新世界

发布于: 刚刚

飞不起来的童年

关注

关注尚硅谷，轻松学IT 2021.11.23 加入

还未添加个人简介

发布

暂无评论

创作场景

前端 React 开发中必须知道的 5 个技巧

飞不起来的童年

评论