假如React没了JSX

如题，想必React你们早已不陌生，而React里面的JSX都是玩的驾轻就熟了，可是假如说React里面没有了React那会是一种什么样的情形呢，咱们来简单的看一下。

首先咱们来实现一个简单的list列表。

 

 好，如今我把他的代码贴出来，你们看一下（可复制的代码在文章最下方）

 

 感受是否是很清晰明了。那咱们若是不使用JSX该怎么书写这段代码呢？

下面咱们来看一下实现。（可复制的代码在文章最下方）

 

是否是感受复杂了不少，并且层级关系也没有那么一目了然了。固然了，在工做中咱们基本不会不使用JSX。毕竟直接用React.createElement来写代码看上去很是复杂和麻烦，

可是咱们仍是须要懂的在React当中不使用JSX该怎样来书写代码。一个缘由是由于这是基础，另外一个缘由则由于不少公司面试的时候会让你不用JSX来手写代码，若是你不知道怎么写可就太尴尬了

 

使用JSX的代码

import React, {Component} from 'react'
import './App.css'
class App extends Component{
  render() {
    // 使用JSX的写法
    return (
      <ul className='myList'>
        <li>基础巩固000</li>
        <li>{true?'基础巩固111':'基础巩固222'}</li>
        {true?<li>基础巩固333</li>:<li>基础巩固444</li>}
      </ul>
    );
  }
}
export default App

 

不使用JSX的代码

import React, {Component} from 'react'
import './App.css'
class App extends Component{
  render() {
    // 不使用JSX的写法
    var child1 = React.createElement('li', null, '基础巩固000');
    var child2 = React.createElement('li', null, true?'基础巩固111':'基础巩固222');
    var child3 = React.createElement('li', null, '基础巩固333');
    var child4 = React.createElement('li', null, '基础巩固444');
    var root = React.createElement('ul', {className: 'myList'}, child1, child2, true?child3:child4);
    return root
  }
}
export default App