react学习之jsx与元素渲染

react

react学习之JSX与元素渲染

1.什么是JSX?

可以理解为将类似于html中的标签放在js的文件中的形式，这样做的好处是，你不需要像纯js那样去引入你的dom节点,去进行你的dom操作。在JSX的语法中，你也可以自己定义组件，但是需要注意的是，所有的JSX中的内容必须包裹在一个大的wrapper当中。

2.JSX的使用

在JSX中你可以嵌入表达式，函数内容，或者字符串等多种形式的表达式。例如：

在这上面的两个实际例子中，就表现出了，变量和函数被嵌入进JSX中。

3.JSX也可以作为表达式被嵌入出去

在上面的这个实例例子中，JSX表达式，就被一个函数执行并且给返回出去

4.JSX中的属性

首先在这里你需要明白的一点就是，JSX更加的趋近js而不是html，所以对于在JSX中的属性的命名方式，应该和js中的语法相近，所以在属性的命名中，我们就应该采用小驼峰式的命名规则，而不是html中的全小写命名规则。下面就是一个很好的例子。

5.JSX可以防止注入攻击

React Dom在最初始的呈现JSX之前，都会对JSX进行转义。永远不会注入应用程序中没有显示编写的任何内容。它会将所有的JSX中的内容给转化成字符串，这有助于其跨站点脚本攻击。

6.JSX代表对象

在这上面的所展示的例子中，你可很明白的看出，其实我们所定义的JSX，与最下面得的表达形式是想通的，就是在js中的对象表现形式。

上面我们说了什么是JSX，也说的了JSX中的语法。那么，有一个问题就会产生了，我们将如何将上面的JSX给表现在我们的网页上呢。这是我们就需要渲染了。

元素渲染

当我们使用了上面的JSX表达式后，我们需要的就是将其呈现在我们的页面上，那么渲染的流程又是什么呢？

首先我们需要在我们的html中创建一个根节点，需要明白的就是，我们所有书写的JSX中的表达式的语法，都会通过这个根节点给展示在我们的页面上。

ReactDOM.render()所起的作用便是所说的渲染，在这个方法中我们需要传入进去两个参数，第一个参数就是我们所要渲染的内容，而第二个参数就是我们所创建的根节点在页面中的位置（也就是上面所说的通道）。在上面的几个实例中，你所看到的例子中便是如此。

以上便是我对于JSX与元素渲染过程中的理解。