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>

}

相关推荐
AlgorithmAce2 小时前
Live2D嵌入前端页面
前端
nameofworld2 小时前
前端面试笔试(六)
前端·javascript·面试·学习方法·递归回溯
前端fighter2 小时前
js基本数据新增的Symbol到底是啥呢?
前端·javascript·面试
流着口水看上帝2 小时前
JavaScript完整原型链
开发语言·javascript·原型模式
guokanglun2 小时前
JavaScript数据类型判断之Object.prototype.toString.call() 的详解
开发语言·javascript·原型模式
GISer_Jing2 小时前
从0开始分享一个React项目:React-ant-admin
前端·react.js·前端框架
川石教育2 小时前
Vue前端开发子组件向父组件传参
前端·vue.js·前端开发·vue前端开发·vue组件传参
Embrace9243 小时前
为什么 Vue2会出现数据更新视图不更新 Vue3不会出现
javascript·vue.js·ecmascript
qq_415628173 小时前
bpmn.js显示流程图
javascript·vue.js·流程图
GISer_Jing3 小时前
Vue前端进阶面试题目(二)
前端·vue.js·面试