React 开发 3个技巧

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 />  
        </>  
    )  
}