[JavaScript知识库]react的jsx与组件

一、React 简介

1、介绍

1、react是用于构建用户界面的js库。
2、react主要用于构建ui，react是MVC中的V。
3、react拥有较高的性能，代码逻辑非常简单。

2、特点

1、高效
2、灵活
3、jsx
4、组件
单向响应的数据流，react实现了单向响应的数据流，从而减少了重复代码。

3、框架对比

与其他框架的相同点，都采用了虚拟dom，数据驱动

二、JSX

1、jsx的介绍

jsx就是javsscript与xml结合的一种格式，是js语法的一种扩展，只要把html代码写在js中就是jsx。

2、特点

1、jsx执行更快，因为他在编译为js代码时进行了优化。
2、他是类型安全的，在编译过程中就能发现错误
3、使用jsx编写模板更加简单快速

3、jsx语法

var msg= “hello”；
const element = <h5>{msg}</h5>

（1）xml基本语法

• 只能有一个根标签
• 标签要闭合

（2）元素类型

• 小写首字母对应html的标签
• 注释使用/* */,html标签内注释{/**/}

（3）元素属性

• 内联样式的style，样式名以驼峰命名法表示，如font-size写成fontSize，默认像素单位是px（px不用写）
• 外部样式的class，HTML中class改为className。
• for属性改为htmlfor
• 事件名用驼峰命名法，HTML是全小写（onclick），jsx是驼峰（onClick）

（4）js表达式

使用单花括号

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

ReactDOM.render()函数

ReactDOM.render是react的最基本方法，用于将jsx写的模板转为HTML语言，并渲染到指定的HTML标签里。
总结：一个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)使用js里的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')
);

组件

react中定义组件有3种写法：函数的方式、es5的写法、es6（类）的写法

函数方式的组件

函数的返回值是jsx就行。即就是：如果一个函数的返回值是jsx，那么就可以当标签的方式使用。

// 定义组件，组件名首字母大写（大驼峰）
	function MyCom(){
		const msg="hello";
		return (
			<ul>
				<li>{msg}:三国演义</li>
				<li>{msg}:红楼梦</li>
			</ul>
		)
	}
	
	ReactDOM.render(
	    <MyCom/>, //使用组件
	    document.getElementById('box')
	);

es6（类）的写法

定义一个类，继承自React.Component，在该类里，必须有个render()函数，render（）函数返回一个jsx代码
一个普通的ES6的类，只要有一个render()函数，并且render()函数返回一个JSX，那么就是组件。

// 定义组件
class MyCom extends  React.Component{
	constructor(props){ //props：是外部传入的数据，相当于vue中的props
		super(props);
		// state是内部的数据，相当于vue中的date
		this.state={
			name:"田哥"
		}
	}

	render(){
		const msg="hello";
		return (
			<ul>
				<li>{this.state.name}:三国演义</li>
				<li>{msg}:红楼梦</li>
			</ul>
		)
	}
}

props

props是组件对外的接口，接受外部传入的数据，是组件的属性。

注意：Props对于使用它的组件内部来说，是只读的，一旦赋值不能被修改。

外部传值

<组件名 属性名1=值1 属性名2=值2 .. />

属性值=“静态值”
属性值={js数据}

组件内部使用

1）函数组件

{props.属性名}
function MyPerson(props){
	return (
		<div>
			<p>{props.name}</p>
			<p>{props.sex}</p>
		</div>
	)
}

ReactDOM.render(
	<MyPerson name="张三疯" sex="男"/>,
	document.getElementById('box')
);

2)类组件

{this.props.属性名}
class MyPerson extends React.Component{
	
	render(){
		return (
			<div>
				<p>{this.props.name}</p>
				<p>{this.props.sex}</p>
			</div>
		)
	}
}

ReactDOM.render(
	<MyPerson name="张三疯" sex="男"/>,
	document.getElementById('box')
);

补充： 如果传递数据多的话可以使用对象，但必须使用扩展用算符（…）

props 默认值

1）用 ||

function MyPerson(props){
	let sex1 = props.sex || "女";
	return (
		<div>
			<p>性别：{sex1}</p>
		</div>
	)
}
ReactDOM.render(
	<MyPerson  />,
	document.getElementById('box')
);

2) defaultProps

格式：

//1）、函数式组件和类组件都可以：

组件名.defaultProps={

    属性名: 默认值

}

//2)、若为类组件，可以在类的内部使用static修饰。

static defaultProps={
    属性名: 默认值
}

类型检查

使用prop-types

//类型约定:
组件名.propTypes={	
    属性名1:PropTypes.类型名,
    属性名2:PropTypes.类型名
}

//必传参数
propName: PropsTypes.类型名.isRequired