持续创作，加速成长！这是我参与「掘金日新计划 · 10 月更文挑战」的第2天，点击查看活动详情

🎈大家好，我是橙橙子，新人初来乍到，请多多关照~

📝小小的前端一枚，分享一些日常的学习和项目实战总结~

😜如果本文对你有帮助的话，帮忙点点赞呀！ღ( ´･ᴗ･` )比心~

JSX

JSX背景

传统的 MVC 是将模板放在 <script> 标签或者模板文件中，在 JS 中通过某种手段引用模板。而React 认为组件才是王道，而组件是和模板紧密关联的，组件模板和组件逻辑分离让问题复杂化了。

所以就有了 JSX 这种语法，就是为了把 HTML 模板直接嵌入到 JS 代码里面，这样就做到了模板和组件关联，但是 JS 不支持这种包含 HTML 的语法，所以需要通过工具将 JSX 编译输出成 JS 代码才能使用。

JSX使用

在使用JSX语法的时候，既可用原生的 HTML 标签，也可直接引用 React 组件。小写的字符串是 HTML 标签，大写开头的变量是 React 组件。

🌳举个栗子：

// 使用HTML
import React from 'react';
import { render } from 'react-dom';

var myElement = <div className="item" />;
render(mElement, document.getElementById('mountNode'));

注意点：React DOM 使用 camelCase（小驼峰命名）来定义属性的名称，而不使用 HTML 属性名称的命名约定。class 在 JSX 里要写成 className，因为 class 在 JS 里是保留关键字。

使用 JavaScript 表达式

属性值使用表达式，只要用 {} 替换 ""即可，{} 中可以放置有效的JavaScript表达式。

🌳举个栗子：

var person = <Person name={window.isLoggedIn ? window.name : ''} />;
var person = React.createElement(
  Person,
  {name: window.isLoggedIn ? window.name : ''}
);

注释

在一个组件的子元素位置使用注释要用 {} 包起来。 🌳举个栗子：

{/* 我是注释 */}

属性

用 data- 前缀来表示自定义属性，aria-来表示可访问的属性。也可以用大括号，来再 属性值中插入一个Javascript表达式

多属性

当需要给组件设置多个属性的时候，可以使用spread attributes功能，这样就不用一个个设置了。

🌳举个栗子：

var props = {};
props.name = 'sara';
props.sex = '女';
var component = <Component {...props} />;

后面的属性会覆盖前面的属性

var props = { name: 'sara' };
var component = <Component {...props} foo={'Leo'} />;
console.log(component.props.name); // 'Leo'

JSX 指定子元素

一个标签里面没有内容，可以用 /> 来闭合标签，JSX中可以包含很多子元素。
🌳举个栗子：

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