一、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 作为属性名
7、jsx语法问题：为什么回调函数要写箭头函数，而不是直接写函数
因为回调函数this会丢失，this 并不会指向 MyComponent 的实例，而是指向了全局对象（在非严格模式下）或者 undefined（在严格模式下）。这是因为在 JavaScript 中，普通函数的 this 是在调用时绑定的，而不是在定义时，handleClick 事件处理器在回调时 this 指向的是触发事件的 DOM 元素，而不是组件实例。而使用箭头函数可以避免这个问题，因为箭头函数没有自己的 this 上下文，它们会捕获定义时所在上下文的 this 值
所以箭头函数的函数体内的this对象，就是定义时所在的实例对象，而不是使用时所在的对象
//存在this指向问题
class MyComponent extends React.Component {
handleClick() {
console.log(this);
}
render() {
return <button onClick={this.handleClick}>Click me</button>;
}
}
方法一：使用.bind显示绑定
class MyComponent extends React.Component {
handleClick() {
console.log(this); // 这里 this 会指向 MyComponent 的实例
}
render() {
return <button onClick={this.handleClick.bind(this)}>Click me</button>;
}
}
方法二：使用箭头函数
class MyComponent extends React.Component {
handleClick = () => {
console.log(this);
}
render() {
return <button onClick={() => this.handleClick()}>Click me</button>;
}
}
