【译】React代码整洁之道
域名 2025-10-06 21:17:38
0
整洁的代码代码不仅仅是正常运行的代码，更是整洁之道要求易于阅读、简单易懂、代码组织整齐。整洁之道
在本文中，代码我们将研究八种代码整洁之道。整洁之道
在阅读这些建议时，代码要记住这些只是整洁之道建议!如果你不同意它们中的任何一个，那也完全没关系。代码
以下这些实践，整洁之道个人觉得对我自己编写 React 代码很有帮助。代码
让我们开始吧!
1. 仅对一个条件进行渲染
如果需要在条件为 true 时渲染某些内容，整洁之道而在条件为 false 时不渲染任何内容，网站模板代码不要使 三元表达式，整洁之道请改用 &&。代码
🙅♂️ 不推荐示例：
import React, { useState } from react export const ConditionalRenderingWhenTrueBad = () => { const [showConditionalText, setShowConditionalText] = useState(false) const handleClick = () => setShowConditionalText(showConditionalText => !showConditionalText) return ( <div> <button onClick={ handleClick}>Toggle the text</button> { /* 三元表达式 */} { showConditionalText ? <p>条件为 True!</p> : null} </div> ) }👍 推荐示例：
import React, { useState } from react export const ConditionalRenderingWhenTrueGood = () => { const [showConditionalText, setShowConditionalText] = useState(false) const handleClick = () => setShowConditionalText(showConditionalText => !showConditionalText) return ( <div> <button onClick={ handleClick}>Toggle the text</button> { showConditionalText && <p>条件为 True!</p>} </div> ) }2. 每一个条件都进行渲染
如果需要在条件为 true 时渲染某些内容，而在条件为 false 时渲染其他内容。使用三元表达式!
🙅♂️ 不推荐的示例：
import React, { useState } from react export const ConditionalRenderingBad = () => { const [showConditionOneText, setShowConditionOneText] = useState(false) const handleClick = () => setShowConditionOneText(showConditionOneText => !showConditionOneText) return ( <div> <button onClick={ handleClick}>Toggle the text</button> { /* 条件 True 和 False 都要渲染内容 */} { showConditionOneText && <p>条件为 True!</p>} { !showConditionOneText && <p>条件为 Flase!</p>} </div> ) }👍 推荐示例：
import React, { useState } from react export const ConditionalRenderingGood = () => { const [showConditionOneText, setShowConditionOneText] = useState(false) const handleClick = () => setShowConditionOneText(showConditionOneText => !showConditionOneText) return ( <div> <button onClick={ handleClick}>Toggle the text</button> { showConditionOneText ? ( <p>The condition must be true!</p> ) : ( <p>The condition must be false!</p> )} </div> ) }3. Boolean props
Props 值为 true 的推荐省略不写。
🙅♂️ 不推荐示例：
import React from react const HungryMessage = ({ isHungry }) => ( <span>{ isHungry ? I am hungry : I am full}</span> ) export const BooleanPropBad = () => ( <div> <span> <b>This person is hungry: </b> </span> <HungryMessage isHungry={ true} /> <br /> <span> <b>This person is full: </b> </span> <HungryMessage isHungry={ false} /> </div> )👍 推荐示例：
import React from react const HungryMessage = ({ isHungry }) => ( <span>{ isHungry ? I am hungry : I am full}</span> ) export const BooleanPropGood = () => ( <div> <span> <b>This person is hungry: </b> </span> { /* 不需要赋值 true，省略 */} <HungryMessage isHungry /> <br /> <span> <b>This person is full: </b> </span> <HungryMessage isHungry={ false} /> </div> )4. String props
Props 值为 String, 使用双引号，不使用花括号或反引号。
🙅♂️ 不推荐示例：
import React from react const Greeting = ({ personName }) => <p>Hi, { personName}!</p> export const StringPropValuesBad = () => ( <div> <Greeting personName={ "John"} /> <Greeting personName={ Matt} /> <Greeting personName={ `Paul`} /> </div> )👍 推荐示例：
import React from react const Greeting = ({ personName }) => <p>Hi, { personName}!</p> export const StringPropValuesGood = () => ( <div> <Greeting personName="John" /> <Greeting personName="Matt" /> <Greeting personName="Paul" /> </div> )5. Event handler functions
如果一个事件函数只接受一个参数，不需要传入匿名函数：onChange={ e=>handleChange(e)}，推荐这种写法：onChange={ handleChange} 。
🙅♂️ 不推荐示例：
import React, { useState } from react export const UnnecessaryAnonymousFunctionsBad = () => { const [inputValue, setInputValue] = useState() const handleChange = e => { setInputValue(e.target.value) } return ( <> <label htmlFor="name">Name: </label> { /* 事件只有一个参数，不需要匿名函数*/} <input id="name" value={ inputValue} onChange={ e => handleChange(e)} /> </> ) }👍 推荐示例：
import React, { useState } from react export const UnnecessaryAnonymousFunctionsGood = () => { const [inputValue, setInputValue] = useState() const handleChange = e => { setInputValue(e.target.value) } return ( <> <label htmlFor="name">Name: </label> <input id="name" value={ inputValue} onChange={ handleChange} /> </> ) }6. components as props
将组件作为参数传递给另一个组件时，如果该组件不接受任何参数，则无需将该传递的组件包装在函数中。高防服务器
🙅♂️ 不推荐示例：
import React from react const CircleIcon = () => ( <svg height="100" width="100"> <circle cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="red" /> </svg> ) const ComponentThatAcceptsAnIcon = ({ IconComponent }) => ( <div> <p>Below is the icon component prop I was given:</p> <IconComponent /> </div> ) export const UnnecessaryAnonymousFunctionComponentsBad = () => ( { /* 组件不需要包装在函数中 */} <ComponentThatAcceptsAnIcon IconComponent={ () => <CircleIcon />} /> )👍 推荐示例：
import React from react const CircleIcon = () => ( <svg height="100" width="100"> <circle cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="red" /> </svg> ) const ComponentThatAcceptsAnIcon = ({ IconComponent }) => ( <div> <p>Below is the icon component prop I was given:</p> <IconComponent /> </div> ) export const UnnecessaryAnonymousFunctionComponentsGood = () => ( <ComponentThatAcceptsAnIcon IconComponent={ CircleIcon} /> )7. undefined props
如果参数为 undefined 是允许的，那么不要提供 undefined 作为回退值。
🙅♂️ 不推荐示例：
import React from react const ButtonOne = ({ handleClick }) => ( <button onClick={ handleClick || undefined}>Click me</button> ) const ButtonTwo = ({ handleClick }) => { const noop = () => { } return <button onClick={ handleClick || noop}>Click me</button> } export const UndefinedPropsBad = () => ( <div> <ButtonOne /> <ButtonOne handleClick={ () => alert(Clicked!)} /> <ButtonTwo /> <ButtonTwo handleClick={ () => alert(Clicked!)} /> </div> )👍 推荐示例：
import React from react const ButtonOne = ({ handleClick }) => ( <button onClick={ handleClick}>Click me</button> ) export const UndefinedPropsGood = () => ( <div> <ButtonOne /> <ButtonOne handleClick={ () => alert(Clicked!)} /> </div> )8. 设置 state 依赖先前的 state
如果新 state 依赖于先前 state，则始终将 state 设置为先前 state 的函数。可以批处理 React 状态更新。
🙅♂️ 不推荐示例：
import React, { useState } from react export const PreviousStateBad = () => { const [isDisabled, setIsDisabled] = useState(false) const toggleButton = () => setIsDisabled(!isDisabled) const toggleButton2Times = () => { for (let i = 0; i < 2; i++) { toggleButton() } } return ( <div> <button disabled={ isDisabled}> Im { isDisabled ? disabled : enabled} </button> <button onClick={ toggleButton}>Toggle button state</button> <button onClick={ toggleButton2Times}>Toggle button state 2 times</button> </div> ) }👍 推荐示例：
import React, { useState } from react export const PreviousStateGood = () => { const [isDisabled, setIsDisabled] = useState(false) { /* 推荐设置为函数 */} const toggleButton = () => setIsDisabled(isDisabled => !isDisabled) const toggleButton2Times = () => { for (let i = 0; i < 2; i++) { toggleButton() } } return ( <div> <button disabled={ isDisabled}> Im { isDisabled ? disabled : enabled} </button> <button onClick={ toggleButton}>Toggle button state</button> <button onClick={ toggleButton2Times}>Toggle button state 2 times</button> </div> ) }以上就是我推荐的几个写出整洁的 React 代码的实践。
最后，恭喜你读完了本文，欢迎留言交流~
原文地址：https://dev.to/thawkin3/react-clean-code-simple-ways-to-write-better-and-cleaner-code-2loa
翻译/润色：ViktorHub
