## React《深入JSX》

React源码阅读指引

"dependencies": {"fbjs": "^0.8.16","loose-envify": "^1.1.0","object-assign": "^4.1.1","prop-types": "^15.6.0"
},

4个依赖库
index.js 环境变量检查
‘use strict’;

if (process.env.NODE_ENV === 'production') {module.exports = require('./cjs/react.production.min.js');
} else {module.exports = require('./cjs/react.development.js');
}

利用ES6的Symbol定义唯一标识。

Why React?

Facebook投入人力、财力等各种资源，稳定；有大型项目实例，有经验。

什么是JSX

JSX是React的核心组成部分，它使用XML标记的方式去直接声明界面，界面组件之间可以互相嵌套。
JSX=JavaScriptXML
JSX可以理解为在JS中编写与XML类似的语言（与XML有本质上的不同），它的目的不是要在浏览器或者引擎中实现，也不是把其加入ECMAScript标准。它的目的是通过各种编译器将这些标记编译成标准的JS语言。
JSX是：

基于ECMAScript的一种新特性（并不是一种新语言）
一种定义带属性树结构（DOM结构）的语法

JSX不是：

XML或者HTML
一种限制（你不需要为了 React 使用 JSX，可以直接使用纯粹的 JS。但更建议使用 JSX ,
因为它能定义简洁且我们熟知的包含属性的树状结构语法。）

JSX的特点：

类XML语法容易接受，结构清晰
增强JS语义
抽象程度高，屏蔽DOM操作，跨平台
代码模块化

JSX并不是新语言，也没有改变JavaScript的语法，只是对JavaScript的拓展。

JSX语法

JSX本身就和XML语法类似，可以定义属性以及子元素。唯一特殊的是可以用大括号来加入JavaScript表达式，例如

class HelloMessage extends React.Component {render() {return <div>Hello {this.props.name}</div>;}
}
ReactDOM.render(<HelloMessage name="worldsong"/>,document.getElementById('root')
);

一、元素名斜体样式

自定义出的组件标签名，React 的 JSX 里约定分别使用首字母大、小写来区分本地组件的类和 HTML 标签。render渲染时，会把大写的组件名定义为自定义组件，把小写的组件名定义为HTML自带的标签名进行渲染。
var HelloMessage =
JSX的标签与函数名都是使用的驼峰命名

html For和className
for和class为js的保留字，在书写for与class时需要修改为htmlFor何className，注意都是使用的驼峰命名。
自闭合标签
在 JSX 中， <MyComponent /> 是合法的，而 <MyComponent>就不合法。所有的标签都必须闭合，可以是自闭和的形式，也可以是常规的闭合。
注意：所有 React component 都可以采用自闭和的形式，包括div等
二、节点属性
如果往原生 HTML 元素里传入 HTML 规范里不存在的属性，React 不会显示它们。如果需要使用自定义属性，要加 data- 前缀。

<div data-custom-attribute="foo" />

然而任意属性支持自定义元素

