嘿,React 愛好者! 👋 你準備好升級你的程式設計遊戲了嗎?無論您是 React 新手還是經驗豐富的專業人士,我們都提供了一些殺手級快捷方式,可以讓您的程式碼比口哨更乾淨。讓我們深入研究 ReactJS 速記技術的世界並改變您的程式設計體驗!
還記得到處綁定this
日子嗎?告別頭痛!箭頭函數可以拯救世界。
而不是這種冗長的混亂:
<button onClick={this.handleClick.bind(this)}>Click Me!</button>
試試這個時尚的單行:
<button onClick={() => this.handleClick()}>Click Me!</button>
這就像魔法一樣,對吧?您的事件處理程序變得更加性感! 😎
只想在條件成立時才顯示某些內容?忘記那些龐大的 if 語句。 &&
運算符是您的新秘密武器。
老套:
{isLoggedIn ? <WelcomeBack /> : null}
新熱點:
{isLoggedIn && <WelcomeBack />}
乾淨、簡單、開門見山。您的程式碼剛剛減輕了重量並且變得清晰了!
厭倦了輸入this.props
一百萬次?解構來拯救!這就像打開裝有好東西的手提箱一樣。
前:
const name = this.props.name;
const age = this.props.age;
後:
const { name, age } = this.props;
繁榮!更少的打字,更多的編碼。您的手腕稍後會感謝您。
需要對元素進行分組而不加入額外的 DOM 節點?片段是你的朋友,而且它們的簡寫方式更友善。
老辦法:
<React.Fragment>
<Header />
<Main />
<Footer />
</React.Fragment>
新方式:
<>
<Header />
<Main />
<Footer />
</>
這就像你的程式碼節食後減掉了所有多餘的重量!
傳遞大量道具?將它們像黃油一樣塗抹在熱吐司上!
而不是這種手指鍛鍊:
<MyComponent prop1={props.prop1} prop2={props.prop2} prop3={props.prop3} />
簡單傳播一下:
<MyComponent {...props} />
更少的打字,更少的錯誤,你的程式碼看起來像絲綢一樣光滑。
函數元件很酷,但是箭頭函數元件呢?他們是冰冷的!
老套:
function Welcome(props) {
return <h1>Hello, {props.name}</h1>;
}
新學校:
const Welcome = ({ name }) => <h1>Hello, {name}</h1>;
簡短、甜蜜、現代。就像您的元件進行了時尚的新改造一樣!
厭倦了檢查每個屬性是否存在?可選連結就像是物件屬性的安全網。
謹慎的做法:
const userName = user && user.info && user.info.name;
自信的方法:
const userName = user?.info?.name;
這就像為您的財產配備一名保鑣。不再有未定義的錯誤悄悄出現在您身邊!
無需構造函數儀式即可初始化您的狀態。狀態聲明變簡單!
老式的:
constructor(props) {
super(props);
this.state = { count: 0 };
}
新的和改進的:
state = { count: 0 };
更少的程式碼,相同的結果。這就像跳過閒聊直接進入正題!
就這樣,夥計們!八個 ReactJS 快捷方式將使您的程式碼比剛洗過的汽車更乾淨。 🚗✨ 透過使用這些技術,您不僅可以減少編寫程式碼,還可以減少程式碼量。你正在編寫更聰明的程式碼。未來的你(和你的團隊)將感謝你提供的乾淨、可讀且高效的 React 元件。
請記住,優秀的程式碼不僅在於它的功能,還在於它的功能。關鍵在於理解和維護的容易程度。所以繼續重構吧!您的 React 之旅變得更加令人興奮。
祝您編碼愉快,並祝福您的元件始終渲染順利! 🚀👨💻👩💻
原文出處:https://dev.to/vyan/8-game-changing-reactjs-shortcuts-for-writing-clean-code-in-2024-5a21