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基本语法

只能有一个根标签，养成外面加上圆括号的习惯。
标签要闭合（单边标签得有斜杠）
元素类型
小写首字母对应 HTML的标签，组件名首字母大写。
注释使用 / * 内容 * / html标签内注释｛/ * 最外层有花括号*/｝
元素属性

内联样式的style：样式名以驼峰命名法表示, 如font-size需写成fontSize。默认像素单位是 px（px不用写）

  let _style = {backgroundColor:"red"};
  ReactDOM.render(
      <h1 style={_style}>Hello, world!</h1>, 
      document.getElementById('box')
  );

外部样式的class：HTML中曾经的 class 属性改为 className（因为class是js的关键字），外部样式时使用
```
  ReactDOM.render(
      <h1  className="bluebg">Hello, world!</h1>,
      document.getElementById('box')
  );
```

for 属性改为 htmlFor（因为for是js的关键字）。（for属性在html标签中是扩充单(复选框)选框的选择范围）
事件名用驼峰命名法。HTML是全小写（onclick），JSX中是驼峰(onClick)

javascript表达式

使用单花括号。

react里没有vue中的指令，任何地方需要javascript的变量（表达式），只需要套上 单花括号就行。

const element = <h1>Hello, {120+130}!</h1>
const element = <h1>Hello, {getName("张三疯")}!</h1>
<input type="text" value={val ? val : ""} />

let _style = {    backgroundColor:"hotpink" }
<div style={_style}>我是div</div>

注意：单花括号里只能写表达式，不能写语句（如：if，for）

总结：

对比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')
);