react学习介绍JSX

Posted 2020-09-27

参考：https://facebook.github.io/react/docs/introducing-jsx.html

一、JSX介绍

ReactDOM.render(<div>hello world</div>, document.getElementById(‘root‘));
红色部分如果加一层‘‘号，会出错，JSX既不是字符串也不是HTML，它是javascript的语法拓展

二、JSX使用

1.使用大括号嵌入js表达式

let a = "hello world";
ReactDOM.render(<div>{a}</div>, document.getElementById(‘root‘));

2.JSX编译之后是js对象，也就是说，可以赋值给变量，作为参数，或者函数返回值等等

let a = ‘hello world‘;
let b = <div>{a}</div>
ReactDOM.render(b, document.getElementById(‘root‘));

3.使用JSX为属性赋值

let a = ‘world‘;
let b = <div className={a}>hello</div>//此处应该使用驼峰命名
ReactDOM.render(b, document.getElementById(‘root‘));

4.JSX可以预防XSS攻击，因为在渲染之前，他会把内容转换为字符串

三、JSX会被编译成React.createElement()这种形式，来创建元素