React学习(二)-深入浅出JSX

前言

在Jq,原生javascript时期,在写页面时,往往强调的是内容结构,层叠样式,行为动作要分离,三者之间分工明确,不要耦合在一起

然而在React出现后,一切皆js,对于在JS里面写HTML代码,刚开始是非常反感的,甚至有违背当初的原则

但是,对于原先那种仅仅是把三种语言技术放在了三种不同文件位置里进行分开管理了,实际上,它并没有实现逻辑上的分离

既然前端UI显示就是HTML,CSS,javascript,那么把实现一个功能的所有代码放在一个文件里管理,也是一种宏观上代码的封装,模块化处理.

使用JSX并不是倒退,它只是一个语法糖而已,虽然在React中,不强制要求使用JSX,但是官方却推荐使用.

因为在javascript代码中将JSX和UI放在一起在视觉上有辅助作用,另外,它还可以使React显示跟过有用的错误和警告信息

下面就一起来学习下JSX吧,当你习惯它之后呢,并不会嗤之以鼻,反而会引以为爱的

JSX是什么?

全称: javascript and XML

定义: 可拓展(自定义)标记性语言,基于javascript,融入了XML,我们可以在js中书写xml,使用JSX可以很好的描述UI在页面中应该呈现它应有的交互形式

类似下面的这种,非官方提供的普通标签,而是自己定义具有一定含义的特殊标签

其实,你可把这些自定义的标签,称为组件,页面中的某一部分,具有独立的功能和逻辑
实现组件化的好处,不言而喻,下面来看看React的JSX是怎么样的

当你用create-react-app脚手架,初始化一个react应用后,在入口文件index.js中最后一行代码,ReactDOM.render()函数调用的第一个实参数的写法

import React from 'react'; // 引入react.js库,并用import关键字定义实例化了一个React对象
import ReactDOM from 'react-dom'; // 引入react-dom.js,同上,实例化了ReactDOM对象

ReactDOM.render(, document.getElementById('root'))

为了更好的理解,你可以在index.js中,将代码更改成如下

const element = ;
const container = documnent.getElementById("root");

ReactDOM.render(element, container);

其中ReactDOM是react-dom的一个实例对象,它是用来将虚拟dom转换为真实DOM的,ReactDOM实例化对象下的一个render方法,接收两个实际参数,第一个实参数,是要渲染的组件,第二个实参数,是该组件的挂载点,将组件渲染到什么位置上,这里是渲染到根节点root上

ReactDOM.render(要渲染的组件, 组件要挂载的位置);

其中类似这种JSX:

const element = Hello,itclanCoder
// 等价于
var element = React.createElement('h1',{title:"h1标签"}, "hello， itclanCoder" );
// React.createElement() 会预先执行一些检查，以帮助你创建了这么一个对象,但是在实际中不要这么写,它是会报错的
var element = {
   type: 'h1',
   props: {
   title: "h1标签",
   children: "hello,itclanCoder"
  }
}

这些对象被称为 “React 元素”。它们描述了你希望在屏幕上看到的内容。React通过读取这些对象,然后使用它们来构建 DOM 以及保持随时更新
注意:

React中并没有模板语言(类似Vue的template的),但是它具有JavaScript的全部的功能
可以在JS中书写XML(HTML) 只能有且仅有一个顶层元素 ,当然也可以借助React提供的Fragment(也叫占位符)这个内置组件将你写的JSX子元素给包裹起来,可以包含子节点 ,也支持插值表达式 {表达式}
为了便于阅读,return返回的jsx内容,用一个圆括号()包裹起来,这样可以将JSX拆分为多行。这样做不是强制要求的，但是这可以避免遇到自动插入分号陷阱
如下代码所示:

import React from "react";
import ReactDOM from "react-dom";


class Acomponent extends React.Component {
    render() {
// return 后面带着一个圆括号,只是为了换行显示,根节点最顶层只能是一个元素
      return (
       
         一个靠前排的90后帅小伙
         欢迎关注微信itclanCoder公众号
       
       )
     }
}

// 或者使用React提供的Fragement占位符组件也可以,但是先引入
import React, { Componnet, Fragment } from "react";
import ReactDOM from "react-dom";

class Acomponent extends Component {
  render() {
    return (
     
        一个靠前排的90后帅小伙
        欢迎关注微信itclanCoder公众号
     
    )
   }
}

下面来具体来看看JSX是如何使用的

JSX的具体使用

在JSX中嵌入表达式{ 表达式 }

双大括号内可以是变量,字符串,数组,函数调用, 但是不可以是对象,也不支持 if,for语句

例如:你在插值表达式里写对象:它是会报错的

{ {name: "川川", age: "一个靠前排的90后帅小伙"} }

错误信息如下:

Objects are not valid as a React child (found: object with keys {name, age}). If you meant to render a collection of children, use an array instead

