React笔记之入门-JSX条件判断与循环控制(4)

前置简介

上一节：https://juejin.im/post/6867027735979261959/

上一篇说了JSX的使用，下面用一些篇幅描述一下JSX中的条件判断和循环控制是怎么使用的。

条件判断

在Vue中，条件判断是像下面这样的：

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

在React中是:

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>
    )
}

结论：在Vue中只能使用Vue提供的语法去写条件判断，但是React中想怎么写都行，因为就是JS的语法，只要是合理的JS语法都可以。

循环语句

在Vue里循环遍历数组和对象:

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

在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>
}

结论：在Vue中只能使用Vue提供的语法写条件判断，在React里还是根据JS的语法来就行。

总结，前4节都学习了哪些内容

1. 引入React & ReactDOM

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

   1.2 也可以通过webpack或者create-react-app直接使用import React from ‘react’

2. React.createElement

   2.1 创建虚拟DOM对象

   2.2 函数的作用：多次创建虚拟DOM对象

   2.3 DOM Diff，比较DOM对象的不同之处并替换

3. JSX

   3.1 将XML转义为React.createElement

   3.2 使用 {} 插入JS代码

   3.3 create-react-app 默认将JS当做JSX处理

   3.4 条件判断、循环要用原生JS实现