后端开发教程 - Java、Spring Boot 实战 - msg200.com
每个 React 开发者都应该知道的 5 个技巧
1.延迟加载
2. 自定义钩子
3. React Fragments
4. 开发工具
5. 高阶组件（HOC）
总结
感谢阅读
React是一款非常棒的前端应用程序构建工具。本文将提供一些技巧，您可以立即实施，提升您的React技能，成为更优秀的React 开发人员，编写更优秀的代码，甚至帮助您顺利通过最初害怕的面试。
1.延迟加载
延迟加载是一种设计模式，它会延迟对象或资源的加载或初始化，直到需要它们时才进行。这可以显著提升性能。以React为例，减小的包大小可以缩短初始加载时间，这在人们注意力持续时间日益缩短的今天至关重要。
幸运的是，React让开发者能够非常轻松地实现延迟加载。你只需要用包裹动态 import 语句 import()即可React.lazy。
假设我们有一个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：
// 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 Hook来解决这个问题。
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 Fragments
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 的出色扩展程序。它提供所有组件的详细信息，例如 props、state、hooks 以及它们之间的所有关联，使应用程序的调试变得轻而易举。
有趣的事实：您还可以使用它来深入了解顶级公司网站的代码库，例如Netflix、Twitter、Facebook和任何其他使用React 的网站
5. 高阶组件（HOC）
你是否厌倦了在网站的每个页面上添加导航栏、侧边栏和页脚？高阶组件 (HOC)来拯救你！
HOC是 React 中用于复用组件逻辑的高级技术。它允许你传入一个组件，并返回一个包含 HOC 功能或数据的新组件。
withRouter()或者是一些常见HOCconnect()的例子。
让我们创建一个withLayout HOC，它接受一个元素并自动添加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)
总结
本文已完结。希望我能提供一些见解。请在下方评论区分享你的想法。
祝您的 React 开发之旅好运！
感谢阅读
需要一位顶级软件开发自由职业者来解决你的开发难题吗？在Upwork上联系我
想联系我吗？请在LinkedIn上联系我
关注我的博客，每两周在Medium上获取最新资讯
常问问题
这些是我经常收到的一些问题。希望这个常见问题解答部分能解决您的问题。
-
我是初学者，该如何学习前端 Web 开发？
可以参考以下文章： -
你能指导我吗？
抱歉，我工作已经很忙了，没时间指导任何人。