React学习—认识JSX

一、定义

JSX ，他是 JavaScrip 的一种扩展语法。表示对象

const element = (
    <div>
        <h1>Hello!</h1>
        <h2>Good to see you here.</h2>
    </div>
);
// 我们将JSX分割成多行。我们推荐使用括号将 JSX 包裹起来
// JSX 的基本语法规则：遇到 HTML 标签（以 < 开头），就用 HTML 规则解析；遇到代码块（以 { 开头），就用 JavaScript 规则解析。
// 只有一个顶层标签
// 标签闭合

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

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

基本上它会创建一个如下所示的对象：

// 注意: 这是简化的结构
const element = {
    type: ‘h1‘,
    props: {
        className: ‘greeting‘,
        children: ‘Hello, world‘
    }
};

二、JSX指定属性值

1、使用字符串

const ele = <div tabIndex = "0"></div>
//  使用驼峰属性名约定，而不是html属性名称。class => className tabindex => tabIndex

2、花括号嵌入js表达式

const ele = <div tabIndex = {user.url}></div>

3、 自定义属性 data-abc

三、行内样式

style={ {color: "red"} }

四、渲染元素

不同于浏览器的 DOM 元素， React 元素是普通的对象，非常容易创建。React DOM 会负责更新 DOM ，以匹配React元素（愚人码头注：DOM元素与React元素保持一致）。元素是构成组件的"材料"。

function Welcome(props) {
      return <h1>Hello, {props.name}</h1>;
 }

 const element = <Welcome name="Sara" />;

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

//  React DOM 会将元素及其子元素与之前版本逐一对比, 并只对有必要更新的 DOM 进行更新, 以达到 DOM 所需的状态。