React小玩意儿

react是用来构建用户界面的JavaScript库

一、jsx语法

1. 需要在{}写js表达式；
2. 注释需要{/* 注释内容 */}；
3. className添加类名（代码展示如下）

// 样式写在App.css里
//引入css
import './App.css'
.active{
	color: #f70;
}
<h1 className='active'> 你好, react </h1>

4. 样式对象自动展开（代码展示如下）

var styles = {
	fontSize : '48px',
	textAlign:'center',
	color:'green'
}
<p style={styles}>学好react,月薪过百万</p>

5. 数组里面可以定义html标签,自动展开(代码展示如下)

//定义一个数组
var arr = [
	<h2>我是老大</h2>,
	<p>我就是个p标签</p>,
	<a href='http://www.baidu.com'>百度一下</a>
]
{arr}

6. 有且只有一个根节点
7. html与js混合写法称为jsx
8. jsx方便在js中嵌套heml模板,最终还是会被编译成js被浏览器识别

二、React的组件

1.函数组件

1. 创建函数组件(代码展示如下)

function App() {
	// 创建个App类
	return <div>
		</div>
}
export default App

2.类组件

1. 创建类组件(代码展示如下)

import React, { Component } from 'react'
class App extends Component {
   constructor(props){
  super(props);
}
state = {num:5}
 render(){
return ( <div>
</div>);
}
}
export default App;

3.类组件与函数组件的区别

1. 函数组件通常展示,类组件通常作为容器
2. 类组件可以有state管理数据,函数组件没有state
3. 函数组件没有this,类组件有this
4. 函数组件没有生命周期,类组件没有生命周期

三、模板语法

1.文本渲染

1. 普通写法(代码展示如下)

//{文本内容}

2. html文本写法

var str2 = "我起飞咯"
<div dangerouslySetInnerHTML={{__html:str2}}></div>

2.条件渲染

var islog = true
{islog?<h3>来了老弟儿</h3>:<h3>出去吧</h3>}

3.列表渲染

var list = ["react","js","angular","jQuery"]
{
	list.map(item=>(<p key={item}>{item}</p>))
}

四、事件

1. 和原生js事件一致,事件用驼峰式
2. onclick~onClick onmouse~onMouse
3. 事件总是要响应一个函数

事件响应

<h1 onClick={()=>{alert("abc)}}></h1>
//事件响应 箭头函数
doit = ()=>{"你好"}

<h1 onClick={this.doit}></h1>
//事件响应定义好得函数

事件传参

<p onClick={this.doit.bind(this,"河南")}>-传参</p>
<p onClick={()=>this.doit("是中国不可分割得一部分")}>统一-传参</p>

五、state

1. react组件得状态/数据
2. this.setState({k:新的值})
3. 当state发生变化,引用state得视图会自动更新

表单的数据绑定

<input type='text' value={this.state.msg} onChange={this.updateMsg} />

updateMsg = e=>this.setState({msg:e.target.value})

六、组件

1. 定义组件(代码展示如下)

src/components/Steper.js
// 组件要求首字母大写

2. 导入组件

import Steper from './components/Steper'

stepr小实例

// 组件
import React, { Component } from 'react'
class Steper extends Component {
    constructor(props) {
        super(props);
		this.state={
			count:props.num
		}
    }
	updateCount =(e)=>{
		if(e.target.value*1>=1 && e.target.value*1<=9){
		this.setState({count:e.target.value})
		// 执行父组件的updateSize方法,从而更新
		this.props.updateSize(e.target.value)	
		}else{
			return
		}

	}
	min=()=>{
		if(this.state.count*1-1>=1){
			this.setState({count:this.state.count*1-1})
			this.props.updateSize(this.state.count*1-1)
		}
		return
	}
	add=()=>{
		if(this.state.count*1+1<=9){
		    this.setState({count:this.state.count*1+1})
		    this.props.updateSize(this.state.count*1+1);
		}
		return ;
	}
	
    render() { 
        return ( <span>
			<button onClick={this.min}>-</button>
			<input 
			type="text" 
			 onChange={this.updateCount}
			value={this.state.count} 
			 />
			<button onClick={this.add}>+</button>
		</span> );
    }
}
 Steper.defaultProps = {
	 num:1
 }
export default Steper;
// App.js
import React, { Component } from 'react'
// 导入组件
import Steper from './components/Steper'
class App extends Component {
    // constructor(props) {
    //     super(props);
    // }
    state = { 
		msg:'',
		size:100
	}
	// 父组件定义一个size的方法
	updateSize = n=>this.setState({size:n})
	// 用箭头函数保障this正确性
	// 事件对象input 对象对应的值
	// updateMsg = e=>this.setState({msg:e.target.value})
    render() { 
        return ( <div>
			{/*<h1>表单数据得绑定</h1>
			<p>{this.state.msg} 把方法通过props方式传递给了子组件👇</p>
			<input type='text' value={this.state.msg} onChange={this.updateMsg} />*/}
			<Steper num={this.state.size} updateSize={this.updateSize}></Steper><br/>
			<Steper num={10}></Steper><br/>
			<Steper></Steper>
			<div style={{border:"1px solid red",width:this.state.size+"px",height:this.state.size+"px"}}>
			{this.state.size}
			</div>
		 </div> );
    }
}
 
export default App;

七、参数传参

父传子

//父组件传递
<Steper num={5}></Steper>
//子组件接受
props.num

默认参

 Steper.defaultProps = {
	 num:1
 }

子传父,执行父组件得传递过来得props回调函数,子传父:执行回调函数

//父组件
//定义函数并把函数传递给子组件
updateSize = n=>this.setState({size:n})
<Steper num={this.state.size} updateSize={this.updateSize}></Steper>
//子组件
//执行
props.updateSize()
//相当于执行父组件的updateSize方法

传参小图解

八、组件的设计

1.容器组件

1. 一个页面,一个容器组件
2. 有state,处理state方法
3. 类组件

2.视图组件

1. 显示内容,一个视图组件
2. 只有props没有state
3. 函数组件

九、DOM引用

1. 创建dom引用的方法

import createRef from 'react'

2. 创建dom引用

var inp = createRef()

3. 引用

<p ref={}></p>ref

4. 获取值

inp.current.value'
//inp.current当前引用的dom节点