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 小时前
Ubuntu22.04如何安装新版本的Node.js和npm
linux·运维·前端·人工智能·ubuntu·npm·node.js
Seveny074 小时前
pnpm相对于npm,yarn的优势
前端·npm·node.js
yddddddy5 小时前
css的基本知识
前端·css
昔人'5 小时前
css `lh`单位
前端·css
前端君6 小时前
实现最大异步并发执行队列
javascript
Nan_Shu_6147 小时前
Web前端面试题(2)
前端
知识分享小能手7 小时前
React学习教程,从入门到精通,React 组件核心语法知识点详解(类组件体系)(19)
前端·javascript·vue.js·学习·react.js·react·anti-design-vue
蚂蚁RichLab前端团队8 小时前
🚀🚀🚀 RichLab - 花呗前端团队招贤纳士 - 【转岗/内推/社招】
前端·javascript·人工智能
孩子 你要相信光8 小时前
css之一个元素可以同时应用多个动画效果
前端·css
萌萌哒草头将军8 小时前
Oxc 和 Rolldown Q4 更新计划速览!🚀🚀🚀
javascript·vue.js·vite