react生命周期(类组件/函数组件)操作代码
作者：南玖i
react代码模式分为两种类组件和函数组件(生命周期也有所不同),这篇文章主要介绍了react生命周期(类组件/函数组件),需要的朋友可以参考下
1.react代码模式分为两种 类组件和函数组件（生命周期也有所不同）
2.类组件（写法如下）
import React from 'react'
export default class App1 extends React.Component{
state = {
username:'',
password:''
}
setUser = (event) => {
this.setState({username:event.target.value})
}
setPass = (event) => {
this.setState({password:event.target.value})
}
Submit = () => {
console.log(this.state.username , this.state.password)
}
render(){
return(
<>
<input type="text" value={this.state.username} onChange={this.setUser}/>
<input type="text" value={this.state.paddword} onChange={this.setPass}/>
<button onClick={this.Submit}>登录</button>
</>
)
}
}3.函数组件
import { useState ,useEffect} from "react"
function App1 (){
const [username ,setUsername] = useState('')
const [password ,setPassword] = useState('')
const setChange = event => {
setUsername(event.target.value);
};
const setChangePassWold = event => {
setPassword(event.target.value);
};
const Submit = () =>{
console.log(username,password)
}
return(
<>
<input value={username} onChange={setChange}></input>
<input value={password} onChange={setChangePassWold}></input>
<button onClick={Submit}>登录</button>
</>
)
}
export default App1以上是两种模式的写法展示
4.类组件和函数组件的区别：
- 类组件：state定义状态变量，有继承，而且是oop模式（面向对象编程）
- 类组件缺点：复用性不如函数组件，比较难拆分
- 函数组件：根基是FP（函数式编程）, 没有this指向，使用一些列Hooks实现对应的功能
- 函数式组件缺点：不具备处理错误的边界等业务情况的Hooks
5.生命周期
A.类组件生命周期（三个阶段：挂载阶段，更新阶段，卸载阶段）
挂载阶段执行顺序
1.constructor
2.componentWillMount
3.render
4.componentDidMount
更新阶段执行顺序
1.shouldComponentUpdate
2.componentWillUpdate
3.render
4.componentDidUpdate
销毁阶段
componentWillUnmount
实际操作如下
import React from "react";
import {Link} from 'react-router-dom'
class Demo extends React.Component{
constructor(props){
super(props)
console.log("constructor")
}
state = {
num:1
}
UNSAFE_componentWillMount(){
console.log("componentWillMount")
}
componentDidMount(){
console.log("componentDidMount")
}
shouldComponentUpdate(){
console.log('shouldComponentUpdate')
return true
}
UNSAFE_omponentWillUpdate(){
console.log("componentWillUpdate")
}
componentDidUpdate(){
console.log("componentDidUpdate")
}
componentWillUnmount(){
console.log("componentWillUnmount")
}
Submit = () => {
this.setState({num:this.state.num+=1})
}
render(){
console.log('render')
return(
<>
<Link to='/app1'>App1</Link>
//这里替换成自己的即可
<h3>{this.state.num}</h3>
<button onClick={this.Submit}>改变</button>
</>
)
}
}
export default Demo
更新阶段
B.函数组件生命周期，函数组件本质没有生命周期，但是我们通过Hooks来模仿类组件当中的生命周期（也是三个阶段）
import { useState ,useEffect} from "react"
import {Link} from 'react-router-dom'
function App1 (){
const [username ,setUsername] = useState('')
const [password ,setPassword] = useState('')
const setChange = event => {
setUsername(event.target.value);
};
const setChangePassWold = event => {
setPassword(event.target.value);
};
const Submit = () =>{
setUsername('')
console.log(username,password)
}
// useEffect = vue mounted 区别是只要视图更新就变化 感觉类似watch 但是他又是初始化的 时候第一个
// useEffect(()=>{},[])
useEffect(()=>{
console.log('模拟componentDidMount第一次渲染')
return () =>{
console.log('模拟componentWillUnmount执行销毁后')
}
},[password])
return(
<>
<Link to='/home1'>home1</Link>
//这里需要修改成自己的路径
<input value={username} onChange={setChange}></input>
<input value={password} onChange={setChangePassWold}></input>
<button onClick={Submit}>登录</button>
</>
)
}
export default App1//useEffect是react给我们的Hooks 我们可以使用它来模拟正常的生命周期流程
useEffect(()=>{},[]) 是他的格式 ，第二个参数是需要监听谁的变化就写谁，也可以不写
到此这篇关于react生命周期（类组件/函数组件）的文章就介绍到这了,更多相关react生命周期内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！