如何让你的 React 代码更简洁

简洁的代码具有更好的可读性,容易理解,且易于组织。

本篇文章介绍 6 个在 React 中写简洁代码的技巧。

  • 1. 条件渲染(一个条件时)

    当你要根据条件来判断,以渲染不同的组件时,比如条件满足(为 true) 时,就渲染组件,否则不渲染(渲染空内容),这种情况下
    不要用三元运算符,而是要用 && 这个操作符来处理,看下面的例子:

    \不好的代码\:**

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16

    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>The condition must be true!</p> : null}
    </div>
    )
    }

    \改进后的代码\:**

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16

    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>The condition must be true!</p>}
    </div>
    )
    }

    2. 条件渲染(不同的条件时)

    跟上面的情况有点像,也是根据条件来判断渲染的组件,只是条件不满足时不再渲染空内容,而是渲染别的组件内容。

    这个时候应该用三元运算符。

    \不好的代码\:**

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17

    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>
    {showConditionOneText && <p>The condition must be true!</p>}
    {!showConditionOneText && <p>The condition must be false!</p>}
    </div>
    )
    }

    \改进后的代码\:**

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20

    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. 布尔值属性

    我们经常会传一个布尔类型的属性 (props) 给组件,类似 myTruthyProp={true} 这样的写法是没有必要的。

    不好的代码

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    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>
    )

    \改进后的代码\:**

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    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>
    <HungryMessage isHungry />
    <br />
    <span>
    <b>This person is full: </b>
    </span>
    <HungryMessage isHungry={false} />
    </div>
    )

    这样更简洁点,虽然只是一个小小技巧,但是可以从中看出你是不是一个有经验且优秀的程序员。

    4. 字符串属性

    跟上面的例子差不多,只是换成了字符串类型,这个时候,我们通常用双引号把字符串括起来,再加上花括号,如下面这样:

    不好的代码

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    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>
    )

    **改进后的代码**:**

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    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. 事件绑定函数

    我们经常会给一个组件绑定类似 onClickonChange 这样的事件,比如我们可能会这样写:onChange={e => handleChange(e)},其实是没必要的,且看:

    \不好的代码\:**

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    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)} />
    </>
    )
    }

    \改进后的代码\:**

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    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. 组件属性

    跟上面的例子差不多,我们也可以把组件作为属性传给别的组件,这个时候,支持使用把组件包成函数来传递,但没有接任何参数的时候,这种是没有必要的,且看:

    \不好的代码\:**

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
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 />} />
)

**改进后的代码**:**

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
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} />
)

总结

有时候写代码我们并没有注意到,多写一行,或多写内容有什么问题,但是有时候是没有必要的,我们尽量避免这个,写出更好,更简洁的代码,这样别人能认为你是个有经验的程序员。

  • 版权声明: 本博客所有文章除特别声明外,著作权归作者所有。转载请注明出处!
  • Copyrights © 2017-2021 科瑞兹曼
  • 访问人数: | 浏览次数:

请我喝杯咖啡吧~

支付宝
微信