useState的使用
useState的使用Hooks 是 React 16 中的特性,解决函数组件想使用类组件的一些特性。useState是react自带的一个hook函数,它的作用是用来声明状态变量。从三个方面来看useState的用法,分别是声明、读取、使用(修改)。声明的方式const [ count , setCount ] = useState(0);useState(params) 设置 第一个参数的初始
useState的使用
Hooks 是 React 16 中的特性,解决函数组件想使用类组件的一些特性。
useState是react自带的一个hook函数,它的作用是用来声明状态变量。
从三个方面来看useState的用法,分别是声明、读取、使用(修改)。
- 声明的方式
const [ count , setCount ] = useState(0);
useState(params) 设置 第一个参数的初始值
count 是解构出的第一个参数
setCount 是第二个参数 是一个函数 用来设置count
- 读取状态中的值
<p>You clicked {count} times</p>
- 改变State中的值
<button onClick={()=>{setCount(count+1)}}>click me</button>
使用USESTATE的赋值函数异步更新问题
随着count的更新,实时累加更新sum的值。
却发现在执行setSum后,打印sum的值为上一次得到的和。
究其原因,猜测是因为setSum异步了,导致打印的sum是还未计算完成的上一次的值。
import React, {useState,useEffect} from “react”;
export default function Example() {
// 声明一个叫 "count" 的 state 变量
const [count, setCount] = useState(0);
const [sum, setSum] = useState(0);
useEffect(()=>{
setSum(sum+count);
},[count]);
// useEffect(()=>{
// console.log(sum);
// },[sum])
return (
<div>
<p>You clicked {count} times</p>
<button onClick={() => setCount(count + 1)}>
Click me
</button>
</div>
);
}
解决方式:再写一个副作用Hook,只用于监视sum值的变化,从而进行操作
useEffect(()=>{
console.log(sum);
},[sum])
useState 和 useEffect 的区别
- useState
const [count, setCount] = useState(0);
useState(params) 设置 第一个参数的初始值
count 是解构出的第一个参数
setCount 是第二个参数 是一个函数 用来设置count
操作 setCount(count + 1);count 为最新的值
- useEffect
useEffect(() => {
},[])
接受2个参数,第一个是函数,第二个是数组
如果第二个参数数组为空 它就是componentDidMount 只有第一次渲染
如果二个参数数组 里面的值 设置的 值改变 它就是componentDidUpdate 只要值改变了 他就渲染
useEffect 内部 最外层 支持return () => 相当于 componentWillUnmount 卸载 来开当前组件的时候触发 并且 每次更新都触发。
相同点: useState 和 useEffect 支持写多个,例如:
const [count, setCount] = useState(0);
const [count2, setCount2] = useState(0);
useEffect(() => {
},[])
useEffect(() => {
},[xxx])
在类组件中使用状态通过 state 定义
import React from 'react';
class Counter extends React.Component {
state = {
number: 0
}
handleClick = () => {
this.setState({
number: this.state.number + 1
})
}
render() {
return (
<>
<p>{this.state.number}</p>
<button
onClick={ this.handleClick }>
加一
</button>
</>
);
}
}
function render() {
ReactDOM.render(<Counter />, document.getElementById('root'));
}
render()
在函数组件中使用状态通过 state 定义
import React, {useState} from 'react';
function Counter() {
const [
number,
setNumber
] = useState(0)
return (
<>
<p>{number}</p>
<button
onClick={
() => setNumber(number + 1)
}
>
加一
</button>
</>
)
}
function render() {
ReactDOM.render(<Counter />, document.getElementById('root'));
}
render()
更多推荐
所有评论(0)