react生命周期(類組件/函數(shù)組件)操作代碼
1.react代碼模式分為兩種 類組件和函數(shù)組件(生命周期也有所不同)
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.函數(shù)組件
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.類組件和函數(shù)組件的區(qū)別:
- 類組件:state定義狀態(tài)變量,有繼承,而且是oop模式(面向?qū)ο缶幊蹋?/li>
- 類組件缺點:復用性不如函數(shù)組件,比較難拆分
- 函數(shù)組件:根基是FP(函數(shù)式編程), 沒有this指向,使用一些列Hooks實現(xiàn)對應的功能
- 函數(shù)式組件缺點:不具備處理錯誤的邊界等業(yè)務情況的Hooks
5.生命周期
A.類組件生命周期(三個階段:掛載階段,更新階段,卸載階段)
掛載階段執(zhí)行順序
1.constructor
2.componentWillMount
3.render
4.componentDidMount
更新階段執(zhí)行順序
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.函數(shù)組件生命周期,函數(shù)組件本質(zhì)沒有生命周期,但是我們通過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 區(qū)別是只要視圖更新就變化 感覺類似watch 但是他又是初始化的 時候第一個 // useEffect(()=>{},[]) useEffect(()=>{ console.log('模擬componentDidMount第一次渲染') return () =>{ console.log('模擬componentWillUnmount執(zhí)行銷毀后') } },[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(()=>{},[]) 是他的格式 ,第二個參數(shù)是需要監(jiān)聽誰的變化就寫誰,也可以不寫
到此這篇關(guān)于react生命周期(類組件/函數(shù)組件)的文章就介紹到這了,更多相關(guān)react生命周期內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
解決React報錯`value` prop on `input` should&
這篇文章主要為大家介紹了React報錯`value` prop on `input` should not be null解決方法詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪2022-12-12Shopee在React?Native?架構(gòu)方面的探索及發(fā)展歷程
這篇文章主要介紹了Shopee在React?Native?架構(gòu)方面的探索,本文會從發(fā)展歷史、架構(gòu)模型、系統(tǒng)設(shè)計、遷移方案四個方向逐一介紹我們?nèi)绾我徊讲降貪M足多團隊在復雜業(yè)務中的開發(fā)需求,需要的朋友可以參考下2022-07-07React?中使用?react-i18next?國際化的過程(react-i18next?的基本用法)
i18next?是一款強大的國際化框架,react-i18next?是基于?i18next?適用于?React?的框架,本文介紹了?react-i18next?的基本用法,如果更特殊的需求,文章開頭的官方地址可以找到答案2023-01-01