Introduction to React Notes-JSX Conditional Judgment and Loop Control (4)

Introduction

Previous section: https://juejin.im/post/6867027735979261959/

The previous article talked about the use of JSX, the following will use some space to describe how the conditional judgment and loop control in JSX are used.

Conditional judgment

In Vue, conditional judgment is like the following:

<template>
	<div>
    	<div v-if="n%2===0">n是偶数</div>
        <span>n是奇数</span>
    </div>
</template>

In React it is:

const Component = () => {
	// 这里就有种完全在写JS的感觉，标签也当成了JS的感觉
	return n%2===0 ? <div>n是偶数</div> : <span>n是奇数</span>
}

如果需要一个div包围在外面，则写成

const Component = () => {
	return (
    	<div>
        	// 这里和上面的区别是，因为外面有div包裹，这里为了告诉翻译器，这是一个JS表达式，所以两边必须加上 {...}
        	{n%2===0 ? <div>n是偶数</div> : <span>n是奇数</span>}
        </div>
    )
}


// 还可以写成


const Component = () => {
	// 用一个变量接收
	const content = (
    	<div>
        	{n%2===0 ? <div>n是偶数</div> : <span>n是奇数</span>}
        </div>
    )
    // 返回这个变量
    return content
}


// 还可以写成


const Component = () => {
	// 将条件判断作为一个变量
	const inner = n%2===0 ? <div>n是偶数</div> : <span>n是奇数</span>
	return (
    	<div>
        	// 引入这个变量
        	{inner}
        </div>
    )
}

// 还可以写成

const Component = () => {
	// 用一个变量接收最终的结果
	let inner
	if (n%2===0) {
    	inner = <div>n是偶数</div>
    } else {
    	inner = <span>n是奇数</span>
    }
    return (
    	<div>
        	// 引入这个变量
        	{inner}
        </div>
    )
}

Conclusion: In Vue, only the grammar provided by Vue can be used to write conditional judgments, but in React, you can write it whatever you want, because it is the JS grammar, as long as it is a reasonable JS grammar.

loop statement

Loop through arrays and objects in Vue:

<template>
	<div>
    	<div v-for="(n,index) in numbers" :key="index">
        	下标 {
   
   {index}} , 值为 {
   
   {n}}
        </div>
    </div>
</template>

In React:

const Component = (props) => {
	return props.numbers.map((n,index) => {
    	return <div>下标{index}值为{n}</div>
    })
}

// 如果需要额外的div可以写成

const Component = (props) => {
	return (<div>
      { props.numbers.map((n,index) => {
          return <div>下标{index}值为{n}</div>
      }) }
    </div>)
}

也可以写成

const Component = (props) => {
  const array = []
  for(let i = 0; i < props.numbers.length; i++) {
    array.push(<div>{i} : {props.numbers[i]}</div>)
  }
  return <div>{array}</div>
}

Conclusion: In Vue, only the grammar provided by Vue can be used to write conditional judgments. In React, it should be based on JS grammar.

In summary, what have been learned in the first 4 sections

1. Introduce React & ReactDOM

   1.1 CDN方式：react.js、react-dom.js、babel.js

   1.2 You can also use import React from'react' directly through webpack or create-react-app

2. React.createElement

   2.1 Create a virtual DOM object

   2.2 The role of the function: create a virtual DOM object multiple times

   2.3 DOM Diff, compare and replace the differences between DOM objects

3. JSX

   3.1 Escaping XML as React.createElement

   3.2 Use {} to insert JS code

   3.3 create-react-app treats JS as JSX by default

   3.4 Conditional judgment and looping should be realized with native JS