[JavaScript知识库]React中JSX&元素渲染&组件和Props

一、JSX简介

JSX，是JavaScript的语法扩展，表示在JavaScript中写HTML的代码，可以很好的描述UI应该呈现出它应有交互的本质形式。

1、JSX是一个表达式

在编译之后，JSX表达式会被转为普通的JavaScript函数调用，并得到其返回值。
所以，我们可以在if语句、for循环的代码块中使用JSX，可以将JSX赋值给变量，可以把JSX当做参数传入。

2、JSX特定属性

1、可以通过引号，将属性值指定为字符串字面量

const element = <div tabIndex="1"></div>

2、可以使用大括号，在属性值中插入一个JavaScript表达式

const element = <img src={user.avatarUrl}></img>

注意：对于同一种属性不能同时使用这两种符号

我们需要注意的是，JSX在语法上更接近于JavaScript而不是HTML，所以我们在给变量命名时，使用小驼峰命名法来定义属性的名称。

3、使用JSX指定子元素

1、如果标签内没有内容，可以使用闭合标签
2、JSX标签内可以包含很多子元素

const element = (
  <div>
    <h1>你好</h1>
    <h2>欢迎</h2>
  </div>
)

4、JSX防止XSS攻击

首先了解一下什么是XSS攻击？
XSS，即跨站脚本攻击，恶意攻击者向web网页里插入恶意HTML代码，用户浏览该网页时，嵌入的HTML代码会被执行，从而达到恶意攻击用户的特殊目的。
JSX如何防止XSS攻击？
可以安全的在JSX当中插入用户输入的内容。

const inputcontent = response.inputcontent;
const element = <h1>{inputcontent}</h1>

React DOM在渲染所有输入内容之前，默认会进行转义，所有的内容在渲染之前都被转换成了字符串，这样可以有效的防止XSS攻击。

二、元素渲染

1、元素是什么？

元素描述了你在屏幕上想看到的内容。

2、将一个元素渲染为DOM

通过ReactDOM.render()将react元素渲染到根DOM节点

const element = (<h1>hello，world</h1>)
ReactDOM.render(
  element,
  document.getElementById('root')
);

3、更新已经渲染的元素

React元素是不可变对象，一旦创建，就无法更改它的子元素或者属性。更新UI的唯一的方式就是创建一个新的元素，并将其传入ReactDOM.render()

三、组件和Props

组件允许将UI拆分为独立可复用的代码片段，每个代码片段进行独立的构思。
组件：接收任意的传参，并返回用于描述页面展示内容的React元素。

1、函数组件和class组件

函数组件

function test(props){
  return <h1>Hello,{props.name}</h1>
}

class组件

class Demo extends React.Component{
  render() {
    return <h1>Hello,{this.props.name}</h1>
  }
}

注意：组件名称必须以大写字母开头

2、Props

当React元素为自定义组件时，它会将JSX所接受的属性转换为单个对象传递给组件，这个对象称为“props”

function Test(props){
  return <h1>Hello,{props.name}</h1>
}
const element = <Test name="lisa"/>
ReactDOM.render(
  element,
  document.getElementById('root')
);