- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我正在尝试制作一个简单的示例,该示例遵循页面 https://reactjs.org/docs/hooks-reference.html#usecallback 的文档中的 React Hooks 示例。
如果没有useCallback
,代码的工作方式如下示例所示:
import React, { useCallback } from "react";
function Test(props) {
function doSomething(a, b) {
console.log("doSomething called");
return a + b;
}
return (
<div>
{Array.from({ length: 3 }).map(() => (
<div>{doSomething('aaa','bbb')}</div>
))}
</div>
);
}
export default Test;
但是,当我为 useCallback
添加我认为正确的代码时,我收到错误(a 未定义)
import React, { useCallback } from "react";
function Test(props) {
function doSomething(a, b) {
console.log("doSomething called");
return a + b;
}
const memoizedCallback = useCallback(
() => {
doSomething(a, b);
},
[a, b]
);
return (
<div>
{Array.from({ length: 3 }).map(() => (
<div>{memoizedCallback("aaa", "bbb")}</div>
))}
</div>
);
}
export default Test;
问题代码在这里:
最佳答案
useCallback
的意图是能够利用当前范围内并且可能在重新渲染时发生变化的 props 或 state。然后,依赖数组会告诉 React 您何时需要新版本的回调。如果您试图记住昂贵的计算,则需要使用 useMemo
相反。
下面的示例演示了 useCallback
之间的差异和useMemo
以及不使用它们的后果。在此示例中,我使用 React.memo
防止Child
除非其 Prop 或状态发生变化,否则不会重新渲染。这可以让我们看到 useCallback
的好处。现在如果Child
收到新的onClick
prop 它将导致重新渲染。
子 1 正在接收未内存的 onClick
回调,因此每当父组件重新渲染时,Child 1 总是会收到一个新的 onClick
函数,因此它被强制重新渲染。
子 2 正在使用已内存的 onClick
从 useCallback
返回的回调Child 3 使用 useMemo
的等效项来展示
useCallback(fn, inputs) is equivalent to useMemo(() => fn, inputs)
对于 Child 2 和 3,每次单击 Child 2 或 3 时,回调仍然会执行,useCallback
只是确保 onClick
的版本相同当依赖关系没有改变时函数被传递。
显示的以下部分有助于指出正在发生的情况:
nonMemoizedCallback === memoizedCallback: false|true
另外,我显示 somethingExpensiveBasedOnA
以及使用 useMemo
的内存版本。出于演示目的,我使用了不正确的依赖项数组(我故意省略了 b
),以便您可以看到当 b
时,内存版本不会更改。改变,但当 a
时它确实改变变化。每当 a
时,非内存版本就会发生变化。或b
改变。
import ReactDOM from "react-dom";
import React, {
useRef,
useMemo,
useEffect,
useState,
useCallback
} from "react";
const Child = React.memo(({ onClick, suffix }) => {
const numRendersRef = useRef(1);
useEffect(() => {
numRendersRef.current++;
});
return (
<div onClick={() => onClick(suffix)}>
Click Me to log a and {suffix} and change b. Number of Renders:{" "}
{numRendersRef.current}
</div>
);
});
function App(props) {
const [a, setA] = useState("aaa");
const [b, setB] = useState("bbb");
const computeSomethingExpensiveBasedOnA = () => {
console.log("recomputing expensive thing", a);
return a + b;
};
const somethingExpensiveBasedOnA = computeSomethingExpensiveBasedOnA();
const memoizedSomethingExpensiveBasedOnA = useMemo(
() => computeSomethingExpensiveBasedOnA(),
[a]
);
const nonMemoizedCallback = suffix => {
console.log(a + suffix);
setB(prev => prev + "b");
};
const memoizedCallback = useCallback(nonMemoizedCallback, [a]);
const memoizedCallbackUsingMemo = useMemo(() => nonMemoizedCallback, [a]);
return (
<div>
A: {a}
<br />
B: {b}
<br />
nonMemoizedCallback === memoizedCallback:{" "}
{String(nonMemoizedCallback === memoizedCallback)}
<br />
somethingExpensiveBasedOnA: {somethingExpensiveBasedOnA}
<br />
memoizedSomethingExpensiveBasedOnA: {memoizedSomethingExpensiveBasedOnA}
<br />
<br />
<div onClick={() => setA(a + "a")}>Click Me to change a</div>
<br />
<Child onClick={nonMemoizedCallback} suffix="1" />
<Child onClick={memoizedCallback} suffix="2" />
<Child onClick={memoizedCallbackUsingMemo} suffix="3" />
</div>
);
}
const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);
关于reactjs - React Hooks useCallback 的简单示例出现问题,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/54932674/
我创建了一个简单的钩子(Hook),我安装了它 SetWindowsHookEx(WH_CBT, addr, dll, 0); 完成后,我卸载 UnhookWindowsHookEx(0); 然后我可
我正在使用 React Hooks,当我用 mobx 的观察者包装我的组件时,我收到了这个错误。可能是什么问题?是否可以将 mobx 与 React Hooks 一起使用? import classn
我知道这个问题已经被回答过很多次了。我只是找不到解决我的问题的答案,让我相信,我要么是愚蠢的,要么是我的问题没有被解决,因为它比我更愚蠢。除此之外,这是我的问题: 我正在尝试创建一个功能组件,它从 r
我正在使用 React Navigation 的 useNavigation 钩子(Hook): 在 MyComponent.js 中: import { useNavigation } from "
我想在 gitlab 中使用预提交钩子(Hook)。我做的一切都像文档中一样:https://docs.gitlab.com/ce/administration/custom_hooks.html 在
我最近在和一些人谈论我正在编写的程序时听到了“hook”这个词。尽管我从对话中推断出钩子(Hook)是一种函数,但我不确定这个术语到底意味着什么。我搜索了定义,但找不到好的答案。有人可以让我了解这个术
我正在寻找一个在页面创建或页面更改后调用的钩子(Hook),例如“在导航中隐藏页面”、“停用页面”或“移动/删除页面“ 有人知道吗? 谢谢! 最佳答案 这些 Hook 位于 t3lib/class.t
我正在使用钩子(Hook)将新方法添加到 CalEventLocalServiceImpl 中... 我的代码是.. public class MyCalendarLocalServiceImpl e
编译器将所有 SCSS 文件编译为 STANDALONE(无 Rails)项目中的 CSS 后,我需要一个 Compass Hook 。 除了编辑“compiler.rb”(这不是好的解决方案,因为
我“.get”一个请求并像这样处理响应: resp = requests.get('url') resp = resp.text .. # do stuff with resp 阅读包的文档后,我看到
我们想在外部数据库中存储一些关于提交的元信息。在克隆或 checkout 期间,应引用此数据库,我们将元信息复制到克隆的存储库中的文件中。需要数据库而不是仅仅使用文件是为了索引和搜索等...... 我
我有一个 react 钩子(Hook)useDbReadTable,用于从接受tablename和query初始数据的数据库读取数据。它返回一个对象,除了数据库中的数据之外,还包含 isLoading
在下面的代码中,当我调用 _toggleSearch 时,我同时更新 2 个钩子(Hook)。 toggleSearchIsVisible 是一个简单的 bool 值,但是,setActiveFilt
问题 我想在可由用户添加的表单中实现输入字段的键/值对。 参见 animated gif on dynamic fields . 此外,我想在用户提交表单并再次显示页面时显示保存的数据。 参见 ani
当状态处于 Hook 状态时,它可能会变得陈旧并泄漏内存: function App() { const [greeting, setGreeting] = useState("hello");
const shouldHide = useHideOnScroll(); return shouldHide ? null : something useHideOnScroll 行为应该返回更新后
我正在使用 React-native,在其中,我有一个名为 useUser 的自定义 Hook,它使用 Auth.getUserInfro 方法从 AWS Amplify 获取用户信息,并且然后获取返
我正在添加一个 gitolite 更新 Hook 作为 VREF,并且想知道是否有办法将它应用于除 gitolite-admin 之外的所有存储库。 有一个更简单的方法而不是列出我想要应用 Hook
如何使用带有 react-apollo-hooks 的 2 个 graphql 查询,其中第二个查询取决于从第一个查询中检索到的参数? 我尝试使用如下所示的 2 个查询: const [o, setO
我是 hooks 的新手,到目前为止印象还不错,但是,如果我尝试在函数内部使用 hooks,它似乎会提示(无效的 hook 调用。Hooks can only be called inside o
我是一名优秀的程序员,十分优秀!