React基础 —— JSX

一、什么是JSX?

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

上面这个语句既不是字符串也不是HTML。它就被称为JSX，它是JavaScript的语法扩展。

二、为什么选择JSX？

React认为渲染逻辑本质上与其他UI逻辑耦合这一事实：事件如何处理，状态如何随时间变化，以及数据如何准备显示。React不是通过将标记和逻辑放在单独的文件中来人为地分离技术，而是将问题与称为“组件”的松散耦合单元分开，这些单元包含两者。

三、JSX中嵌入表达式

const name = 'J0sh Perez';
const element = <h1>Hello,{name}</h1>;
ReactDOM.render(
    element,
    document.getElement('root')
);

在JSX中的大括号内可以放置任何有效的JavaScript表达式。下面将调用JavaScript函数的结果嵌入formatName到<h1>中

function frormatName(user){
    return user.firstName + ' ' + user.lastName;
}
const user = {
    firstName:'Harper',
    lastName:'Perez'
};
const element = (
    <h1>
        Hello,{formatName(nuser)}!
    </h1>
);

ReactDOM.render(
    element,
    document.getElementById('root')
);

四、JSX也是一个表达式

编译之后，JSX表达式成为常规JavaScript哈数调用并评估为JavaScript对象。意味着可以在if语句和for语句中使用JSX，将其分配给变量，接受它作为参数，并从函数返回它。

function getGreeting(user){
    if(user){
        return <h1>Hello, {foematName(user)}!</h1>;
    } else {
        return <h1>Hello,Stranger.</h1>
    }
}

五、使用JSX指定属性

1、使用引号将字符串文字指定为属性

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

2、还可以使用花括号在属性中嵌入JavaScript表达式

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

由于JSX更接近JavaScript而不是HTML，因此React DOM使用cameCase属性命名约定而不是HTML属性名称。

六、用JSX指定孩子

1、如果标记为空，您可以立即将其关闭 />，如：

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

2、JSX标签可能包含子项：

const element = (
    <div>
        <h1>Hello!</h1>
        <h2>Good to use you here.</h2>
    </div>
);

七、JSX防止注入攻击

在JSX中嵌入用户输入是安全的;

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

ReactDOM会在渲染之前转义JSX中嵌入的任何值。在渲染之前，所有的东西都被转换为字符串。这有助于防止XSS（跨站点脚本）攻击。

八、JSX代表对象

Babel将JSX编译为React.createElement()调用。

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

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

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

猜你喜欢