什么是钩子？

Hooks 是 React 16.8 中添加的一个特性，这使得在不编写类的情况下使用状态等 React 特性成为可能。

什么是使用状态？

useState 是一个函数，用于维护和更新函数组件中的状态。在第一次渲染时，将初始值作为参数传递给 useState，该值将成为第一个元素的状态。第二个元素将是一个更新状态值的函数，基本上是使用这个函数来更新状态值。

定义如下。

import React, { useState } from 'react';

const Example = () => {
  const [state, stateを更新する関数] = useState(初期値);

  ~~~~

尝试使用状态 例子.tsx

import React, { useState } from 'react';

export const Example = () => {
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>ボタンが {count} 回押されました</p>
      <button onClick={() => setCount(count + 1)}>
        ボタン
      </button>
    </div>
  )
};

它声明了一个称为计数的状态。当按钮被按下时，它会调用 setCount，一个更新状态的函数，将计数值加 1。每次按下按钮时，这将增加计数。

更新状态的函数一般通过在状态名称的开头加上set来命名，它不必这样命名。

顺便说一句，更新状态的函数也可以传递一个函数。

例子.tsx

import React, { useState } from 'react';

export const Example = () => {

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

  const handleOnClick = () => {
    setCount(updateCount);
  }

  return (
    <div>
      <p>countの値は{count} です</p>
      <button onClick={handleOnClick}>
        ボタン
      </button>
    </div>
  )
};

const updateCount = (count: number) => count + 1

因为你可以像这样剪掉组件外的更新逻辑我认为值得记住。

使用 useState 需要注意的事项 状态仅在组件第一次渲染时创建

重新渲染不会再次创建状态。

始终在顶层调用

不应在循环、条件分支、嵌套函数等中调用它。这保证了渲染组件时调用钩子的顺序。

在函数组件或自定义钩子中调用

顺便说一句，自定义钩子是在单独的文件中定义为新钩子的函数，而不是直接在组件中编写 React 钩子处理。

始终使用更新函数来更新状态值

例如，假设您有以下内容：

例子.tsx

import React, { useState } from 'react';

export const Example = () => {
  const [count, setCount] = useState(["a", "b", "c"]);

  const handleOnClick = () => {
    count.push("d");
    setCount(count); 

    console.log(count); // -> (4) ['a', 'b', 'c', 'd']
  }

  return (
    <div>
      <p>countの値は{count} です</p>
      <button onClick={handleOnClick}>
        ボタン
      </button>
    </div>
  )
};

执行结果

安慰

(4) ['a', 'b', 'c', 'd']

如果按下按钮，则执行 handleOnClick 并将字符串“d”添加到计数中，但是无论按多少次，屏幕上显示的计数值都不会改变。

count.push("d");
setCount(count); 

即使我在这里使用更新功能它也不会改变的原因是判断状态变化用来。

因此，当同一个数组的状态更新时，这意味着不会检测到更改并重新渲染。

然后，要做的就是用扩展语法创建一个新数组，我会将它传递给更新函数。似乎基本上建议为此更新数组。

例子.tsx

import React, { useState } from 'react';

export const Example = () => {
  const [count, setCount] = useState(["a", "b", "c"]);

  const handleOnClick = () => {
    setCount([...count, "d"]);
  }

  return (
    <div>
      <p>countの値は{count} です</p>
      <button onClick={handleOnClick}>
        ボタン
      </button>
    </div>
  )
};

执行结果

不遵守这些规则将导致不正确的状态保留。

使用 useState 更新的状态不会立即更新

让我们为前面的过程准备 console.log。

例子.tsx

import React, { useState } from 'react';

export const Example = () => {
  const [count, setCount] = useState(["a", "b", "c"]);

  const handleOnClick = () => {
    setCount([...count, "d"]);
    console.log(count); // -> (3) ['a', 'b', 'c']
  }

  return (
    <div>
      <p>countの値は{count} です</p>
      <button onClick={handleOnClick}>
        ボタン
      </button>
    </div>
  )
};

安慰

(3) ['a', 'b', 'c']

这是因为更新函数的调用是异步的，所以这意味着直到下一个渲染时间才会反映状态。

在这种情况下，我认为使用 useEffect 会更好。

useEffect 在计数更改时运行，由于此时也完成了渲染，因此我们也能够在控制台上更新计数后显示该值。

例子.tsx

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

export const Example = () => {
  const [count, setCount] = useState(["a", "b", "c"]);

  useEffect(() => {
    console.log(count) // -> (4) ['a', 'b', 'c', 'd']
  }, [count])

  const handleOnClick = () => {
    setCount([...count, "d"]);
  }

  return (
    <div>
      <p>countの値は{count} です</p>
      <button onClick={handleOnClick}>
        ボタン
      </button>
    </div>
  )
};

概括

不是每个人都被更新功能的行为或状态没有立即反映吗？useState 看起来很简单，但其实很深奥。

我希望这篇文章对你有所帮助。

参考

原创声明：本文系作者授权爱码网发表，未经许可，不得转载;

原文地址：https://www.likecs.com/show-308626375.html