React中的JSX不完全解析

Veröffentlicht am

React
由于今天没有带阮一峰老师的ES6书及所记得笔记，所以就先开辟一篇关于React的知识吧，都是些很很基础的知识，但是有些也是容易遗漏的知识哦。

JSX

使用JSX

  • 我们可以任意的在JSX当中使用Javascript表达式，在JSX当中的表达式要包含在大括号里

  • 由于JSX本身也属于表达式，所以我们可以在if或者for语句中使用JSX，将它赋值给变量，当做参数传入，当做返回值都可以。

    1
    2
    3
    4
    5
    6
    7
    8
    9
    function getGreeting(user){
     if(user){
      for(var i=0;i<user.length;i++){
       return <h1>hello,{formatName(user)[i]}</h1>
      }
     }else if{
      return <h1>get out,{formatName(user)}</h1>
     }
    }

  • 如果JSX是闭合的，那么你需要在结尾用/>，就好像是XML/HTML一样，JSX标签同样可以相互嵌套。

    1
    2
    3
    4
    5
    6
    const element =(
     <div>
      <h1>hello</h1>
      <h1>good</h1>
     </div>
    )

    由于JSX更加接近Javascript，所以ReactDom使用小驼峰定义属性名称，比如className

JSX防注入攻击

你可以放心的在JSX当中使用用户输入

1
2
const title = response.potentiallyMaliciousInput
const element = <h1>{title}</h1>

ReactDom 在渲染之前默认会过滤所有传入的值，他可以确保你的应用不会被注入攻击，所有的内容在渲染之前都被转换成字符串，这样可以有效的防止XSS(跨站攻击)攻击。

JSX代表Object

Babel转义器会把JSX转化成一个名为React.createElement()的方法调用。

1
2
3
4
5
const element = (
 <h1 className = 'greeting'>
  hello
 </h1>
)

||可以等价的看做(只做代码演示，实际代码并不如此)

1
2
3
4
5
const element = React.createElement(
'h1',
{className:'greeting'},
'hello world'
)

React.createElement()这个方法首先会进行一些避免Bug的检查，之后会返回一个类似下面例子的对象：

1
2
3
4
5
6
7
const element = {
 type:'h1',
 props:{
  className:'greeting',
  children:'hello world'
 }
}