<x-my-component custom-attribute="foo" />`

要使用 JavaScript 表达式作为属性值，只需把这个表达式用一对大括号 ( { } ) 包起来，不要用引号 ( " " )。
求值表达式本身与JSX没有多大关系，是JS中的特性。它是会返回值的表达式，与语句有本质上的不同，在编写JSX时，在 { } 中不能使用语句（if语句、for语句等等）。我们不能直接使用语句，但可以把语句包裹在函数求值表达式中运用。建议把函数表达式独立出来，在 { } 调用。

条件判断的写法

你没法在JSX中使用 if-else 语句，因为 JSX 只是函数调用和对象创建的语法糖。在 { } 中使用，是不合法的JS代码，不过可以采用三元操作表达式

class HelloMessage extends React.Component {render() {return <div>Hello {this.props.name ? this.props.name : "World"}</div>;}
}
ReactDOM.render(<HelloMessage />,document.getElementById('root')
);

可以使用比较运算符“ || ”来书写，如果左边的值为真，则直接返回左边的值，否则返回右边的值，与if的效果相同。

class HelloMessage extends React.Component {render() {return <div>Hello {this.props.name || "World"}</div>;}
}
ReactDOM.render(<HelloMessage />,document.getElementById('root')
);

也可以使用变量来书写

class HelloMessage extends React.Component {getName() {if (this.props.name)return this.props.nameelsereturn "world"}render() {var name = this.getName();return <div>Hello {name}</div>;}
}
ReactDOM.render(<HelloMessage />,document.getElementById('root')
);

其中可以把变量去掉，直接在 { } 中调用函数

render() {return <div>Hello {this.getName()}</div>;
}

函数表达式
（）有强制运算的作用

class HelloMessage extends React.Component {render() {return <div>Hello {(function (obj) {if (obj.props.name)return obj.props.nameelsereturn "World"}(this))}</div>;}
}
ReactDOM.render(<HelloMessage name={"worldsong"} />,document.getElementById('root')
);

外括号“ ）”放在外面和里面都可以执行。唯一的区别是括号执行完毕拿到的是函数的引用，然后再调用；括号放在外面的时候拿到的事返回值。需传入（this）。

四、注释

JSX 里添加注释很容易；它们只是 JS 表达式而已。你只需要在一个标签的子节点内(非最外层)小心地用 { } 包围要注释的部分。

var content = (<Nav>{/* 一般注释, 用 {} 包围 */}<Person/* 多行注释 */name={window.isLoggedIn ? window.name : ''} // 行尾注释/></Nav>
);

五、样式
尽管在大部分场景下我们应该将样式写在独立的CSS文件中，但是有时对于某个特定组件而言，其样式相当简单而且独立，那么也可以将其直接定义在JSX中。在JSX中使用样式和真实的样式也很类似，通过style属性来定义，但和真实DOM不同的是，属性值不能是字符串而必须为对象，需要注意的是属性名同样需要驼峰命名法。例如：

var style = {color : "red",border : "1px solid #000"
}
class HelloMessage extends React.Component {render() {return <div>Hello {this.props.name}</div>;}
}
ReactDOM.render(<div style={style}><HelloMessage name="worldsong"/></div>,document.getElementById('root')
);

## React《深入JSX》相关推荐

[react] 在JSX中如何写注释？
[react] 在JSX中如何写注释? {/* A JSX comment */} 个人简介我是歌谣,欢迎和大家一起交流前后端知识.放弃很容易, 但坚持一定很酷.欢迎大家一起讨论主目录与歌谣一起 ...
React中JSX的理解
React中JSX的理解 JSX是快速生成react元素的一种语法,实际是React.createElement(component, props, ...children)的语法糖,同时JSX也是J ...
react 注释html,React之JSX语法
React发明了JSX,利用HTML语法来创建虚拟DOM.React的核心机制之一就是可以在内存中创建虚拟的DOM元素.以此来减少对实际DOM的操作从而提升性能. JSX 即Javascript XM ...
react中jsx行内样式（style）的国定写法、jsx双花括号{{}}写法的解释
共index.js.index.html. TodoList.js这三个文件,主要看TodoList.js中的Input标签的style样式双花括号{{}}的写法,会在下方做全面的解释运行效果: i ...
React基础-JSX语法介绍
文章目录 JSX语法介绍认识JSX语法 JSX注释编写 JSX语法介绍认识JSX语法我们先来看一段代码 // 定义根组件 const element = <div>Hello Wor ...
tsconfig.json 配置 update `jsx: “react“` into `jsx: “react-jsx“`终端警告
使用 umiJS 时出现的终端警告: WARN [WARN] update jsx: "react" into jsx: "react-jsx" to supo ...
React学习笔记一(React入门+JSX+脚手架)
文章目录 1. React介绍和特点 1.1 React是什么 1.2 React的特点 2. React的开发依赖 2.1 React的三个依赖 2.2 Babel和React的关系 2.3 Rea ...
React学习--- JSX的学习
React学习- JSX 1.概述 JSX 是 React 的核心组成部分,它使用 XML 标记的方式去直接声明界面,界面组件之间可以互相嵌套.可以理解为在 JS 中编写与 XML 类似的语言, ...
react中 JSX介绍-基本使用
JSX是什么 JSX:是 JavaScript XML的缩写. 在 JS 代码中书写 XML 结构注意:JSX 不是标准的 JS 语法,是 JS 的语法扩展.脚手架中内置了 @babel/plugi ...
React中jsx的规则
jsx语法规则:1.定义虚拟DOM时,不要写引号.2.标签中混入JS表达式时要用{}.3.样式的类名指定不要用class,要用className.4.内联样式,要用style={{key:value} ...

## React《深入JSX》

React源码阅读指引

Why React?

什么是JSX

JSX语法

四、注释

## React《深入JSX》相关推荐

最新文章

热门文章

## React《 深入JSX》

React源码阅读指引

Why React?

什么是JSX

JSX语法

四、注释

## React《 深入JSX》相关推荐

最新文章

热门文章

## React《深入JSX》

## React《深入JSX》相关推荐