web前端全系列 教程
1839个小节阅读:2243.2k
目录
鸿蒙应用开发
C语言快速入门
JAVA全系列 教程
面向对象的程序设计语言
Python全系列 教程
Python3.x版本,未来主流的版本
人工智能 教程
顺势而为,AI创新未来
大厂算法 教程
算法,程序员自我提升必经之路
C++ 教程
一门通用计算机编程语言
微服务 教程
目前业界流行的框架组合
web前端全系列 教程
通向WEB技术世界的钥匙
大数据全系列 教程
站在云端操控万千数据
AIGC全能工具班
A A
White Night
Effect Hook 可以让你在函数 组件中执行副作用操作。比如:数据获取,设置订阅以及操作 DOM。
class
xxxxxxxxxx
import React, { Component } from 'react'
export default class Counter extends Component {
constructor(props) {
super(props)
this.state = { count: 0 }
this.inputRef=React.createRef()
}
componentDidMount(){
this.inputRef.current.value=`点击了${this.state.count}次`
}
componentDidUpdate(){
this.inputRef.current.value=`点击了${this.state.count}次`
}
render() {
return (
<div>
我是一个使用class定义的组件<br />
<button onClick={() => this.setState({ count: this.state.count + 1 })}>变数</button>
<h3>数量:{this.state.count}</h3>
<input ref={this.inputRef}/>
</div>
)
}
}
useEffect
可以接收一个参数,是一个回调函数,此函数就是我们的 effect。默认情况下,它在第一次渲染之后和每次更新之后都会执行。
xxxxxxxxxx
import React, { useState, useEffect } from 'react'
export default function Counter() {
// 声明一个叫 “count” 的 state 变量。useState返回一个数组
const [count, setCount] = useState(0)
//声明叫做color的state变量
const [color, setColor] = useState('red')
const inputRef = React.createRef()
//接收一个函数
useEffect(() => {
inputRef.current.value = `点击了${count}次`
})
return (
<div>
我是使用hook的组件
<br />
<button onClick={() => setCount(count + 1)}>变量</button>
<button onClick={() => setColor('blue')}>变色</button>
<h3 style={{ color }}>数量:{count}</h3>
<input ref={inputRef} />
</div>
)
}
提示:
你可以把
useEffect
Hook 看做componentDidMount
,componentDidUpdate
函数的组合。
实时效果反馈
1. 使用___来执行副作用操作:
A createEffect()
B useEffects()
C useState()
D useEffect()
答案
1=>C