前端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)

原创作者：前端新世界