JSX语法入门学习

JSX语法入门学习

1、特点

1. JSX只是高级语法糖, 最终执行时还是会被转成原生js, 通过babel等方式;
2. 更加语义化, 更加直观, 代码可读性更高;
3. 性能相对原生方式更加好一些!

2、示例

a. 多重标签嵌套

ReactDOM.render(
    <div>
        <h2>多层标签嵌套</h2>
        <img src="img/logo.jpg"/>
        <p>测试</p>
    </div>
,document.getElementById('app'))

b. js中的变量, 表达式要写在{}内

ReactDOM.render(
    <div>
        <p>600+1414/2+46/5 = {600+1414/2+46/5}</p>
    </div>,
document.getElementById('app'));

c. 内联样式通过对象方式引入

const myStyle = {
    background:'purple',
    color:'yellow',
    fontSize:30
}

ReactDOM.render(
    <div>
        <h2>给你点颜色看看</h2>
        <div style={myStyle}>颜色来了</div>
    </div>,
document.getElementById('app'))

d. 数组遍历

//声明数组
const dataArr = [
    {name:'孙悟空', power:'2000'},
    {name:'凯', power:'2500'},
    {name:'亚瑟', power:'1800'},
    {name:'牛魔', power:'1000'}
];

//2、创建虚拟DOM
const vDOM = (<ul>
    {
        dataArr.map((data, index) =>
            <li key={index}>{index + 1}
             ------- {data.name}
             -------- 战力：{data.power}</li>
        )
    }
</ul>);


//3、将虚拟DOM渲染到页面元素上
ReactDOM.render( vDOM,document.getElementById('app'));

3、注意问题

1. JSX中添加属性时，使用 className 代替 class , 像label中的for属性，使用htmlFor代替；
2. JSX创建DOM的时候，所有的节点，必须有唯一的根元素进行包裹；
3. JSX语法中，标签必须成对出现，如果是单标签，则必须自闭合；
4. 在 JSX 中可以直接使用 JS代码，直接在 JSX 中通过 {} 中间写 JS代码即可；
5. 在 JSX 中只能使用表达式，不能出现语句；
6. 在 JSX 中注释语法：{/* 中间是注释的内容 */}