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)
原创作者:前端新世界