1.useState
import React, { Component } from "react";
export default function Div2() {
const [count, setCount] = React.useState(0);
const handleAdd = () => {
setCount((count) => {
return count + 1;
});
};
return (
<div>
<h2>Div2:{count}</h2>
<button onClick={handleAdd}>点击+1</button>
</div>
);
}
- React.useState()的返回结果是一个数组。
- React.useState()将参数赋给返回数组中的第一个变量(count)。
- React.useState()的返回数组的第二个变量(setCount)是一个函数,用来改变第一个变量(count)。
- setCount的参数可以是一个值,将值直接赋值给count。如:
setCount(count+1);
- setCount的参数可以是一个回调函数,将回调函数的返回值赋值给count。如:
setCount((count) => {
return count + 1;
});
- setCount钩子函数用来让函数式组件中也能拥有状态。
2.useEffect
React.useEffect(() => {
setCount(count + 1);
}, [count]);
- React.useEffect()有两个参数
- 第一个参数是一个回调函数
- 第二个参数是一个数组
- 当组件挂载时会调用一次第一个回调函数
- 当第二个参数(数组)中可以放入useState生成的状态
- 当第二个参数(数组)中的状态发生改变的时候,会调用第一个参数回调函数
- 第二个参数(数组)为空的时候,不管哪个状态发生改变,第一个参数回调函数都会被调用
- 第一个参数回调函数可以有一个函数返回值,当组件被挂载的时候,会调用第一个参数回调函数的返回值函数,如下:
React.useEffect(() => {
let timer = setTimeout(() => {
setCount(count + 1);
}, 1000);
return clearTimeout(timer);
}, [count]);
3.useRef
import React from "react";
export default function Div2() {
const myRef = React.useRef();
const show =()=>{
console.log(myRef.current.value);
}
return (
<div>
<h2>Div2:</h2>
<input type="text" ref={myRef}/>
<button onClick={show}>点我提示input框的内容</button>
</div>
);
}
- React.useRef()返回值为一个ref对象
- 可以通过这个ref对象获取结点的数据