开启掘金成长之旅！这是我参与「掘金日新计划 · 12 月更文挑战」的第9天，点击查看活动详情
前言
昨天学习了React的元素和组件的相关概念，今天就来继续学习组件有关的相关知识：生命周期、事件处理等~
生命周期
React提供了很多组件相关的钩子函数，以便我们实现各种自定义功能。
一个组件的生命周期通常被分为三部分：
- Mounting(挂载)：已插入真实 DOM
- Updating(更新)：正在被重新渲染
- Unmounting(卸载)：已移出真实 DOM
下面是官方的一张生命周期图
通常我们常用的构造函数也就是：componenDidMount和componentWillUnmount和render。
下面来学习一下常用的钩子函数
- constructor()：该函数就是我们所定义的构造函数，他会在React挂载之前被调用，通常用来初始化参数和接受props。
- render()：该方法是每个class组件都一定要实现的方法，用来返回相关元素。
- componenDidMount()：该方法在组件挂载进dom树后执行。
- componentWillUnmount()：在组件被卸载或者销毁之前会调用该方法。
class MyLifeCycle extends React.Component {
constructor(props) {
super( props );
console.log( "执行constructor" );
}
render() {
console.log( "执行render()" );
return (
// DOM
);
}
componentDidMount() {
console.log( "执行componentDidMount()" );
}
componentWillUnmount() {
console.log( "componentWillUnmount()" );
}
}
const root = ReactDOM.createRoot( document.getElementById( "root" ) );
root.render( <MyLifeCycle/> )
// 执行constructor
// 执行render()
// 执行componentDidMount()
React事件处理
React的元素同样可以添加相关事件处理，不过需要注意事件的命名是采用小驼峰命名方法，例如：
- 传统dom元素：onclick()，onfocus()，onkeydown()
- React元素:onClick()，onFocus()，onKeyDown()
需要注意当我们定义事件处理函数时，需要处理this参数，例如下面的代码
class MyEventHandle extends React.Component {
constructor(props) {
super( props );
this.state = {
name:"default"
}
}
handle(){
this.setState(state=>({
name:"Tom"
}))
}
render() {
return (
<div onClick={this.handle}>hello</div>
);
}
}
const root = ReactDOM.createRoot( document.getElementById( "root" ) );
root.render( <MyEventHandle /> )
// 会抛出TypeError: Cannot read properties of undefined (reading 'setState')
这是由于组件函数不会默认绑定this参数，因此通常我们的方法定义使用lambda语法来实现this绑定
handle = ()=>{
this.setState(state=>({
name:"Tom"
}))
}
当我们需要将事件的值传给处理函数时，也通常是使用lambda的写法
<button onClick={(e) => this.handle(e)}>处理元素</button>
