React学习—认识JSX

Posted 2020-09-29

一、定义

      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 所需的状态。