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

四、传参

1、父组件向子组件通信

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

class Son extends React.Component{
	constructor(props){
	    super(props)
	}
    render(){
        return (
            <div>{this.props.name}</div>
        );
    }
}
function Father(){
	return <Son name={'hhh'}></Son>
}

2、子组件向父组件通信（子组件是通过调用父组件向子组件传递的方法来向父组件通信的）

class Son extends React.Component {
    constructor(){
        super();
        this.state = {
            inputValue:''
        }
    }
    //点击调用handleClick，触发父组件传递的getdata方法
    handleClick(){
        this.props.getdata(this.state.inputValue);
    }
    render(){
        return (
            <div>
                <button onClick={()=>{this.handleClick()}}>点击获取数据</button>
            </div>
        );
    }
 
}
 
export default Son;

class Parent extends React.Component {
    constructor(){
        super();
        this.state = {
            mess: '' //初始化mess属性
        }
    }
    getDatas(msg){
        this.setState({
            mess: msg
        });
    }
    render(){
        return (
            <div>
            	//向子组件传递getdata方法，可以调用getDatas方法
                <Son getdata={()=>{ this.getDatas() }}></Son>
            </div>
        );
    }
 
}