React学习—认识JSX

最新推荐文章于 2024-10-01 20:12:28 发布

annangyu7013

最新推荐文章于 2024-10-01 20:12:28 发布

阅读量107

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/nankeyimeng/p/7229955.html

版权

一、定义

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

转载于:https://www.cnblogs.com/nankeyimeng/p/7229955.html