学习笔记（1）第一次使用react

1，react简介

  react组件文件：react中，一个组件由两个文件构成：xxx.jsx(组件的模板和逻辑)和xxx.css(组件的样式)，react中没有组件样式隔离，所以组件的class要以组件名字开头，方式组件样式冲突。
  react模块是react框架的核心代码，其中包括了组件类和数据渲染的相关代码。

import React from 'react';

  react-dom模块是react在浏览器环境中运行的依赖模块，其中包含了将react组件和虚拟DOM以及真实DOM结合的代码。react除了可以和react-dom配合开发前端页面，还可以和react-native配合开发手机APP。

import ReactDOM from 'react-dom';

1.1，jsx语法

  Jsx语法：jsx是js和html混用的一种语法。在jsx中，一段html内容可以视为一个表达式，赋值给变量，或者做为函数调用的参数，或者作为函数的返回值，表达式的值是这段html所创建出的DOM。
react开发，使用的是jsx语法。
ReactDOM.render方法，把第一个参数的html内容渲染到第二个参数的DOM节点中。

ReactDOM.render(<App/>,document.getElementById('root'));

1.2，react函数组件

react函数组件只能声明组件的模板和使用传值，不能使用组件的数据、方法、生命周期函数等。
使用组件时，导入组件的jsx文件就可以直接使用。

import MyCom from "./components/MyCom/MyCom.jsx";

react中，一个组件的数据类型可以是一个函数，函数中返回组件的模板，这种组件叫做函数组件。

function App() {
 // 组件的模板只能有一个根标签。
 return (
// 在jsx语法中，class用于声明一个类，所以在标签中设置class要使用className
   <div className="App">
     <MyCom 
        str="abc123" 
// jsx中，html中可以通过{}嵌入js代码，表达式的值会被渲染到html中
         num={123}
      ></MyCom>
      <NumCtrl></NumCtrl>
   	</div>
);}

react中没有类似vue的计算结果，页面中绑定衍生数据时需要绑定方法调用。

<p>{this.fullName()}</p>

react组件的数据不能直接修改，否则页面不渲染，需要使用this.setState方法进行修改。

this.setState({
 num:e.target.value*1  });

2，生命周期钩子函数

1. 组件创建并渲染完毕时调用。相当于vue的mounted

componentDidMount(){}

2. 组件已经更新时调用 ,相当于vue的updated

componentDidUpdate(){ }

3. 组件将要受到传值时或传值发生变化时调用

componentWillReceiveProps(){}

4. 组件将要卸载时调用，相当于vue的destroyed

componentWillUnmount(){}

3，react条件渲染，列表渲染

react中使用 && 实现条件渲染

{this.state.show&&<p>条件渲染</p>}

//也可以使用三目运算符实现条件渲染
{this.state.show?<p>真</p>:<p>假</p>}

react组件中使用数组的map方法实现列表渲染

{this.state.list.map(el=>(
	<tr>
		<td>{el.name}</td>
		<td>{el.age}</td>
		<td>{el.online?"在线":"离线"}</td>
	</tr>
))}

4，react类组件

react声明一个组件需要 声明一个类并且继承于React.Component类。

class NumCtrl extends React.Component{}

constructor组件类的构造函数，构造函数的参数是组件接收的传值。

constructor(props){
	// 构造函数中要先通过super调用父类构造函数。
	super(props);
	console.log(props);
	// 构造函数中的this就是正在创建的组件
	// console.log(this);
	
	// 组件对象中的props属性中记录的是组件接收的传值。
	// console.log(this.props);
	
	// 组件对象的state属性中存储组件的数据
	this.state = {
		txt:"hello",
		age:99
	}
}

通过组件类的render方法设置组件的模板，render函数返回组件的模板。

render(){
	return (
	<div>
		<div>
			{/* react组件模板中使用onXxxxx绑定时间，和原生方法类似，但是名字使用的是驼峰命名 */}
			{/* 格式 onXxxxx={this.yyyyyy} */}
			{/* <button onClick={this.btnClick}>-</button> */}
			{/* react标签事件绑定方法名后不能加(),如果要自定义传参，需要嵌套
			一层箭头函数，在箭头函数中进行组件方法调用，就可以传参 */}
			<button onClick={e=>{
			this.btnClick("-");
			}}>-</button>
			{/* 组件中可以使用传值数据，格式 {this.props.xxxx} */}
			<span>{this.props.value}</span>
			<button onClick={e=>{
			this.btnClick("+");}}>+</button>
		</div>
		{/* 组件的模板中可以使用组件的数据，格式 {this.state.xxxx} */}
		<p>文本:{this.state.txt},龄:{this.state.age}</p>
 	</div>)
}

5，class和style绑定

react的模板中标签的style属性可以绑定一个对象。

	<p style={this.txtStyleObj()}></p>
	txtStyleObj(){
		return {
		color:this.state.color,
		fontSize:"30px",
		// "font-weight":"bold"
		fontWeight:"bold"
	}}

className不能直接绑定数组，可以通过数组.join转为字符串之后绑定。

<p className={this.txtClassArr()}</p>
txtClassArr(){
return ["pink-color","bold","yellow-bg"].join(" ");
}

className也不能直接绑定对象，需要将对象转为字符串之后绑定。

<p className={this.txtClassObj()}</p>
txtClassObj(){
		let o = {
		"pink-color":true,
		bold:true,
		"yellow-bg":false}
		
		let arr = [];
		for(let k in o){
		if(o[k]){
		arr.push(k);
	}}
	return arr.join(" ");
}