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

This article mainly explains "what are the things that novice React developers are easy to do wrong". The content in the article 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 things that novice React developers are easy to do wrong?"

1. Forget uppercase React components

Consider this code, which creates a simple div that contains the title of the parent component. There is a subcomponent that contains div with some text.

Class childComponent extends React.Component {render () {return (

Child Component

);}} class ParentComponent extends React.Component {render () {return (ParentComponent);}} export default ParentComponent

What do you think will happen when the code runs?

ChildComponent is not rendered. Where did it go? The code is compiled successfully and there are no errors in the terminal.

Look at the code of the subcomponent again. Pay attention to the name of the component. Did you notice any difference?

Open the console in the browser, the case of the browser console warning is incorrect

It turns out that React treats lowercase components as DOM tags. If you are new to React, you may have missed this small detail in the React document.

If you don't understand this, beginners often get caught up in the confusion that there is nothing wrong with their code compilation. What went wrong?

The solution is simple: capitalize your components.

two。 Mistakenly call the received props

To access the prop passed in by the parent component, the child components must ensure that they call the correct prop name.

You can also use another variable name to pass Props to the child component. Consider the following code snippet:

Class ChildComponent extends React.Component {render () {const {randomString} = this.props; return (

{randomString}

);}} class ParentComponent extends React.Component {render () {const randomString = 'lorem ipsum'; return (ParentComponent);}}

Although this code compiles and runs correctly, no text is rendered within ChildComponent.

Taking a closer look at this line of code, the variable randomString declared in ParentComponent is passed to ChildComponent as a prop named mainText.

However, ChildComponent attempts to access randomString from the prop it receives. Because it only receives mainText as prop, it causes undefined values to be assigned to the randomString declared in ChildComponent. As a result, its

Nothing is rendered within the tag.

Notice which prop is passed to your component and access them accordingly. This will save you some unnecessary trouble during debugging.

3. Pass incorrect Props type

If the prop received is not the expected type, the components that depend on these receiving prop may behave differently.

Class ChildComponent extends React.Component {render () {const {showIntro, showBody} = this.props; return ({showIntro & &

Hello!

} {showBody & &

Spot the mistake!

);}}

Consider this ChildComponent:showIntro and showBody with two prop. It says "Hello!" and "error found!" only if showIntro and showBody are set to true, respectively.

ChildComponent wants to pass two Boolean values as prop. What happens if you perform a similar operation in the parent component?

Different quotation marks and curly braces are used in prop. But they will behave differently. Look at this:

The first two ChildComponent rendered two

Tag, while the last ChildComponent is not rendered.

The 'false' and {' false'} passed as prop cause showIntro and showBody to be inadvertently assigned a string with a value of false instead of a Boolean value of false.

For the first two ChildComponent, both showIntro and showBody are evaluated as true.

This is due to the implicit casting of the & operator. When the & & operator checks for showIntro or showBody (both strings), both strings are forced to true.

The last ChildComponent received a Boolean false, so it did not render anything correctly.

Console.log (`showIntro type: ${typeof showIntro} `); console.log (`showIntro evaluated to: ${showIntro & & true}`); console.log (`showBody type: ${typeof showBody} `); console.log (`showBody evaluated to: ${showBody & & true}`)

To confirm this, we run console.log () to check the running results of prop in each ChildComponent.

As demonstrated here, it is important for beginners to be able to distinguish between quotation marks and curly braces when passing prop to other components.

You can use quotation marks to pass string text.

/ / passing in a String

Curly braces are used to pass JavaScript expressions.

/ / passing in a Number / / passing in a Boolean

Here are some considerations in the Reac documentation:

When embedding an JavaScript expression in an attribute, do not enclose the curly braces in quotation marks. You should use quotation marks (for string values) or curly braces (for expressions), but do not use quotation marks in the same attribute.

4. Call setState () inside render ()

The following figure shows an infinite loop error message

Although you do not have componentWillUpdate () or componentWillUpdate () in your component, you may still encounter this error. This error also occurs when you call setState () in the render () function.

Why is this? Each time setState () is called, React renders again by calling render (). What's inside your render () function? setState (). Did you see the results? An infinite loop.

Just move the setState () call outside the render () function.

If the state must be initialized after the component is mounted (perhaps extracting data from the API endpoint), do so in componentDidMoun ().

If you can initialize the state before the component is mounted, you can also use the constructor to do so.

5. Asynchrony of setState ()

When debugging, you usually use console.log () to print values. However, this does not work well when the code runs asynchronously.

HandleCounterIncrement = () = > {const {counter} = this.state; console.log (`Before update: ${counter} `); this.setState ({counter: counter + 1}); console.log (`After update: ${counter}`);}

Have you ever tried this before? Bad news-- the setState () call is asynchronous. There is no guarantee that the given code will be executed sequentially. It may result in the following output:

Two console.log () calls were made before setState () was executed. Therefore, it prints the value of the previous state twice.

If you want to check the value of the state before and after calling setState (), pass the callback as the second parameter in setState ().

HandleCounterIncrement = () = > {const {counter} = this.state; console.log (`before update: ${counter} `); this.setState ({counter: counter + 1}, () = > {console.log (`after update: ${this.state.counter}`);});}

The callback will be executed after setState () completes, providing synchronization behavior for console.log ().

Thank you for your reading, these are the contents of "what are the things that novice React developers are easy to do wrong?" after the study of this article, I believe you have a deeper understanding of what novice React developers are easy to do wrong, 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.