服务器之家:专注于服务器技术及软件下载分享
分类导航

node.js|vue.js|jquery|angularjs|React|json|js教程|

服务器之家 - 编程语言 - JavaScript - 编写简洁的React代码建议

编写简洁的React代码建议

2021-04-25 23:37TianTianUp小弋 JavaScript

干净的代码易于阅读,简单易懂,而且组织整齐。在这篇文章中,列举了一些平时编写简洁的React代码可能需要关注的点。

编写简洁的React代码建议

前言

干净的代码易于阅读,简单易懂,而且组织整齐。在这篇文章中,列举了一些平时可能需要关注的点。

如果你不同意其中任何一条,那也完全没问题。

只对一个条件进行条件性渲染

如果你需要在一个条件为真时有条件地呈现一些东西,在一个条件为假时不呈现任何东西,不要使用三元运算符。使用&&运算符代替。

糟糕的例子:

  1. import React, { useState } from 'react' 
  2.  
  3. export const ConditionalRenderingWhenTrueBad = () => { 
  4.   const [showConditionalText, setShowConditionalText] = useState(false
  5.  
  6.   const handleClick = () => 
  7.     setShowConditionalText(showConditionalText => !showConditionalText) 
  8.  
  9.   return ( 
  10.     <div> 
  11.       <button onClick={handleClick}>Toggle the text</button> 
  12.       {showConditionalText ? <p>The condition must be true!</p> : null
  13.     </div> 
  14.   ) 

 好的例子:

  1. import React, { useState } from 'react' 
  2.  
  3. export const ConditionalRenderingWhenTrueGood = () => { 
  4.   const [showConditionalText, setShowConditionalText] = useState(false
  5.  
  6.   const handleClick = () => 
  7.     setShowConditionalText(showConditionalText => !showConditionalText) 
  8.  
  9.   return ( 
  10.     <div> 
  11.       <button onClick={handleClick}>Toggle the text</button> 
  12.       {showConditionalText && <p>The condition must be true!</p>} 
  13.     </div> 
  14.   ) 

 有条件的渲染是指在任何条件下

如果你需要在一个条件为真时有条件地呈现一个东西,在条件为假时呈现另一个东西,请使用三元运算符。

糟糕的例子:

  1. import React, { useState } from 'react' 
  2.  
  3. export const ConditionalRenderingBad = () => { 
  4.   const [showConditionOneText, setShowConditionOneText] = useState(false
  5.  
  6.   const handleClick = () => 
  7.     setShowConditionOneText(showConditionOneText => !showConditionOneText) 
  8.  
  9.   return ( 
  10.     <div> 
  11.       <button onClick={handleClick}>Toggle the text</button> 
  12.       {showConditionOneText && <p>The condition must be true!</p>} 
  13.       {!showConditionOneText && <p>The condition must be false!</p>} 
  14.     </div> 
  15.   ) 

 好的例子:

  1. import React, { useState } from 'react' 
  2.  
  3. export const ConditionalRenderingGood = () => { 
  4.   const [showConditionOneText, setShowConditionOneText] = useState(false
  5.  
  6.   const handleClick = () => 
  7.     setShowConditionOneText(showConditionOneText => !showConditionOneText) 
  8.  
  9.   return ( 
  10.     <div> 
  11.       <button onClick={handleClick}>Toggle the text</button> 
  12.       {showConditionOneText ? ( 
  13.         <p>The condition must be true!</p> 
  14.       ) : ( 
  15.         <p>The condition must be false!</p> 
  16.       )} 
  17.     </div> 
  18.   ) 

 Boolean props

一个真实的props可以提供给一个组件,只有props名称而没有值,比如:myTruthyProp。写成myTruthyProp={true}是不必要的。

糟糕的例子:

  1. import React from 'react' 
  2.  
  3. const HungryMessage = ({ isHungry }) => ( 
  4.   <span>{isHungry ? 'I am hungry' : 'I am full'}</span> 
  5.  
  6. export const BooleanPropBad = () => ( 
  7.   <div> 
  8.     <span> 
  9.       <b>This person is hungry: </b> 
  10.     </span> 
  11.     <HungryMessage isHungry={true} /> 
  12.     <br /> 
  13.     <span> 
  14.       <b>This person is full: </b> 
  15.     </span> 
  16.     <HungryMessage isHungry={false} /> 
  17.   </div> 

 好的例子:

  1. import React from 'react' 
  2.  
  3. const HungryMessage = ({ isHungry }) => ( 
  4.   <span>{isHungry ? 'I am hungry' : 'I am full'}</span> 
  5.  
  6. export const BooleanPropGood = () => ( 
  7.   <div> 
  8.     <span> 
  9.       <b>This person is hungry: </b> 
  10.     </span> 
  11.     <HungryMessage isHungry /> 
  12.     <br /> 
  13.     <span> 
  14.       <b>This person is full: </b> 
  15.     </span> 
  16.     <HungryMessage isHungry={false} /> 
  17.   </div> 

 String props

可以用双引号提供一个字符串道具值,而不使用大括号或反斜线。

糟糕的例子:

  1. import React from 'react' 
  2.  
  3. const Greeting = ({ personName }) => <p>Hi, {personName}!</p> 
  4.  
  5. export const StringPropValuesBad = () => ( 
  6.   <div> 
  7.     <Greeting personName={"John"} /> 
  8.     <Greeting personName={'Matt'} /> 
  9.     <Greeting personName={`Paul`} /> 
  10.   </div> 

 好的例子:

  1. import React from 'react' 
  2.  
  3. const Greeting = ({ personName }) => <p>Hi, {personName}!</p> 
  4.  
  5. export const StringPropValuesGood = () => ( 
  6.   <div> 
  7.     <Greeting personName="John" /> 
  8.     <Greeting personName="Matt" /> 
  9.     <Greeting personName="Paul" /> 
  10.   </div> 

 事件处理函数

如果一个事件处理程序只需要事件对象的一个参数,你就可以像这样提供函数作为事件处理程序:onChange={handleChange}。

你不需要像这样把函数包在一个匿名函数中。

糟糕的例子:

  1. import React, { useState } from 'react' 
  2.  
  3. export const UnnecessaryAnonymousFunctionsBad = () => { 
  4.   const [inputValue, setInputValue] = useState(''
  5.  
  6.   const handleChange = e => { 
  7.     setInputValue(e.target.value) 
  8.   } 
  9.  
  10.   return ( 
  11.     <> 
  12.       <label htmlFor="name">Name: </label> 
  13.       <input id="name" value={inputValue} onChange={e => handleChange(e)} /> 
  14.     </> 
  15.   ) 

好的例子:

  1. import React, { useState } from 'react' 
  2.  
  3. export const UnnecessaryAnonymousFunctionsGood = () => { 
  4.   const [inputValue, setInputValue] = useState(''
  5.  
  6.   const handleChange = e => { 
  7.     setInputValue(e.target.value) 
  8.   } 
  9.  
  10.   return ( 
  11.     <> 
  12.       <label htmlFor="name">Name: </label> 
  13.       <input id="name" value={inputValue} onChange={handleChange} /> 
  14.     </> 
  15.   ) 

将组件作为props传递

当把一个组件作为props传递给另一个组件时,如果该组件不接受任何props,你就不需要把这个传递的组件包裹在一个函数中。

糟糕的例子:

  1. import React from 'react' 
  2.  
  3. const CircleIcon = () => ( 
  4.   <svg height="100" width="100"
  5.     <circle cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="red" /> 
  6.   </svg> 
  7.  
  8. const ComponentThatAcceptsAnIcon = ({ IconComponent }) => ( 
  9.   <div> 
  10.     <p>Below is the icon component prop I was given:</p> 
  11.     <IconComponent /> 
  12.   </div> 
  13.  
  14. export const UnnecessaryAnonymousFunctionComponentsBad = () => ( 
  15.   <ComponentThatAcceptsAnIcon IconComponent={() => <CircleIcon />} /> 

好的例子:

  1. import React from 'react' 
  2.  
  3. const CircleIcon = () => ( 
  4.   <svg height="100" width="100"
  5.     <circle cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="red" /> 
  6.   </svg> 
  7.  
  8. const ComponentThatAcceptsAnIcon = ({ IconComponent }) => ( 
  9.   <div> 
  10.     <p>Below is the icon component prop I was given:</p> 
  11.     <IconComponent /> 
  12.   </div> 
  13.  
  14. export const UnnecessaryAnonymousFunctionComponentsGood = () => ( 
  15.   <ComponentThatAcceptsAnIcon IconComponent={CircleIcon} /> 

为定义的props

未定义的props被排除在外,所以如果props未定义是可以的,就不要担心提供未定义的回退。

糟糕的例子:

  1. import React from 'react' 
  2.  
  3. const ButtonOne = ({ handleClick }) => ( 
  4.   <button onClick={handleClick || undefined}>Click me</button> 
  5.  
  6. const ButtonTwo = ({ handleClick }) => { 
  7.   const noop = () => {} 
  8.  
  9.   return <button onClick={handleClick || noop}>Click me</button> 
  10.  
  11. export const UndefinedPropsBad = () => ( 
  12.   <div> 
  13.     <ButtonOne /> 
  14.     <ButtonOne handleClick={() => alert('Clicked!')} /> 
  15.     <ButtonTwo /> 
  16.     <ButtonTwo handleClick={() => alert('Clicked!')} /> 
  17.   </div> 

 好的例子:

  1. import React from 'react' 
  2.  
  3. const ButtonOne = ({ handleClick }) => ( 
  4.   <button onClick={handleClick}>Click me</button> 
  5.  
  6. export const UndefinedPropsGood = () => ( 
  7.   <div> 
  8.     <ButtonOne /> 
  9.     <ButtonOne handleClick={() => alert('Clicked!')} /> 
  10.   </div> 

 设置依赖前一个状态的状态

如果新的状态依赖于之前的状态,那么一定要把状态设置为之前状态的函数。React的状态更新可以是分批进行的,如果不这样写你的更新就会导致意外的结果。

糟糕的例子:

  1. import React, { useState } from 'react' 
  2.  
  3. export const PreviousStateBad = () => { 
  4.   const [isDisabled, setIsDisabled] = useState(false
  5.  
  6.   const toggleButton = () => setIsDisabled(!isDisabled) 
  7.  
  8.   const toggleButton2Times = () => { 
  9.     for (let i = 0; i < 2; i++) { 
  10.       toggleButton() 
  11.     } 
  12.   } 
  13.  
  14.   return ( 
  15.     <div> 
  16.       <button disabled={isDisabled}> 
  17.         I'm {isDisabled ? 'disabled' : 'enabled'} 
  18.       </button> 
  19.       <button onClick={toggleButton}>Toggle button state</button> 
  20.       <button onClick={toggleButton2Times}>Toggle button state 2 times</button> 
  21.     </div> 
  22.   ) 

 好的例子:

  1. import React, { useState } from 'react' 
  2.  
  3. export const PreviousStateGood = () => { 
  4.   const [isDisabled, setIsDisabled] = useState(false
  5.  
  6.   const toggleButton = () => setIsDisabled(isDisabled => !isDisabled) 
  7.  
  8.   const toggleButton2Times = () => { 
  9.     for (let i = 0; i < 2; i++) { 
  10.       toggleButton() 
  11.     } 
  12.   } 
  13.  
  14.   return ( 
  15.     <div> 
  16.       <button disabled={isDisabled}> 
  17.         I'm {isDisabled ? 'disabled' : 'enabled'} 
  18.       </button> 
  19.       <button onClick={toggleButton}>Toggle button state</button> 
  20.       <button onClick={toggleButton2Times}>Toggle button state 2 times</button> 
  21.     </div> 
  22.   ) 

 总结

以下做法并非针对React,而是在JavaScript(以及任何编程语言)中编写干净代码的良好做法。

稍微做个总结:

  • 将复杂的逻辑提取为明确命名的函数
  • 将神奇的数字提取为常量
  • 使用明确命名的变量

我是TianTian,我们下一期见!!!

原文地址:https://mp.weixin.qq.com/s/EXlQE5mjigSumkq2VC3NNQ

延伸 · 阅读

精彩推荐