频道导航

ReactJS读书笔记一：深入理解JSX

2020-06-09 React 前端之家

前端之家收集整理的这篇文章主要介绍了ReactJS读书笔记一：深入理解JSX，前端之家小编觉得挺不错的，现在分享给大家，也给大家做个参考。

这个系列是读《React 引领未来的用户界面开发框架》的笔记。

JSX语法是react的一大亮点。

之前很不喜欢在js中写模板，因为js字符串换行很麻烦，所以大家都习惯把模板用script标签写在html中。后来发现这样其实挺坑的，特别是当你的网站是前后端分离的时候，如果改一下模板还要找后端的开发，非常浪费时间。

JSX的出现比较完美解决了JS中写模板的问题。简单的说就是JS 和 HTML和混合着写在一起。

一，JSX基本原理@H_301_15@

首先我们看一个官方最简单的例子

[css] view plain copy

React.render(

<h1color="red">Hello,world!</h1>,

document.getElementById('example')

);

然后他编译出来实际上是这样：

[javascript] copy

React.render(React.createElement("h1",{color:"red"},"Hello,world!"),document.getElementById('example'));

其中最关键的部分就是 html 代码被转换成了 React.createElement。

这就是JSX的基本原理，他会自动识别HTML代码，并且全部转换成 React.createElement，于是编译出来的就是原生的JS代码。

如果你不嫌麻烦，完全可以自己写 React.createElement 来创建模板，这样就不需要JSX了。

JSX区分HTML代码的方式就是：前括号之内并且首字母小写的就是HTML代码。如果首字母大写则就是react组件，后面会说到react组件。

JSX会有详细的语法检查，如果你的标签未闭合会直接报错。而不像浏览器中可能会自动修复或者直接乱掉。

因为JSX是兼容JS语法的，所以在html中如果有JS关键字就不要写，比如 class 要用 className 来代替。for 要用 htmlFor 来代替

二，HTML模板中使用JS@H_301_15@

在HTML模板中使用JS非常方便，只需要用大括号把JS代码括起来即可。

copy

varnames=['Alice','Emily','Kate'];

React.render(

<div>

{

names.map(function(name){

return<div>Hello,{name}!</div>

})

}

</div>,

);

编译出来就变成了这样：

copy

React.render(
React.createElement("div",null,names.map(function(name){

returnReact.createElement("div",",name,"!")

})),

document.getElementById('example')

);

要注意的是，大括号实际就是一个变量输出表达式，JSX最终就是直接把花括号中的内容作为React.createElement 的第三个参数直接传入了（没有任何修改直接传入），所以其中只能放一行表达式，并且任何不能直接作为第三个参数的写法都是错的，

那么你这样写就是错的：

vara=1;

</div>,108); list-style-type:decimal-leading-zero; color:inherit; line-height:18px; margin:0px!important; padding:0px 3px 0px 10px!important; list-style-position:outside!important"> );

因为很明显其中花括号内的内容直接放在第三个参数上，语法不对。

这么写也是错的：

copy

因为 React.createElement(“div”,null,var a = 1;) 是语法错误。

那么你也可以理解为什么大括号中的js表达式不能有分号结尾了吧。

需要注意的是，如果你在属性中输出JS变量，是不能加引号的，不然会被当做字符串而不被解析。

应该是这样：

<atitle={title}>链接</a>

三组件嵌套@H_301_15@
JSX支持以XML的语法来嵌套组件：

[html] copy

<Nav>Profile>click</>

实际上生成了：

copy

