useCallback官方例子中,依赖项变化导致函数重新创建,其内部逻辑如何确保函数稳定性和性能优化?
- 内容介绍
- 文章标签
- 相关推荐
本文共计210个文字,预计阅读时间需要1分钟。
不理解的官方faqlink + 不理解的官方faqlink + 1如果你要备忘化的函数是一个事件处理器且不在渲染期间使用,上方这句话是官方的原话,但我感觉好像不太懂... + 在我看起来有两种不理解的官方faqlink
不理解官方的一个faqlink
1If the function you’re memoizing is an event handler and isn’t used during rendering上边这句话是官方的原话, 但我觉得没什么道理...
在我看来下面两种写法没有任何区别, 请指点;
12345678910111213141516171819202122232425262728import React, { useState, useCallback, useEffect, useRef } from 'react';function Form() { const [text, updateText] = useState(''); const textRef = useRef(); useEffect(() => { textRef.current = text; // Write it to the ref }); const handleSubmit = useCallback(() => { const currentText = textRef.current; // Read it from the ref console.log(currentText); }, [textRef]); // Don't recreate handleSubmit like [text] would do // const handleSubmit = useCallback(() => { // console.log(text); // }, [text]); return ( updateText(e.target.value)} /> click );}export default Form;本文共计210个文字,预计阅读时间需要1分钟。
不理解的官方faqlink + 不理解的官方faqlink + 1如果你要备忘化的函数是一个事件处理器且不在渲染期间使用,上方这句话是官方的原话,但我感觉好像不太懂... + 在我看起来有两种不理解的官方faqlink
不理解官方的一个faqlink
1If the function you’re memoizing is an event handler and isn’t used during rendering上边这句话是官方的原话, 但我觉得没什么道理...
在我看来下面两种写法没有任何区别, 请指点;
12345678910111213141516171819202122232425262728import React, { useState, useCallback, useEffect, useRef } from 'react';function Form() { const [text, updateText] = useState(''); const textRef = useRef(); useEffect(() => { textRef.current = text; // Write it to the ref }); const handleSubmit = useCallback(() => { const currentText = textRef.current; // Read it from the ref console.log(currentText); }, [textRef]); // Don't recreate handleSubmit like [text] would do // const handleSubmit = useCallback(() => { // console.log(text); // }, [text]); return ( updateText(e.target.value)} /> click );}export default Form;
