首页 >编程 >正文

react生命周期(类组件/函数组件)操作代码

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

react生命周期(类组件/函数组件)操作代码

更新阶段

react生命周期(类组件/函数组件)操作代码

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生命周期(类组件/函数组件)的文章就介绍到这了,更多相关react生命周期内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

网友评论

验证码 换一张
取 消
暂无评论...
三日内热门评论文章
关键词
为您推荐
  • 相关阅读
  • 业界资讯
  • 手机通讯
  • 电脑办公
  • 新奇数码
  • 软件游戏
  • 科学探索