React useEffect使用

第一

export default function App() {

const [name,setname] = useState('huhu')

useEffect(()=>{

setname(name.substring(0,1).toUpperCase()+name.substring(1))

},[name])

//[name,age]//可以有多个参数

//带参数,第一次默认执行一次,第二次name更新也会执行

return (

<div>

app={name}

<button onClick={()=>{

setname('xiaoming')

}}>

click

</button>

</div>

)

}

第二

import React, { Component, useEffect } from 'react'

export default class App extends Component {

state = {

isCreate : true

}

render() {

return (

<div>

<button onClick={()=>{

this.setState({

isCreate:!this.state.isCreate

})

}}>点击</button>

{/* { this.state.isCreate?<Child />:'' } */}

{ this.state.isCreate && <Child /> }

</div>

)

}

}

function Child(props){

useEffect(()=>{

window.onresize = ()=>{

console.log('resize')

}

var timer = setInterval(() => {

console.log(1234)

}, 1000);

// 点击之后只执行一次

return()=>{

console.log('组件销毁')

window.onresize = null;

clearInterval(timer)

}

},[])

return <div>

child

</div>

}

相关推荐
工业甲酰苯胺4 小时前
TypeScript枚举类型应用:前后端状态码映射的最简方案
javascript·typescript·状态模式
brzhang4 小时前
我操,终于有人把 AI 大佬们 PUA 程序员的套路给讲明白了!
前端·后端·架构
止观止5 小时前
React虚拟DOM的进化之路
前端·react.js·前端框架·reactjs·react
goms5 小时前
前端项目集成lint-staged
前端·vue·lint-staged
谢尔登5 小时前
【React Natve】NetworkError 和 TouchableOpacity 组件
前端·react.js·前端框架
Lin Hsüeh-ch'in5 小时前
如何彻底禁用 Chrome 自动更新
前端·chrome
augenstern4167 小时前
HTML面试题
前端·html
张可7 小时前
一个KMP/CMP项目的组织结构和集成方式
android·前端·kotlin
G等你下课7 小时前
React 路由懒加载入门:提升首屏性能的第一步
前端·react.js·前端框架
谢尔登8 小时前
【React Native】ScrollView 和 FlatList 组件
javascript·react native·react.js