随着反应钩现已我应该在功能部件的情况下,包裹用的道具通过各项功能useCallback并与其他所有的道具价值useMemo?
我的组件中还具有依赖于任何props值的自定义函数,我应该使用useCallback包装它吗?
有什么好的做法来决定使用此钩子从组件中包装哪些prop或const值?
如果这样可以提高性能,为什么不一直这样做呢?
让我们考虑在包装点击处理程序并添加自定义逻辑的自定义按钮
function ExampleCustomButton({ onClick }) { const handleClick = useCallback( (event) => { if (typeof onClick === 'function') { onClick(event); } // do custom stuff }, [onClick] ); return <Button onClick={handleClick} />; }
让我们考虑在包装单击处理程序并根据条件添加自定义逻辑的自定义按钮
function ExampleCustomButton({ someBool }) { const handleClick = useCallback( (event) => { if (someBool) { // do custom stuff } }, [someBool] ); return <Button onClick={handleClick} />; }
在这两种情况下,我应该用useCallback包装我的处理程序吗?
与使用备忘录类似的情况。
function ExampleCustomButton({ someBool }) { const memoizedSomeBool = useMemo(() => someBool, [someBool]) const handleClick = useCallback( (event) => { if (memoizedSomeBool) { // do custom stuff } }, [memoizedSomeBool] ); return <Button onClick={handleClick} />; }
在此示例中,我甚至将备注值传递给useCallback。
另一种情况是,如果在组件树中许多组件记忆相同的值?这对性能有何影响?
不值得,有多种原因:
放在一起-键入所有的钩子比将它们放置在应用程序中的用户花费更多的时间。遵循良好的旧规则:先 测量,然后进行优化 。