React-02-jsx

React 使用 JSX 来替代常规的 JavaScript。

JSX 是一个看起来很像 XML 的 JavaScript 语法扩展。

  JSX 执行更快，因为它在编译为 JavaScript 代码后进行了优化。

  它是类型安全的，在编译过程中就能发现错误。

  使用 JSX 编写模板更加简单快速。
  html标签部分允许嵌套，但顶层仅允许有1个标签。(可以用<标签名></标签名>解决多节点问题)

  可以在 JSX 中使用 JavaScript 表达式。表达式写在花括号 {} 中。

  JSX 中不能使用 if else 语句，但可以使用三元运算。

  React 推荐使用内联样式。

var myStyle = { fontSize: 100, color: '#FF0000'};
ReactDOM.render(
    <h1 style = {myStyle}>hello world</h1>,
    document.getElementById('example')
);

注释：需要写在花括号中

ReactDOM.render(
    <div><h1>hello world</h1>{/*注释...*/}</div>,
    document.getElementById('example')
);

数组：JSX 允许在模板中插入数组，数组会自动展开所有成员

var arr = [ <h1>你好</h1>, <h2>react</h2>,];
ReactDOM.render(
    <div>{arr}</div>,
    document.getElementById('example')
);

数据绑定(在JSX语法中, 使用变量/表达式)

  JS中 嵌套标签, 直接使用<> 声明标签

  如果在JS的html标签中, 要写JS代码, 需要使用 {} 来声明书写的是JS代码

  大括号内, 可以使用变量/表达式/三目运算/数组 (但是不能直接写入一个对象)

  如果返回一堆标签, 可以用数组装着, 然后在{} 直接使用数组变量即可.

var company = {
    name: "jsx",
    isListed: true
};
function randomFn() {
    return Math.random()*10;
}
var el = (
    <div>
       <h1>HTML DOM节点</h1>
        <h3>使用表达式：</h3>
        <div>{ "花括号内写js代码,执行之后,输出返回值" }</div>
        <div>1+1 = { 1+1 }</div>
        <h3>数据绑定</h3>
        <div>{ JSON.stringify(company) }</div>
        <div>{ company.name }</div>
        <div>{ company.isListed ? "上市公司" : "非上市公司" }</div>
        <div>{ randomFn() }</div>
    </div>
);
var oRoot = document.getElementById("root");
ReactDOM.render(el,oRoot);

属性绑定

  可以使用引号 "" 来定义属性,值为字符串

  也可以使用花括号 {} 来定义属性,值为 JavaScript 表达式：

       attr属性={表达式}

       注意：花括号 {} 外面不能套引号

  绑定class类名,必须使用className

  style属性的值必须是一个对象

var company = {
    name: "jsx",
    isListed: true,
    logo: "http://www.offcn.com/statics/images/zgimg/index2019.png",
    type: "职业教育类",
    titleStyle: "red",
    style:{
        height: '30px',
       "lineHeight": "30px",
    }
};

var el = (
    <div>
        <img src={company.logo}/>
         <h2 style={{backgroundColor: "#999"}}>{ company.name }</h2>
         <div style={company.style}>{ company.type }</div>
         <div className="box" title={company.isListed ? "上市公司" : "非上市公司"}>
             <h2 className={company.titleStyle}>{ company.name }</h2>
         </div>
    </div>
);

条件渲染

var el = (<div>{
    (function () {
        if(company.isListed){
            return (<p>上市公司</p>);
        }else{
            return (<p>非上市公司</p>);
        }
    })()
}</div>);

列表渲染

var company = {
    name: "jsx",
    isListed: true,
    course:[
        {id:"001", name:"大前端", dec:"H5/小程序/APP"},
        {id:"002", name:"Java", dec:null},
        {id:"003", name:"Python", dec:"+人工智能"},
        {id:"004", name:"互联网营销", dec:"SEO/SEM/新媒体/电商"},
        {id:"005", name:"UI/UE", dec:"交互设计"},
        {id:"006", name:"软件测试", dec:null},
        {id:"007", name:"大数据", dec:null},
        {id:"008", name:"Linux", dec:"+云计算"},
        {id:"009", name:"Unity游戏开发", dec:"+AR/VR"}
    ]
};

调用数组company.course,在JSX使用map方法将数组数据重构为元素集合：

在map循环时候, 返回一个个标签, 组成一个数组, 然后使用

var el = (
    <div>
        <h1> 数组对象遍历 </h1>
        <h2> { company.name }</h2>
        <ol>
            {company.course.map(function (item,index) {
                return (<li key={item.id} style={{backgroundColor:colors[index]}}>
                    <div>序号: {index}</div>
                    <div>id: {item.id}</div>
                    <div>name: {item.name}</div>
                    <div>描述: {item.dec}</div>
                </li>);
            })}
       </ol>
    }
   </div>
);

Keys 可以在 DOM 中的某些元素被增加或删除的时候帮助 React 识别哪些元素发生了变化。

因此你应当给数组中的每一个元素赋予一个确定的标识。

  key在兄弟元素中必须唯一，但并非全局唯一，即在不同组件中，key可以相同。

  key 会作为给 React 的提示，但不会传递给你的组件。如果您的组件中需要使用和 key 相同的值，请将其作为属性传递