当前位置: article > 正文

React Hook-useState_usestate传入函数

作者：羊村懒王 | 2024-06-02 03:42:25

踩

usestate传入函数

一. 认识函数组件

class组件——功能全、东西多；麻烦
函数组件——功能弱、东西少；方便

函数组件：
1.状态——能变的、重新渲染
class √
fc × hook
2.this——当前实例
class √
fc ×
3.ref——引用
class √
fc × hook
4.方法
class √
fc × hook

hook：一套工具函数的集合——增强fc的功能
函数组件专用的

二. 认识hook

hook：一套工具函数的集合——增强fc的功能

hook!=函数组件

1.状态——useState的使用参考链接
在这里插入图片描述

注意第四点，useState也可以传入一个函数，这个函数只会被调用一次，用在初始值是动态值的情况。

例如：
在这里插入图片描述

在上面代码中 const propsCount = props.count || 0 是不合理的，因为每次setState都会执行这行代码，而这行代码的意图是在初始化的时候执行，因此我们需要在useState的参数里放入一个函数。

改进写法：
在这里插入图片描述

对useState理解：

// App.jsx
<Content
    // key={tabValue}  重置key与不重置key对useState的影响
    tabValue={tabValue}
/>
1
2
3
4
5

// Content.jsx
import { getDealColumns, getUVColumns } from './config';
function Content(props) {
	if (tabValue === 'Trade') {
        getTableColumns = getDealColumns;
    } else if (tabValue === 'UVIndex') {
        getTableColumns = getUVColumns;
    }
    const [tableColumns, setTableColumns] = useState(getTableColumns());
    console.log(tableColumns); // 切换tabs，如果没有重置key，这里的tableColumns不会变
}
1
2
3
4
5
6
7
8
9
10
11

使用useState初始的变量可以等价于为在class组件中的constructor里定义的state，如果组件没有重置key，那么useState初始的变量不会改变，重置了key，才会改变。

因此，状态尽量全部扔到Redux里。

useState是一个异步操作，会自动合并

即：在一个事件里触发多次setState，只会触发一次render

import React, {useState} from 'react';

export default function CounterHook() {
  const [count, setCount] = useState(() => 10);
  console.log("CounterHook渲染");
  function handleBtnClick() {
  	// 下面这种只会加10
    // setCount(count + 10);
    // setCount(count + 10);
    // setCount(count + 10);
    // setCount(count + 10);

	// 下面这种会加40
    setCount((prevCount) => prevCount + 10);
    setCount((prevCount) => prevCount + 10);
    setCount((prevCount) => prevCount + 10);
    setCount((prevCount) => prevCount + 10);
  }
  return (
    <div>
      <h2>当前计数: {count}</h2>
      <button onClick={handleBtnClick}>+10</button>
    </div>
  )
}
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

import() 语法

通过import() 动态导入组件:

import React, { FC, useEffect, useState } from 'react';
import Test from './Test1';
console.log(11, Test)
type Props = {
    name: string;
    age: number;
};

const App: FC<Props> = props => {
    const [count, setCount] = useState(0);
    const [Comp, setComp] = useState(() => {
        return () => {
            return <div>11</div>
        }
    });
    useEffect(() => {});
    const handleClick = async() => {
        setCount(count + 1);
        const content = () => import('./Test1');
        const { default: Comp } = await content();
        // 对于import进来的组件，在setState的时候需要仍然是一个函数，因为前面useState类型的时候就定义了是一个函数，所以必须setState的时候是同样类型的
        setComp(() => Comp)
    };
    return (
        <div>
            <h1>hello</h1>
            <div>
                {props.name}
                {props.age}
            </div>
            <div>
                <button onClick={() => handleClick()}>按钮{count}</button>
            </div>
            <Comp />
        </div>
    );
};
export default App;
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
35
36
37
38