react学习笔记（一）jsx语法

jsx是我们在react中编写组件的一种语法，实际上jsx只是JavaScript的一种语法糖
jsx让我们能更为方便地在JavaScript中书写node节点，通过使用html的格式，让我们更为直观地看到节点的结构

jsx的几种简单用法

1.直接创建一个node节点

1
const element = <h1>Hellow word!</h1>;

这里将<h1>Hellow word!</h1>赋值给element，实际上是等同于将一个h1标签/节点赋值给element，而这个element可以直接放在render函数的return中

1
2
3
4
5
const element=<h1>Hellow World</h1>
ReactDOM.render(
  element,
  document.getElementById('root')
);

页面结果：在这里插入图片描述
如果放入的是一个数组，那么会将数组展开显示

1
2
3
4
5
var arr=['hellow','world'];
ReactDOM.render(
   <div>{arr}</div>,
   document.getElementById('root')
 );

结果如图：
在这里插入图片描述

2.在属性中使用表达式

1
2
3
4
5
6
7
8
9
  class MyComponent extends React.Component {
    render(){
        return <div>{this.props.val}</div>;
    }
}
ReactDOM.render(
    <MyComponent val={1+2} />,
    document.getElementById('root')
);

在jsx中，可以在属性中通过花括号使用表达式，如上面的例子，在子组件MyComponent中添加val属性，然后计算1+2后才把结果赋值给该属性
此外，也可通过使用扩展运算符来将对象的属性赋值给标签

1
2
3
4
5
6
7
8
9
10
11
12
13
class MyComponent extends React.Component {
    render(){
        return <div>{this.props.index}:{this.props.val}</div>;
    }
}
const obj={
    index:0,
    val:1
}
ReactDOM.render(
    <MyComponent {...obj} />,
    document.getElementById('root')
);

这里通过将obj对象的两个属性index,val赋值给子组件MyComponent，在子组件中通过this.props来调用对应的值
结果如图：
在这里插入图片描述
tip:如果在子组件中属性没有赋值，那么默认为为true
如下代码，两行代码的结果是相同的

1
2
<Mycomponent autoShow></Mycomponent>
<Mycomponent autoShow={true}></Mycomponent>

3.将表达式做为子元素

1
2
3
4
5
const element = <h1>Hello World</h1>
ReactDOM.render(
    <div>{element}</div>,
    document.getElementById('root')
);

这里将整个h1标签赋值给element，然后将整个element放到render出的div中
结果如图：
在这里插入图片描述
在子元素中，布尔类型，undefined，null会被忽略，无法渲染出内容
下面的jsx表达式都相等

1
2
3
4
5
6
<div />
<div></div>
<div>{true}</div>
<div>{false}</div>
<div>{null}</div>
<div>{undefined></div>

jsx的优点

  1. 声明节点的时候更为直观
    相对于我们使用createElement来创建节点，使用jsx显得更为直观，看看下面两段代码

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    const element = (
      <h1 className="greeting">
        Hello, world!
      </h1>
    );

    const element = React.createElement(
      'h1',
      {className: 'greeting'},
      'Hello, world!'
    );

    显然前者更为直观

  2. 代码动态创建界面的灵活性
    通过使用jsx语法，我们可以将JavaScript插入到html标签中，可以使页面动态变化，增强了灵活性

  1. 无须学习新的模板语言
    前面也说了，jsx实际上就是JavaScript的语法糖，里面表示DOM节点的也是html的标签，所以使用jsx我们无序再去学习新的模板语法，上手很快

jsx的约定

  1. React认为小写的标签是原生的元素
    诸如div，span这些标签，在React中被认为是原生的元素，即使我们自定义了标签，只要是小写的，就都会被认为是原生的元素

  2. 大写字母开头的被认为是组件
    对于大写字母开头诸如MyComponent这些标签，都会被React认为是组件，会被做为组件处理
    结合上面两点，如果我们要写一个自定义组件，就要注意命名，如果为一个组件命名的时候开头是小写字母，那么就无法正常调用该组件
    如下代码：

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    import React from 'react';

    // 错误！组件应该以大写字母开头：
    function hello(props) {
      // 正确！这种 <div> 的使用是合法的，因为 div 是一个有效的 HTML 标签
      return <div>Hello {props.toWhat}</div>;
    }

    function HelloWorld() {
      // 错误！React 会认为 <hello /> 是一个 HTML 标签，因为它没有以大写字母开头：
      return <hello toWhat="World" />;
    }

    上面的代码出自React的文档

  3. jsx语法可以使用属性语法
    属性语法诸如<menu.li />可以取出对象中的属性值做为标签名，举例如下

1
2
3
4
5
6
7
8
9
10
11
12
class MyComponent extends React.Component {
    render(){
        return <div>MyComponent</div>;
    }
}
const menu={
    li:MyComponent
}
ReactDOM.render(
    <div><menu.li/></div>,
    document.getElementById('root')
);

结果如图：
在这里插入图片描述

  1. 当标签内无内容时，可以使用/>来闭合标签
    如下代码
    1
    2
    3
    4
    ReactDOM.render(
        <MyComponent {...obj} />,
        document.getElementById('root')
    );
    因为MyComponent里面没有任何内容，所以直接使用/>闭合，就像XML语法一样

    jsx防止注入攻击

    React DOM在渲染输入内容之前，会默认对其中的内容进行转义，在渲染前就会将所有的内容转为字符串，这样可以有效地防止 XSS（cross-site-scripting, 跨站脚本）攻击。