该错误的意思是:对象无效作为React子对象（找到：具有键{name，age}的对象）。如果您要渲染子集合，请使用数组

当然如果是数组的话,它会自动的给拼接起来,本质上是通过数组中的join("")方法处理后的结果

{ ["川川", "全宇宙最帅"]} //川川全宇宙最帅

当然对于在JSX里面写if,for语句也是会报错的


 {
   if(this.isBtn) {

其实,JSX 也是一个表达式,它虽然不支持if,for语句,但是它在if，for循环的代码块中是可以使用JSX的,将JSX赋值给变量,把JSX当作参数传入,以及从函数中返回JSX

function getMessage(user) {
  if (user) {
    return Hello, { formatName(user) }!;
  }
  return Hello, itClanCoder.;
}`

注意:布尔类型、Null 以及 Undefined 将会被忽略,false, null, undefined, true是合法的子元素。但它们并不会被渲染。以下的 JSX 表达式渲染结果都是相同的：





{ false }

{ null }

{ undefined }

{ true }

具体作用: 这有助于在特定条件来渲染其他的 React 元素。例如，在以下 JSX 中，仅当 isBtn 为 true 时，才会渲染

{ tagName: 'div', attribute: { className: 'input-wrap'}, children: [ { tagName: 'input', attribute: { type: "text", autocomplete:"off", value:"", id:"mq", class:"input", title:"请输入搜索文字" } }, { tagName: "button", attribute: null, children: '搜索' } ] }

{ type: 'div', props: {className: 'input-wrap' }, children: [ { type: 'input', props: { type:'text', autocomplete:"off", value:"",id:"mq", class:"input", title:"请输入搜索文字" }, { type: 'button', props: null, children: '搜索' } ] }

import React from 'react' import ReactDOM from 'react-dom' class Search extends React.Component { render () { return ( ) } } ReactDOM.render( , document.getElementById('root') )

import React from 'react' import ReactDOM from 'react-dom' class Search extends React.Component { render () { return ( React.createElement( "div", {className: 'input-wrap'}, React.createElement( "input", { type:'text', autocomplete:"off", value:"", id:"mq", class:"input", title:"请输入搜索文字" } ), React.createElement( 'button', null, "搜索" ) ) ) } } ReactDOM.render( React.createElement(Search, null), document.getElementById('root') );

import React from 'react'; import ReactDOM from 'react-dom' class ElButton extends React.Component { constrcutor(props){ super(props); } render() { return ( ) } } ReactDOM.render(绿色按钮, document.getElementById('root'));

import React from 'react'; // 引入react.js库,并用import关键字定义实例化了一个React对象 import ReactDOM from 'react-dom'; // 引入react-dom.js,同上,实例化了ReactDOM对象 ReactDOM.render(, document.getElementById('root'))

const element = Hello,itclanCoder // 等价于 var element = React.createElement('h1',{title:"h1标签"}, "hello， itclanCoder" ); // React.createElement() 会预先执行一些检查，以帮助你创建了这么一个对象,但是在实际中不要这么写,它是会报错的 var element = { type: 'h1', props: { title: "h1标签", children: "hello,itclanCoder" } }

import React from "react"; import ReactDOM from "react-dom"; class Acomponent extends React.Component { render() { // return 后面带着一个圆括号,只是为了换行显示,根节点最顶层只能是一个元素 return ( 一个靠前排的90后帅小伙欢迎关注微信itclanCoder公众号 ) } } // 或者使用React提供的Fragement占位符组件也可以,但是先引入 import React, { Componnet, Fragment } from "react"; import ReactDOM from "react-dom"; class Acomponent extends Component { render() { return ( 一个靠前排的90后帅小伙欢迎关注微信itclanCoder公众号 ) } }

import React from 'react' import ReactDOM from 'react-dom' class Search extends React.Component { render () { return ( ) } } ReactDOM.render( , document.getElementById('root') )

import React from 'react'; import ReactDOM from 'react-dom' class ElButton extends React.Component { constructor(props){ super(props); } render() { return ( ) } }

React学习(二)-深入浅出JSX

前言

JSX是什么?

Hello,itclanCoder

一个靠前排的90后帅小伙

欢迎关注微信itclanCoder公众号

一个靠前排的90后帅小伙

欢迎关注微信itclanCoder公众号

JSX的具体使用

Hello, { formatName(user) }!

Hello, itClanCoder.

JSX原理

Hello,itclanCoder

一个靠前排的90后帅小伙

欢迎关注微信itclanCoder公众号

一个靠前排的90后帅小伙

欢迎关注微信itclanCoder公众号

JSX的具体使用

Hello, { formatName(user) }!

Hello, itClanCoder.

JSX原理

你可能感兴趣的:(React学习(二)-深入浅出JSX)