前端React 开发中需要知道的5个技巧

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

 1. 延迟加载

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

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

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

// Counter.js
import { 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.js
import { lazy } from 'React'

const Counter = lazy(() => import('./Counter'));

const App = () => {
  return (
    <div>
    <Suspense fallback={<Loader />}>
        <Counter />
    </Suspense>
    </div>
  );
};

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

2. 自定义钩子

随着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 cleanup
    return () => {
      window.removeEventListener('resize', handler)
    }
  }, [])

  return windowSize
}

3. 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 7
const FragNewSyntax = () => {
    return (
        <>
            <ComponentA />
            <ComponentB />
        </>
    )
}

4. 开发工具

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

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

5. 高阶组件（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)

原创作者：前端新世界