React函数组件最重要的Hook之一useState操作与原理分析

最新推荐文章于 2024-07-24 20:41:46 发布

_付宏

最新推荐文章于 2024-07-24 20:41:46 发布

阅读量8.2k

点赞数 4

分类专栏： React 文章标签： react hooks javascript

本文链接：https://blog.csdn.net/weixin_44238796/article/details/104264577

版权

本文详细介绍了React函数组件中的重要Hook——useState，包括其基本使用、返回值、多个state的管理，以及背后的原理。强调了useState在不同场景下的注意事项，如避免在代码块中使用，正确处理对象状态的更新，并提供了优化组件渲染的建议。

摘要由CSDN通过智能技术生成

State Hook

State Hook是一个在函数组件中使用的函数, 该函数名字是useState, 用于在函数组件中提供状态
让React的函数组件能够像类组件一样拥有state

`useState`函数有一个参数, 这个参数的值表示状态的默认值

在我们引入react的时候顺带先引入一下stateHook

import React, {
    useState } from 'react';

`useState`函数的返回值是一个数组, 该数组一定包含两项

数组的第一项为状态的值
数组的第二项是函数

useState的基本使用方法如下

import React, {
    useState } from 'react';

export default function App(props) {
   
    // 在函数组件中state可以是一个原始类型
    // 使用一个状态, 该状态的默认值是0, 调用useState后返回一个数组
    // 数组的第一项是默认值, 数组的第二项是一个函数用来改变这个state
    const arr = useState(0);
    const number = arr[0];
    const setNumber = arr[1];
    return (
        <div>
            {
   /* 点击了按钮以后调用setNumber, setNumber接收一个参数就是要将number改变为何值 */}
            <span onClick = {
    () => {
    setNumber(number + 1) } }> + </span>
            <span>{
    number }</span>
            <span onClick = {
    () => {
    setNumber(number - 1) } }> - </span>
        </div>