Frontend React Learning

React的State状态

React的State状态

在React中，State（状态）是组件用于存储和管理数据的对象。State的变化会触发组件的重新渲染，从而更新UI以反映最新的数据状态。State通常用于存储用户输入、服务器响应数据或其他动态信息。可以把State看成组件的“记忆”，它记录了组件在不同时间点上的数据状态。

State的作用

React中的State扮演着重要的角色，主要有以下几个作用：

数据存储

State用于存储组件的动态数据，这些数据可能会随着用户交互或其他事件而变化。

UI更新

当State发生变化时，React会自动重新渲染组件，以确保UI与最新的State保持同步。

组件交互

State允许组件根据用户的操作或其他事件动态地改变其行为和外观。

状态管理

State是React中管理组件状态的核心机制，帮助开发者构建交互性强的用户界面。

State的分类

根据Stated的作用范围，State可以分为以下几类：

本地State

每个组件都有自己的本地State，通常使用 useState Hook 来管理。它只在组件内部使用，不会被其他组件访问。

提升State

当多个组件需要共享同一份State时，可以将State提升到它们的共同父组件中进行管理。这样，父组件可以通过props将State传递给子组件。

全局State

对于大型应用程序，可能需要在多个组件之间共享State。可以使用React的Context API或状态管理库（如Redux、MobX）来管理全局State。

useState

useState 是React中用于在函数组件中添加State的Hook。它允许你在函数组件中声明State变量，并提供一个更新函数来修改这些变量。useState 的使用非常简单，下面是它的详细解释：

1

const [state, setState] = useState(initialState);
  • state: 当前的State变量，可以是任何类型的数据（数字、字符串、对象、数组等）。
  • setState: 用于更新State变量的函数。调用这个函数会触发组件的重新渲染。
  • initialState: State变量的初始值，可以是一个具体的值，也可以是一个函数，该函数返回初始值（用于惰性初始化）。

useState原理

useState 的原理基于React的Hooks机制。当你调用 useState 时，React会在内部为该组件实例分配一个存储位置，用于保存State变量的值。每次组件渲染时，React都会根据调用顺序来识别和管理这些State变量。

useState的惰性初始化

有时，初始State的计算可能比较复杂，或者需要从某些外部资源获取数据。为了避免每次渲染时都进行这些计算，可以将初始State设置为一个函数，这个函数只会在组件首次渲染时调用一次。

1
2
3
4

const [count, setCount] = useState(() => {
    // 复杂的初始值计算
    return computeInitialCount();
});

在这个例子中，computeInitialCount 函数只会在组件首次渲染时调用一次，以计算 count 的初始值。

添加State变量

在React中，可以通过使用 useState Hook 来添加State变量。useState 是一个函数，它接受初始状态作为参数，并返回一个包含当前状态和更新状态的函数的数组。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14

//MyComponent.jsx

import React, { useState } from 'react';

function Counter() {
  // 声明一个名为 "count" 的 state 变量，初始值为 0
  const [count] = useState(0);

  return (
    <div>
      <p>当前计数: {count}</p>
    </div>
  );
}

在上面的例子中，我们使用 useState(0) 来创建一个名为 count 的State变量，初始值为0。注意不要在循环、条件语句或嵌套函数中调用 useState，因为Hooks必须在组件的顶层调用，以确保每次渲染时都能以相同的顺序调用。

更新State

使用更新函数

要更新State变量，可以使用 useState 返回的更新函数。在上面的例子中，我们可以使用 setCount 函数来更新 count 的值。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14

//MyComponent.jsx

import React, { useState } from 'react';

function Counter() {
    const [count, setCount] = useState(0);

    return (
        <div>
            <p>当前计数: {count}</p>
            <button onClick={() => setCount(count + 1)}>增加计数</button>
        </div>
    );
}

在这个例子中，当用户点击按钮时，setCount(count + 1) 会被调用，count 的值会增加1，并触发组件重新渲染以显示最新的计数值。要注意的是使用state更新函数时，确保不会直接修改State变量，而是通过调用更新函数来实现状态的更新。比如不能直接写 count = count + 1，而应该使用 setCount(count + 1)。

State的异步更新

在React中，State的更新是异步的，这意味着当你调用更新函数时，State不会立即更新，而是在下一次渲染时才会反映最新的状态。这种行为有助于提高性能，因为React可以批量处理多个State更新。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19

