refs

组件内的标签可以定义ref属性来标识自己，他会返回一个dom节点

字符串写法（官方不建议使用）
！！！注：在脚手架的检查模式中会报错

class Demo extends React.Component{
    showData = ()=>{
        console.log(this.refs.input1)
    }
    render(){
        return(
            <div>
                <input ref="input1" type="text"/>
                <button onClick={this.showData}>按钮</button>
            </div>
        )
    }
}
//渲染组件到页面
ReactDOM.render(<Demo/>,document.getElementById('test'))

内联写法

//创建组件
class Demo extends React.Component{
    //展示左侧输入框的数据
    showData = ()=>{
        console.log(this.input1)
    }
    saveInput = (c)=>{
        console.log(c);
    }
    render(){
        return(
            <div>
                <input ref={c => this.input1 = c } type="text" />
                <button onClick={this.showData}>点我提示左侧的数据</button>
                {/* 页面开启默认调用一次 */}
                <input ref={this.saveInput} type="text"/>
            </div>
        )
    }
}
//渲染组件到页面
ReactDOM.render(<Demo/>,document.getElementById('test'))

React.createRef() 写法(官方推荐使用)

class Demo extends React.Component{
    /*React.createRef调用后可以返回一个容器，该容器可以存储被ref所标识的节点,该容器是“专人专用”的*/
    myRef = React.createRef()
myRef2 = React.createRef()
//展示左侧输入框的数据
showData = ()=>{
    console.log(this.myRef.current);
}
render(){
    return(
        <div>
            <input ref={this.myRef} type="text" />
            <input ref={this.myRef2} type="text" />
            <button onClick={this.showData}>点我提示左侧的数据</button>
        </div>
    )
}
}
//渲染组件到页面
ReactDOM.render(<Demo/>,document.getElementById('test'))

非受控组件

相当于单项数据流只是页面改变后台数据不会变
案例

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>1_非受控组件</title>
</head>
<body>
	<!-- 准备好一个“容器” -->
	<div id="test"></div>
	
	<!-- 引入react核心库 -->
	<script type="text/javascript" src="../js/react.development.js"></script>
	<!-- 引入react-dom，用于支持react操作DOM -->
	<script type="text/javascript" src="../js/react-dom.development.js"></script>
	<!-- 引入babel，用于将jsx转为js -->
	<script type="text/javascript" src="../js/babel.min.js"></script>

	<script type="text/babel">
		//创建组件
		class Login extends React.Component{
			handleSubmit = (event)=>{ 
				event.preventDefault() //阻止表单提交
				const {username,password} = this
				alert(`你输入的用户名是：${username.value},你输入的密码是：${password.value}`)
			}
			render(){
				return(
					<form onSubmit={this.handleSubmit}>
						用户名：<input ref={c => this.username = c} type="text" name="username"/>
						密码：<input ref={c => this.password = c} type="password" name="password"/>
						<button>登录</button>
					</form>
				)
			}
		}
		//渲染组件
		ReactDOM.render(<Login/>,document.getElementById('test'))
	</script>
</body>
</html>

受控组件

相当于双向数据绑定页面上的数据改变时后台数据也会同步改变

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>2_受控组件</title>
</head>
<body>
	<!-- 准备好一个“容器” -->
	<div id="test"></div>
	
	<!-- 引入react核心库 -->
	<script type="text/javascript" src="../js/react.development.js"></script>
	<!-- 引入react-dom，用于支持react操作DOM -->
	<script type="text/javascript" src="../js/react-dom.development.js"></script>
	<!-- 引入babel，用于将jsx转为js -->
	<script type="text/javascript" src="../js/babel.min.js"></script>

	<script type="text/babel">
		//创建组件
		class Login extends React.Component{

			//初始化状态
			state = {
				username:'', //用户名
				password:'' //密码
			}

			//保存用户名到状态中
			saveUsername = (event)=>{
				this.setState({username:event.target.value})
			}

			//保存密码到状态中
			savePassword = (event)=>{
				this.setState({password:event.target.value})
			}

			//表单提交的回调
			handleSubmit = (event)=>{
				event.preventDefault() //阻止表单提交
				const {username,password} = this.state
				alert(`你输入的用户名是：${username},你输入的密码是：${password}`)
			}

			render(){
				return(
					<form onSubmit={this.handleSubmit}>
						用户名：<input onChange={this.saveUsername} type="text" name="username"/>
						密码：<input onChange={this.savePassword} type="password" name="password"/>
						<button>登录</button>
					</form>
				)
			}
		}
		//渲染组件
		ReactDOM.render(<Login/>,document.getElementById('test'))
	</script>
