Shulou(Shulou.com)06/03 Report--

This article mainly explains "what are the development skills that React should learn". The content of the explanation is simple and clear, and it is easy to learn and understand. Please follow the editor's train of thought to study and learn "what are the development skills that React should learn"?

1. Render for only one condition

If you want to render certain elements when a condition holds, do not use the ternary operator. Use the & & operator instead.

It is not recommended to write:

Import React, {useState} from 'react' export const ConditionalRenderingWhenTrueBad = () = > {const [showConditionalText, setShowConditionalText] = useState (false) const handleClick = () = > setShowConditionalText (showConditionalText = >! showConditionalText) return (switch text {showConditionalText?

Set up display content

: null})}

Recommended writing method:

Import React, {useState} from 'react' export const ConditionalRenderingWhenTrueGood = () = > {const [showConditionalText, setShowConditionalText] = useState (false) const handleClick = () = > setShowConditionalText (showConditionalText = >! showConditionalText) return (switch text {showConditionalText & &

Set up display content!

})}

2.Boolean Props abbreviation

Abbreviated at isHungry.

It is not recommended to write:

Import React from 'react' const HungryMessage = ({isHungry}) = > ({isHungry? 'I am hungry':' I am full'}) export const BooleanPropBad = () = > ()

Recommended writing method:

Import React from 'react' const HungryMessage = ({isHungry}) = > ({isHungry? 'I am hungry':' I am full'}) export const BooleanPropGood = () = > ()

3.String Props abbreviation

Abbreviated at personName.

It is not recommended to write:

Import React from 'react' const Greeting = ({personName}) = >

Hi, {personName}!

Export const StringPropValuesBad = () = > ()

Recommended writing method:

Import React from 'react' const Greeting = ({personName}) = >

Hi, {personName}!

Export const StringPropValuesGood = () = > ()

4. Shorthand for event handling function

Abbreviated at onChange.

It is not recommended to write:

Import React, {useState} from 'react' export const UnnecessaryAnonymousFunctionsBad = () = > {const [inputValue, setInputValue] = useState ('') const handleChange = e = > {setInputValue (e.target.value)} return (Name: handleChange (e)} / >)}

Recommended writing method:

Import React, {useState} from 'react' export const UnnecessaryAnonymousFunctionsGood = () = > {const [inputValue, setInputValue] = useState ('') const handleChange = e = > {setInputValue (e.target.value)} return (Name:)}

5. Component is returned as a parameter

Abbreviated at IconComponent.

It is not recommended to write:

Import React from 'react' const CircleIcon = () = > () const ComponentThatAcceptsAnIcon = ({IconComponent}) = > () export const UnnecessaryAnonymousFunctionComponentsBad = () = > (} / >)

Recommended writing method:

Import React from 'react' const CircleIcon = () = > () const ComponentThatAcceptsAnIcon = ({IconComponent}) = > () export const UnnecessaryAnonymousFunctionComponentsGood = () = > ()

6. Set the pros that depends on the previous pros

If the new state depends on the previous state, the state is always set to a function of the previous state. React status updates can be batch processed, and not writing updates in this way can lead to unexpected results, abbreviated at setIsDisabled

It is not recommended to write:

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 ( I'm {isDisabled ? 'disabled' : 'enabled'} 切换按钮状态 切换按钮状态2次 ) } 推荐写法： 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; iTunes +) {toggleButton ()} return (Isimm {isDisabled? 'disabled':' enabled'} switch button state toggle button status 2)} Thank you for your reading, these are the contents of "what development skills React should learn". After the study of this article, I believe you have a deeper understanding of the development skills that React should learn, and the specific use needs to be verified in practice. Here is, the editor will push for you more related knowledge points of the article, welcome to follow!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.