jsx简介

react文档笔记

jsx简介

jsx是一种javascript的语法扩展，jsx用来声明React当中的元素。

在jsx中使用表达式

jsx当中的表达式要包含在大括号里。例如2+2,user.firstName,formatName(user)等等。

function formatName(user){
    return user.firstName + ' ' +user.lastName
}

const user = {
    firstName:'Harper',
    lastName:'perez'
};

const element = (
    <h1>
        hello,{formatName(user)}!
    </h1>
)

ReactDom.render(
    element,
document.getElementById('root')
)

在书写jsx的时候一般会带上换行和缩进，这样可以增强代码的可读性，在jsx代码外面加上一个小括号，这样可以防止分号自动插入的bug。

jsx本身其实也是一种表达式

在编译之后，jsx其实会被转化为普通的javascript对象。这也就意味着可以下if或者for语句里使用JSX，将它复制被变量当做参数传入，作为返回值都可以：

function getGreeting(user){
    if(user){
        return  <h1>hello,{formatName(user)}</h1>;
    }
    return  <h1>hello,Stranger</h1>;
}

JSX属性

可以使用引号来定义以字符串为值的属性：

const element=<div tabIndex='0'></div>;

也可以使用大括号来定义以javascript表达式为值得属性：

const element=<img src={user.avatarUrl}></img>;

使用了大括号包裹的javascript表达式时就不要再到外面套引号了。JSX会将引号当中的内容识别为字符串而不是表达式。

JSX嵌套

如果Jsx标签是闭合式的，那么你需要在结尾处使用/>,就好像XML/HTML一样：

const element = <img src={user.avatatUrl}/>

JSX标签同样可以相互嵌套：

const element = {
 <div>
    <h1>Hello!</h1>
    <h2>Good to see you here.</h2>
  </div>
}

注意：JSX的特性更接近javascript而不是HTML，所以ReactDOM使用camelCase小驼峰命名来定义属性的名称，而不是使用HTML的属性名称。

JSX代表Objects

Babel转移其会把JSX转换成一个名为React.createElement()的方法调用。

下面两种代码的作用完全是相同的：

const element = (
    <h1 class="greeting">
    hello,world!
    </h1>
);

const element =React.createElement(
'h1',
{className:greeting},
'hello,world!'
)

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

const element = {
    type:'h1',
    props:{
        className:'greeting',
        children:'hello,world'
    }
}

这样的对象被称为“React元素”。他代表所有你在屏幕上看到的东西。React通过读取这些对象来构建DOM并保持内容一致。