React.createElement(Nav,

React.createElement(Profile,

你也可以通过 JS 语法来写子节点：

>{login?>:Login>login>}

四，延展属性 spread attributes@H_301_15@
后面会讲到如何创建React组件：

copy

varHelloMessage=React.createClass({
render:function(){

returnh1>Hello{this.props.name}>;

});

HelloMessagename="John"/>,108); list-style-type:decimal-leading-zero; color:inherit; line-height:18px; margin:0px!important; padding:0px 3px 0px 10px!important; list-style-position:outside!important"> document.getElementById('example')

其中 props 可以认为是一个配置接口，在使用HelloMessage 组件的时候，传入的任何html属性都会保存在this.props 中

这个属性不一定是字符串哦，可以是任何JS变量，比如：

copy

varHelloMessage=React.createClass({
render:function(){

return<h1>Hello{this.props.name()}</h1>;

varsayName=function(){

return"Lucy";

<HelloMessagename={sayName}/>,34)">那么请注意，这个 this.props 应该当做只读变量，不允许对他有任何修改，比如你不能 this.props.name =‘Lily’。这样是不符合规范的。因为他会导致组件和模板不一致。

另外，有些时候你会需要直接把一个普通JS对象作为props 传递给 React组件，比如你从数据库中取到了一个人物信息，那么你可以用延展属性操作符来做：

copy

this.props.name}</h1>;
varLucy={

name:"Lucy",108); list-style-type:decimal-leading-zero; color:inherit; line-height:18px; margin:0px!important; padding:0px 3px 0px 10px!important; list-style-position:outside!important"> gender:"female"

<HelloMessage{...Lucy}/>,34)">

注意其中的{…Lucy} 被编译成了：

copy

React.__spread({},Lucy)

原理是不是很简单，就是一个类似 $.extend 的操作而已。

五一些需要注意的地方

有几个在写JSX的时候需要注意的点

不要在HTML模板中写JS关键字，所以 class 应该用 className，for 应该用 htmlFor

所有的DOM标准属性都是驼峰命名，比如 onClick，但是 data-x 和 aria-x 还是用短横线分隔。

style 属性接收的是一个key-value 的JS对象，而不是字符串。

所有的事件都是和W3C规范一致的！因为React内部对事件做了封装。

表单输入属性，例如`value`和`checked`，以及`textarea`。这里有更多相关信息。

参考：

http://reactjs.cn/react/docs/jsx-in-depth.html

http://www.jb51.cc/article/p-rkowmlmt-bnx.html

原文链接：https://www.f2er.com/react/303997.html

上一篇：运行第一个React Native程序下一篇：ReactJS读书笔记二：组件生命周期

猜你在找的React相关文章

react使用moment进行日期格式化

导入moment 使用方式年月日，时分秒星期几相对时间 7天后 2小时后明天将毫秒转换成年...

作者：前端之家时间：2021-02-16

推荐使用并手写实现redux-actions原理

@ 一、前言为什么介绍redux-actions呢? 第一次见到主要是接手公司原有的项目，发现有之前...

作者：前端之家时间：2020-12-30

【译】值得推荐的十大React Hook 库

十大React Hook库原文地址：https://dev.to/bornfightcompany/top-10-react-hook-librari...

作者：前端之家时间：2020-12-30

React生命周期

React生命周期 React的生命周期从广义上分为挂载、渲染、卸载三个阶段，在React的整个生命...

作者：前端之家时间：2020-12-19

React虚拟DOM的理解

React虚拟DOM的理解 Virtual DOM是一棵以JavaScript对象作为基础的树，每一个节点可以将其...

作者：前端之家时间：2020-12-19

使用react-native-vector-icons（RN0.6+）

1.安装 npm install --save react-native-vector-icons or yarn add react-native-vector-...

作者：前端之家时间：2020-12-02

React中的Props, State 与 render 函数

React 的核心特性总结 1、React：声明式开发 (JS或者jQuery属性命令式开发） 2、可以与其他...

作者：前端之家时间：2020-11-07

React开发环境准备

react fiber 指react 16以上的版本引入react的方式： 1、引入.js文件 2、使用脚手架工具（...

作者：前端之家时间：2020-11-07

React组件拆分与传值

组件拆分与组件之间的传值父子组件的概念：父组件通过属性的方式，向自组件传值子组件通...

作者：前端之家时间：2020-11-07

React组件的简单演示

src/Test.js import React from 'react'; function Test() { return ( &a...

作者：前端之家时间：2020-11-07

最新文章