React:JSX

Posted 瓶子2333

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了React:JSX相关的知识,希望对你有一定的参考价值。

React的一个特色/核心机制是通过创建虚拟DOM,减少对实际DOM的操作,从而提高页面性能。

JSX其实是把XML语法加入到JS中,我们可以用JSX来构建界面,然后JSX由转换器转换成纯JS,在浏览器中执行。在React的文档中,很直接地告诉我们JSX只是JS的一个语法拓展而已。

1.基础语法:

1 ReactDOM.render(
2   <h1>Hello, world!</h1>,
3   document.getElementById(‘root‘)
4 );
ReactDOM.render是核心的渲染方法:,其传入俩参数,第一个是构建的模板,第二个是挂载的DOM节点。

2.JSX Object

const element = <h1>Hello, world!</h1>;

上面定义的element既不是string也不是html,而是JSX语法创建的一个UI模板,也是一个React实例--React element。在React中我们会用它来渲染DOM结构。

当我们用typeof操作符将它console.log时,输出是一个“object”。

3.插入表达式:

 1 const element = (
 2   <h1>
 3     Hello, {formatName(user)}!
 4   </h1>
 5 );
 6 
 7 ReactDOM.render(
 8   element,
 9   document.getElementById(‘root‘)
10 );

JSX和其他模板语法一样,可以在其中插入JS表达式,用一个大括号括起。其中formatName函数返回的是计算后的某个字符串。

4.JSX本身也可以作为函数返回的表达式

  由于JSX在编译后变成JS对象,因此在源代码中我们可直接将JSX作为函数的输出插入到UI模板中。

5.JSX插入标签特性

如果要在HTML标签中插入表达式,使用{},用引号的话只会把值作为字符串处理。

5.多行模板

如果JSX构建的模板想隔行,要用小括号括起:

1 const element = (
2   <div>
3     <h1>Hello!</h1>
4     <h2>Good to see you here.</h2>
5   </div>
6 );

如果标签中没有子元素,记得要加闭合标签。

6.特性名称要用驼峰写法:

文档强调,ReactDOM中特性名称要用驼峰写法,如className取代class,tagIndex取代tagindex,因为JSX毕竟是JS而不是纯html。

7.JSX可以防止恶意注入

JSX在渲染之前都会对插入的值进行escape(字符串编码),所有插入值都转换为字符串。

8.React.createElement()方法:

在创建React模板时,除了像上面那样写html,还可以调用等价的React.createElement()。

1 const element = React.createElement(
2   ‘h1‘,
3   {className: ‘greeting‘},
4   ‘Hello, world!‘
5 );

其产生的是如下的React element对象:

1 // Note: this structure is simplified
2 const element = {
3   type: ‘h1‘,
4   props: {
5     className: ‘greeting‘,
6     children: ‘Hello, world‘
7   }
8 };

React使用这些对象来构建浏览器的DOM。

 

以上是关于React:JSX的主要内容,如果未能解决你的问题,请参考以下文章

react jsx 代码格式化

使用 Firebase HTTP 函数(Firebase、Stripe OAuth、React (JSX) 前端)将授权代码返回到 Stripe

React JSX 开发笔记

React2.JSX的使用

JSX

初学React:JSX语法