假如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