react笔记04

const element = <h1>Hello,world!</h1>;

这个有趣的标签语法既不是字符串也不是HTML。

它是JSX，是一个js的语法扩展。建议在React中配合使用JSX，JSX可以很好地描述UI应该呈现出它应有交互的本职形式。

为什么使用JSX？

React认为渲染逻辑本质上与其他UI逻辑内在耦合，比如在UI中需要绑定处理事件、在某些时刻状态发生变化时需要通知到UI，以及需要在UI中展示准备好的数据。

React 并没有采用将标记与逻辑进行分离到不同文件这种人为地分离方式，而是通过将二者共同存放在称之为“组件”的松散耦合单元之中，来实现关注点分离。

在下面的例子中我们将调用js函数formatName(user)的结果，并将结果嵌入到

元素中

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

const user = {
    firstName:'111',
    lastName:'222'
};

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

JSX也是表达式

在编译之后，JSX表达式会被转为普通JS函数调用，并且对其取值后得到js对象。

也就是说，可以在if语句和for循环的代码块中使用JSX，将JSX赋值给变量，把JSX当做参数传入，以及从函数中返回JSX：

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

JSX特定属性

可以通过使用引导，来将属性值指定为字符串字面量：

const element = <div tabIndex="0"></div>

也可以使用大括号，来在属性值中插入一个js表达式：

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

使用JSX指定子元素

例如一个标签里面没有内容，你可以使用 />来闭合标签，就像XML语法一样：

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

JSX标签里能够包含很多子元素：

const element = (
    <div>
        <h1>hello!</h1>
        <h2>good to see you here.</h2>
    </div>
);

JSX表示对象
Babel会把JSX转译成一个名为React.createElement()函数调用。
以下两种示例代码完全等效：

const element = (
  <h1 className="greeting">
    Hello, world!
  </h1>
);

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