什么是钩子？
Hooks 是 React 16.8 中添加的一个特性，
这使得在不编写类的情况下使用状态等 React 特性成为可能。
什么是使用状态？
useState 是一个函数，用于维护和更新函数组件中的状态。
在第一次渲染时，将初始值作为参数传递给 useState，该值将成为第一个元素的状态。
第二个元素将是一个更新状态值的函数，基本上是使用这个函数来更新状态值。
定义如下。
import React, { useState } from 'react';
const Example = () => {
const [state, stateを更新する関数] = useState(初期値);
~~~~
尝试使用状态
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来命名，
它不必这样命名。
顺便说一句，更新状态的函数也可以传递一个函数。
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 钩子处理。
始终使用更新函数来更新状态值
例如，假设您有以下内容：
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);
即使我在这里使用更新功能它也不会改变的原因是
判断状态变化哦，bje CT。不同的 s()用来。
因此，当同一个数组的状态更新时，
这意味着不会检测到更改并重新渲染。
然后，要做的就是用扩展语法创建一个新数组，
我会将它传递给更新函数。
似乎基本上建议为此更新数组。
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。
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 在计数更改时运行，
由于此时也完成了渲染，因此我们也能够在控制台上更新计数后显示该值。
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