React 基础语法

React简介

概念：React是一个将数据渲染为HTML视图 的js库

React 原生js写法的痛点:

用dom的API去操作dom，繁琐且效率低
用js直接操作dom，浏览器会进行大量的回流和重绘
原生js没有组件化的编程方案，代码复用性低，哪怕有模块话的概念，但模块化也只能拆解一个个js，对样式和结构也没办法拆解，组件化就相当于3剑客整体拆解，成为一个个的小功能

React特点

采用组件化模式，声明式编码，提高开发效率和组件复用性
在React Native中可以用react预发进行安卓、ios移动端开发
使用虚拟dom和有些的diffing算法，尽量减少与真实dom的交互，提高性能

JSX语法

• 定义虚拟dom时不要用引号
• 标签中引入js表达式要用{}
• 如果在jsx要写行内样式需要使用style={{coler：red}}形式
• 样式的类名指定不能写class，要写className;
• 只有一个根标签 标签必须闭合 标签首字母
  ①若小写字母开头，则会将该标签转为html同名标签，如果没找到，则会报错；
  ②若大写字母开头，则会认为是组件，它就会去找对应的组件，如果没找到，就会报组件未定义的错误；

函数组件与类组件的区别

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

模板语法

/* 普通写法 */
//{文本内容}
/* html写法 */
var str2 = "我起飞咯"
<div dangerouslySetInnerHTML={{__html:str2}}></div>
/* 条件渲染 */
var islog = true
{islog?<h3>来了老弟儿</h3>:<h3>出去吧</h3>}
/* 列表渲染 */
var list = ["react","js","angular","jQuery"]
{
	list.map(item=>(<p key={item}>{item}</p>))
}

事件

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

state

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

// 表单的数据绑定
<input type='text' value={this.state.msg} onChange={this.updateMsg} />
updateMsg = e=>this.setState({msg:e.target.value})

组件

定义时组件 （代码首字母大写）

// 导入组件
import Steper from './components/Steper'
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

子传父

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

默认参

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

Dom引用

// 创建dom引用方法
import createRef from 'react'
// 创建dom引用
var inp = createRef()
// 引用
<p ref={}></p>ref
// 获取值
inp.current.value'
//inp.current当前引用的dom节点