React基础知识（事件处理、受控组件与非受控组件、高阶函数、组件的生命周期）（三）
系列文章目录
第一章：React基础知识（React基本使用、JSX语法、React模块化与组件化）（一）
第二章：React基础知识（组件实例三大核心属性state、props、refs）（二）
第三章：React基础知识（事件处理、受控组件与非受控组件、高阶函数、组件的生命周期）（三）
第四章：React脚手架应用（创建脚手架、代理配置、ajax相关、组件通信）（四）
第五章：react-router5路由相关一（路由相关概念、基本使用、NavLink与NavLink的封装、Switch的使用、严格匹配、路由重定向、路由组件与一般组件的区别）（五）
第六章：react-router5路由相关二（嵌套路由、路由传参、replace、编程式路由导航、withRouter的使用、BrowserRouter与HashRouter的区别）（六）
第七章：React-Router6路由相关一（路由的基本使用、重定向、NavLink·、路由表、嵌套路由）（七）
第八章：React-Router6路由相关二（路由传参、编程式路由导航、路由相关hooks）（八）
第九章：React相关扩展一（setState、lazyLoad、Hooks相关）（九）
文章目录
- 系列文章目录
-
- 一、事件处理
- 二、收集表单数据
-
- 2.1 非受控组件
- 2.2 受控组件
- 三、高阶函数
-
- 3.1 函数柯里化
- 3.2 不使用函数柯里化
- 四、组件的生命周期
-
- 4.1 react生命周期（17以前的旧版本）
- 4.2 react生命周期（17以后的新版本，主要看这个）
-
- 4.2.1. 即将废弃的勾子
为了简化代码，以下代码片段，除了有新的库需要引入会特意说明，其他引入react相关库的操作不再重复说明
一、事件处理
- 通过
onXxx属性指定事件处理函数(注意大小写)- React使用的是自定义(合成)事件, 而不是使用的原生DOM————为了更好的兼容性
- React中的事件是通过事件委托方式处理的(委托给组件最外层的元素) ————为了的高效
- 可以通过
event.target得到发生事件的DOM元素对象(触发事件的对象就是你当前需要获取的对象) ————不要过度使用ref
代码片段：
<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 Demo extends React.Component {
myRef = React.createRef();
myRef2 = React.createRef()
showData = () => {
// console.log(this.myRef)
alert(this.myRef.current.value)
}
showData2 = (event) => {
alert(event.target.value)
}
render() {
return (
<div>
<input ref={this.myRef} type="text" placeholder="点击按钮提示数据" />
<button ref='btn' onClick={this.showData}>点我提示左侧数据</button>
<input type="text" placeholder="失去焦点提示数据" onBlur={this.showData2} />
</div>
)
}
}
ReactDOM.render(<Demo />, document.getElementById('test'));
script>
body>
html>
运行结果：
二、收集表单数据
2.1 非受控组件
要编写一个非受控组件，而不是为每个状态更新都编写数据处理函数，你可以使用 ref 来从 DOM 节点中获取表单数据。在非受控组件中，你经常希望 React 能赋予组件一个初始值， 但是不去控制后续的更新。 在这种情况下，你可以指定一个 defaultValue 属性，而不是value。
简单的话说就是：仅仅获取用户输入得值，不绑定给state，现用现取
代码片段：
<body>
<div id="test">div>
<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>
运行结果：
2.2 受控组件
在 HTML 中，表单元素(如 、