假如React没了JSX
2019-12-23 23:44
991 查看
如题,想必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
相关文章推荐
- react 组件用用jsx的格式区分页面和组件时出现错误
- react-jsx
- React Native学习笔记(2)--React与JSX语法
- React之jsx转js
- React—JSX转换成标准的JavaScript
- React/JSX及React Native 编码规范
- 【React】JSX内联cursor的url
- react demo2 (JSX入门)
- React升职记 ----- jsx
- [React]JSX的用法
- react学习笔记(二)react中JSX
- React的JSX语法及组件
- JavaScript的React框架中的JSX语法学习入门教程
- vscode中react的jsx中补全html标签
- React基础——JSX语法
- React学习之JSX语法讲解(一)
- 深刻理解React(-) --JSX和虚拟DOM
- 学习 React(jsx语法) + es2015 + babel + webpack
- React学习(8)—— 高阶应用:不使用ES6、JSX实现React
- React学习第二天(创建组件的方式,ES6 扩展运算符使用,抽离 jsx 组件,评论列表案例,省略 jsx 后缀名,使用@别名表示路径)