//MyComponent.jsx

import React, { useState } from 'react';

function Counter() {
    const [count, setCount] = useState(0);

    const handleClick = () => {
        setCount(count + 1);
        console.log(count); // 这里可能不会打印最新的 count 值
    };

    return (
        <div>
            <p>当前计数: {count}</p>
            <button onClick={handleClick}>增加计数</button>
        </div>
    );
}

在上面的例子中，当用户点击按钮时，setCount(count + 1) 会被调用，但紧接着的 console.log(count) 可能不会打印最新的 count 值，因为State更新是异步的。如果需要在State更新后执行某些操作，可以使用 useEffect Hook 来监听State的变化。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18

//MyComponent.jsx

import React, { useState, useEffect } from 'react';

function Counter() {
    const [count, setCount] = useState(0);

    useEffect(() => {
        console.log(count); // 这里会打印最新的 count 值
    }, [count]);

    return (
        <div>
            <p>当前计数: {count}</p>
            <button onClick={() => setCount(count + 1)}>增加计数</button>
        </div>
    );
}

在这个例子中，useEffect 会在 count 发生变化时执行，从而打印最新的 count 值。

多个State变量管理

在React中，可以在一个组件中使用多个State变量来管理不同的数据。每个State变量都可以独立更新和管理。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17

//MyComponent.jsx

import React, { useState } from 'react';

function UserProfile() {
    const [name, setName] = useState('张三');
    const [age, setAge] = useState(25);

    return (
        <div>
            <p>姓名: {name}</p>
            <p>年龄: {age}</p>
            <button onClick={() => setName('李四')}>更改姓名</button>
            <button onClick={() => setAge(age + 1)}>增加年龄</button>
        </div>
    );
}

在上面的例子中，我们创建了两个State变量 name 和 age，分别用于存储用户的姓名和年龄。每个State变量都有自己的更新函数，可以独立更新。注意不要在一个State中引用另一个State变量的值进行更新，以避免潜在的同步问题。

State在组件中

State在独立组件中

每一个React组件实例都有自己的State，这意味着同一个组件类的不同实例可以有不同的State值。这使得组件可以在不同的上下文中表现出不同的行为和外观。同时与props不同，State完全私有于声明它的组件，父组件无法更改子组件的State。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29

//MyComponent.jsx

import React, { useState } from 'react';

export default function Counter() {
    const [count, setCount] = useState(0);

    return (
        <div>
            <p>当前计数: {count}</p>
            <button onClick={() => setCount(count + 1)}>增加计数</button>
        </div>
    );
}

//App.jsx
import React from 'react';
import Counter from './MyComponent';

export default function App() {
    return (
        <div>
            <h1>计数器实例1</h1>
            <Counter />
            <h1>计数器实例2</h1>
            <Counter />
        </div>
    );
}

在上面的例子中，App 组件渲染了两个 Counter 组件实例。每个 Counter 实例都有自己的State变量 count，它们的值是独立的，互不影响。

State在多个组件间共享

如果希望在多个组件之间共享State,可以将State提升到它们的共同父组件中，或者使用React的Context API或状态管理库（如Redux）来实现更复杂的状态共享和管理。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34

//MyComponent.jsx

import React from 'react';

export default function Counter({ count, setCount }) {

    return (
        <div>
            <p>当前计数: {count}</p>
            <button onClick={setCount}>增加计数</button>
        </div>
    );
}


//App.jsx
import React, { useState } from 'react';
import Counter from './MyComponent';

export default function App() {
    const [count, setCount] = useState(0);

    function setCountValue() {
        setCount(count + 1);
    }

    return (
        <div>
            <h1>共享计数器</h1>
            <Counter count={count} setCount={setCountValue} />
            <Counter count={count} setCount={setCountValue} />
        </div>
    );
}

在上面的例子中，App 组件管理了 count State，并将其作为props传递给 Counter 组件。这样，Counter 组件可以共享和更新 App 组件中的State。

结语

State是前端开发中非常重要的概念。在vue、flutter框架中也会有类似的状态概念。而状态管理更是前端开发中的核心工作之一，理解和掌握State的使用对于构建动态和交互性强的用户界面至关重要。

参考资料

Licensed under CC BY-NC-SA 4.0