React-1.JSX

2020-10-31  本文已影响0人  笨灬蛋_a210

1、JSX的介绍

什么是JSX:JSX=javascript xml就是Javascript和XML结合的一种格式。是 JavaScript 的语法扩展,只要你把HTML代码写在JS里,那就是JSX

在实际开发中,JSX 在产品*打包阶段*都已经编译成纯 JavaScript,不会带来任何副作用,反而会让代码更加直观并易于维护。官方定义是:类 XML 语法的 ECMAScript 扩展。

2、特点:

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

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

使用 JSX 编写模板更加简单快速。

3、JSX的语法

SX就是把html代码写在javascript中,那么,写在javascript中有啥要求(与原来在html中的区别),这就是jsx语法要说的内容。

示例:

var msg="哥们!"
const element = <h1>Hello, world!{msg}</h1>     没有双引号,不是字符串
const List = () => (
      <ul>
        <li>list item</li>
        <li>list item</li>
        <li>list item</li>
      </ul>  
  );     

XML基本语法

javascript表达式

总结:

对比vue,JSX相当于把vue组件里的template和javascript代码混写在一起,而vue中有很多的指令,react中只需要使用单花括号就行。

ReactDOM.render()函数

ReactDOM.render 是 React 的最基本方法。用于将JSX写的模板转为 HTML 语言,并渲染到指定的HTML标签里。

ReactDOM.render( JSX写的html模板,dom对象);

总结:一个react的程序,就是把JSX通过ReactDOM.render()函数渲染到网页上。

程序员完成的是JSX的编写。

条件渲染

var sex='女';
if(sex=='男'){
    var sexJSX=<p>我是男的</p>;
}else{
    var sexJSX=<p>我是女的</p>;
}

ReactDOM.render(
    <ul>
        {sexJSX}
    </ul>,
    document.getElementById('box')
);

注意:if语句不要写在单花括号里。

列表渲染

1)、渲染数组:

//数组里存放jsx
var arr=[
    <li>张三疯</li>,
    <li>张四疯</li>,
    <li>张五疯</li>
]

const show = ()=> (
    <ul>{arr}</ul>
)
ReactDOM.render(show(),document.getElementById("box"));

2)使用Javascript的map()或者普通for循环进行列表的渲染

//普通for循环

let arr = ["铅笔","油笔","钢笔","毛笔"];
var arr2 =[];
for(let i in arr){
    arr2.push(<li>{arr[i]}</li>);
}

const show = ()=> (
    <ul>{arr2}</ul>
)

ReactDOM.render(show(),document.getElementById("box"));

//map
const goods = ['铅笔','钢笔'];
const goodsJSX = goods.map(function(val,index){
    return <li>{val}</li>
});             

ReactDOM.render(
    //以下相当于react里的模板,不能出现js的语句,可以有表达式
    <ul>
        {goodsJSX}
    </ul>,
    document.getElementById('box')
);
上一篇 下一篇

猜你喜欢

热点阅读