</body>
</html>

高阶函数柯里化

高阶函数的条件

高阶函数：如果一个函数符合下面2个规范中的任何一个，那该函数就是高阶函数。
		 1.若A函数，接收的参数是一个函数，那么A就可以称之为高阶函数。
		 2.若A函数，调用的返回值依然是一个函数，那么A就可以称之为高阶函数。
	常见的高阶函数有：Promise、setTimeout、arr.map()等等
	函数的柯里化：通过函数调用继续返回函数的方式，实现多次接收参数最后统一处理的函数编码形式。 
		function sum(a){
			return(b)=>{
				return (c)=>{
					return a+b+c
				}
			}
		}
调用方法 sun(1)(2)(3)	最终返回一个6

案例

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>高阶函数_函数柯里化</title>
</head>
<body>
	<div id="test"></div>
	<script type="text/javascript" src="../js/react.development.js"></script>
	<script type="text/javascript" src="../js/react-dom.development.js"></script>
	<script type="text/javascript" src="../js/babel.min.js"></script>
	<script type="text/babel">
		//创建组件
		class Login extends React.Component{
			//初始化状态
			state = {
				username:'', //用户名
				password:'' //密码
			}
			//保存表单数据到状态中
			saveFormData = (dataType)=>{
				return (event)=>{
				// 注：以变量形式当键名的时候一定要用中括号包起来不然他不会当变量解析而回直接使用
					this.setState({[dataType]:event.target.value})
				}
			}
			handleSubmit = (event)=>{
				event.preventDefault() //阻止表单提交
				const {username,password} = this.state
				alert(`你输入的用户名是：${username},你输入的密码是：${password}`)
			}
			render(){
				return(
					<form onSubmit={this.handleSubmit}>
						用户名：<input onChange={this.saveFormData('username')} type="text" name="username"/>
						密码：<input onChange={this.saveFormData('password')} type="password" name="password"/>
						<button>登录</button>
					</form>
				)
			}
		}
		ReactDOM.render(<Login/>,document.getElementById('test'))
	</script>
</body>
</html>

不用函数柯里化的实现

他是利用函数传参的方式用函数调用函数达到既可以传参有可以拿到event事件对象的方法

案例

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>2_不用函数柯里化的实现</title>
</head>
<body>

	<div id="test"></div>
	<script type="text/javascript" src="../js/react.development.js"></script>
	<script type="text/javascript" src="../js/react-dom.development.js"></script>
	<script type="text/javascript" src="../js/babel.min.js"></script>
	<script type="text/babel">
		class Login extends React.Component{
			state = {
				username:'', //用户名
				password:'' //密码
			}
			//保存表单数据到状态中
			saveFormData = (dataType,event)=>{
				this.setState({[dataType]:event.target.value})
			}
			//表单提交的回调
			handleSubmit = (event)=>{
				event.preventDefault() //阻止表单提交
				const {username,password} = this.state
				alert(`你输入的用户名是：${username},你输入的密码是：${password}`)
			}
			render(){
				return(
					<form onSubmit={this.handleSubmit}>
						用户名：<input onChange={event => this.saveFormData('username',event) } type="text" name="username"/>
						密码：<input onChange={event => this.saveFormData('password',event) } type="password" name="password"/>
						<button>登录</button>
					</form>
				)
			}
		}
		//渲染组件
		ReactDOM.render(<Login/>,document.getElementById('test'))
	</script>
</body>
</html>

组件传参

父传子用props传递

class Person extends React.Component{
    render(){
        return (
           <div>
                父组件
                <Zi name="张三" />
            </div>
        )
    }
}
class Zi extends React.Component{
    showData=()=>{
        console.log(this.props.name)
    }
    render(){
        return (
           <div>
                子组件
                <button onClick={this.showData}>按钮</button>
            </div>
        )
    }
    
}
ReactDOM.render(<Person/>,document.getElementById('app'))

子传父同样使用props不过传递的东西变为了函数

```js
class Person extends React.Component{
	fun=(data)=>{
		console.log(data)
	}
    render(){
        return (
           <div>
                父组件
                <Zi sj={this.fun} />
            </div>
        )
    }
}
class Zi extends React.Component{
	state={
		name:"张三"
	}
    showData=()=>{
        console.log(this.props.sj(this.state.name))
    }
    render(){
        return (
           <div>
                子组件
                <button onClick={this.showData}>按钮</button>
            </div>
        )
    }
    
}
ReactDOM.render(<Person/>,document.getElementById('app'))