一、React是什么
React是用于构建用户界面的JS库，是一个将数据渲染为HTML视图的开源JS库
为什么学？
（1）原生JS操作DOM繁琐，效率低
（2）使用JS直接操作DOM，浏览器会进行大量的重绘重排
（3）原生JS没有组件化编码方案，代码复用低
八、高阶函数
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><div id = "div"></div></body>
<!-- 引入依赖 ,引入的时候，必须就按照这个步骤-->
<script src="../React-js/react.development.js" type="text/javascript"></script>
<script src="../React-js/react-dom.development.js" type="text/javascript"></script><script src="../React-js/babel.min.js"></script><!--引入对于组件标签的限制-->
<script src="../React-js/prop-types.js"></script><script type="text/babel">/*高级函数：1.如果函数的参数是函数2.如果函数返回一个函数函数的珂里化：通过函数调用继续返回函数的方式，实现多次接收参数最后统一处理的函数编码形式
*/class Login extends React.Component{login = (event) =>{event.preventDefault(); //阻止表单提交console.log(this.name.value);console.log(this.pwd.value);}state = {name:"",pwd:""};saveType = (type) =>{return (event) => {this.setState({[type]:event.target.value});}}//因为事件中必须是一个函数，所以返回的也是一个函数，这样就符合规范了render() {return (<form action="http://www.baidu.com" >用户名：<input onChange = {this.saveType('username')} type = "text" name ="username"/>{/*直接调用回调函数也是可以的：将数据传递过去就可以*/}用户名：<input onChange = {(event)=>{this.saveType('name',event)}} type = "text" name ="username"/>密码<input onChange = {this.saveType('password')} type = "password" name ="password"/><button>登录</button></form>)}}ReactDOM.render(<Login />,document.getElementById("div"));
</script>
</html>注意：
1、<input onChange = {this.saveType('name')} type = "text" name ="username"/>在React中如果调用函数比如代码中this.saveType不加括号，会将该函数返回，下次发生onChange就会调用该函数；如果是this.saveType()加了括号，那么该函数在渲染时就会执行一次，而且返回的是该函数的返回值，所以上述代码中saveType函数中返回了一个回调函数来实现返回函数的效果
2、无论是在箭头函数还是普通函数中，如果我们不传入任何参数时，函数都会默认追加一个event参数
3、saveType = (type) =>{
return (event) => {
this.setState({[type]:event.target.value});
}
}
在JavaScript中，使用方括号 [] 来表示变量名通常是为了实现动态属性名。
在该函数中如果type没加方括号，会被认作字符串（允许字符串不加引号）
4、event参数是当React调用函数时传入的参数，而saveType不是由React调用的，所以不能接收到event参数，故需要使用高阶函数
saveType 函数是由开发者在组件类中调用的，用于生成具体的事件处理函数
在React中，事件处理函数的调用是由React框架在事件发生时自动进行的，并且会向事件处理函数传递一个事件对象作为参数。这个事件对象包含了事件相关的信息，比如事件类型、目标元素、触发事件的元素等。
这里是为什么 event 必须在返回的回调函数中接收的原因：
（1）事件驱动：在JavaScript中，事件处理是基于事件驱动的模型。当用户与页面交互时（如点击按钮、输入文本等），事件系统会创建一个事件对象并将其传递给注册的事件处理函数。
（2）函数调用上下文：saveType 函数在定义时不知道何时会被调用，也不知道将与哪个具体事件相关联。因此，它不能接收 event 参数，因为它需要在具体的事件处理上下文中被调用。
（3）高阶函数：saveType 作为一个高阶函数，其目的是创建并返回一个新的函数，这个新函数将在具体的事件处理上下文中被调用，并且接收 event 对象作为参数。
（4）闭包：返回的函数会捕获 saveType 调用时的上下文，包括 this 的值和任何在 saveType 被调用时已经定义的变量。这样，即使在不同的事件处理中使用返回的函数，它也能保持对 this 和 type 的正确引用。
（5）灵活性和复用性：通过将 event 作为返回函数的参数，saveType 函数可以被复用于不同的事件和不同的属性，只需在创建时指定不同的 type。
5、<input onChange = {(event)=>{this.saveType('name',event)}} type = "text" name ="username"/>改写法也可将event,以及name参数共同传入saveType
6、this.saveType('password')不是传入了一个字符串参数吗
这里确实是传入了一个字符串，然后调用一个高阶函数saveType,返回实际处理事件的回调函数，而在 setState 调用中，使用方括号 [type] 是一种动态属性名的语法，它允许你使用变量 type 作为属性名
)
