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

原文地址:https://www.cnblogs.com/suihang/p/12089128.html

时间: 2024-11-13 10:35:38

假如React没了JSX的相关文章

Node.js 之react.js组件-JSX简介

JSX 简介 const element = <h1>Hello, world!</h1>; 以上为一个JSX,我的理解(简单理解带有HTML标签的变量元素). 简介:是一个 JavaScript 的语法扩展.我们建议在 React 中配合使用 JSX,JSX 可以很好地描述 UI 应该呈现出它应有交互的本质形式.JSX 可能会使人联想到模版语言,但它具有 JavaScript 的全部功能. JSX 可以生成 React “元素”. 为什么使用 JSX? React 认为渲染逻辑本

【React 6/100】 React原理 | setState | JSX语法转换 | 组件更新机制

****关键字 | setState | JSX语法转换 | 组件更新机制 组件更新机制 setState() 的两个作用 修改state 更新组件 过程:父组件重新渲染时,也会重新渲染子组件,但只会渲染当前组件子树(当前组件以其所有子组件) 组件性能优化 减轻state 减轻state:只存储跟组件渲染相关的数据(比如:count/ 列表数据 /loading等) 注意:不用做渲染的数据不要放在state中 对于这种需要在多个方法中用到的数据,应该放到this中 避免不必要的重新渲染 组件更新

React Native 打包.jsx文件

最近在研究React Native.感觉开发效率确实不错,但jsx语法写起来感觉不怎么顺手. 试用了Sublime Text 3和Visual Studio Code写代码,感觉反应总是慢一拍. 还是想换回VS2015写jsx,但用VS写jsx好像只能在后缀为.jsx的文件里面写.(不知道VS有没有直接设置在js里写jsx的方法) 于是翻了下react-native的打包程序,改了下让打包程序能自动打包.jsx文件. 贴出修改方法,习惯能VS的可以试着改下 1.项目主文件夹\node_modul

React学习—认识JSX

一.定义 JSX ,他是 JavaScrip 的一种扩展语法.表示对象 const element = ( <div> <h1>Hello!</h1> <h2>Good to see you here.</h2> </div> ); // 我们将JSX分割成多行.我们推荐使用括号将 JSX 包裹起来 // JSX 的基本语法规则:遇到 HTML 标签(以 < 开头),就用 HTML 规则解析:遇到代码块(以 { 开头),就用 J

react入门-----(jsx语法,在react中获取真实的dom节点)

1.jsx语法 1 var names = ['Alice', 'Emily', 'Kate']; 2 <!-- HTML 语言直接写在 JavaScript 语言之中,不加任何引号,这就是 JSX 的语法,它允许 HTML 与 JavaScript 的混写 --> 3 ReactDOM.render( 4 <div> 5 { 6 names.map(function (name) { 7 return <div>Hello, {name}!</div> 8

react中的jsx

前端开发是一个有趣的东西,如果追求高科技,就像 学习之前:  昨天看了一个不错的webpack教程, 顺便替看到的写东西的有心人打个广告:  戳这里 react的学习比较复杂,昨天看了webpack,今天早上看了一些yarn和npm的区别(没什么区别):然后晚上开始用jsx了,感觉比较烦恼的是js里写html虽然很新潮,但是也很不爽的说,没有emet和一些代码提示写的时候确实不太习惯,所以今天就花心思耐心的学习了一番jsx.官方学习地址:戳这里 未完待续 原文地址:https://www.cnb

React教程:JSX语法基础

1.基本概念: React 使用 JSX 来替代常规的JavaScript. JSX 是按照 XML 语法规范 的 JavaScript 语法扩展. JSX 语法的本质:并不是直接把 JSX 渲染到页面上,而是内部先转换成了 createElement 形式,再渲染的. 2. JSX 的优点: JSX 执行更快,因为它在编译为 JavaScript 代码后进行了优化: 它是类型安全的,在编译过程中就能发现错误: 使用 JSX 编写模板更加简单快速. 3.JSX语法基础: JSX 注释:推荐使用

[转] React 最佳实践——那些 React 没告诉你但很重要的事

前言:对很多 react 新手来说,网上能找到的资源大都是些简单的 tutorial ,它们能教会你如何使用 react ,但并不会告诉你怎么在实际项目中优雅的组织和编写 react 代码.用谷歌搜中文“ React 最佳实践”发现前两页几乎全都是同一篇国外文章的译文...所以我总结了下自己过去那个项目使用 React 踩过的一些坑,也整理了一些别人的观点,希望对部分 react 使用者有帮助. React 与 AJAX React只负责处理View这一层,它本身不涉及网络请求/AJAX,所以这

[React] React Fundamentals: Precompile JSX

The JSX Transformer library is not recommended for production use. Instead, you'll probably want to precompile your JSX into JavaScript. Install: npm install react-tools -g Run: jsx dev build --no-cache-dir --watch //watch dev dir and compile js to b