javascript – React Hooks:跨函数访问状态而不更改事件处理函数引用

发布时间:2020-09-30 发布网站:编程之家
编程之家收集整理的这篇文章主要介绍了javascript – React Hooks:跨函数访问状态而不更改事件处理函数引用编程之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
在基于类的React组件中,我执行以下操作:

class SomeComponent extends React.Component{
    onChange(ev){
        this.setState({text: ev.currentValue.text});
    }
    transformText(){
        return this.state.text.toUpperCase();
    }
    render(){
        return (
            <input type="text" onChange={this.onChange} value={this.transformText()} />
        );
    }
}

这是一个简化我的观点的人为例子.我本来想要做的是保持对onChange函数的恒定引用.在上面的示例中,当React重新呈现我的组件时,如果输入值没有更改,它将不会重新呈现输入.

这里需要注意的重要事项:

> this.onChange是对同一函数的常量引用.
> this.onChange需要能够访问状态设置器(在本例中为this.setState)

现在,如果我使用钩子重写此组件:

function onChange(setText,ev) {
    setText(ev.currentValue.text);
};

function transformText(text) {
    return text.toUpperCase();
};

function SomeComponent(props) {
    const [text,setText] = useState('');

    return (
        <input type="text" onChange={onChange} value={transformText()} />
    );
}

现在的问题是我需要分别将文本传递给transformText和setText到onChange方法.我能想到的可能的解决方案是:

>定义组件函数内的函数,并使用闭包来传递值.
>在组件函数内部,将值绑定到方法,然后使用绑定方法.

执行其中任何一项都会更改对我需要维护的函数的常量引用,以便不重新呈现输入组件.我怎么用钩子做这个?它甚至可能吗?

请注意,这是一个非常简化,人为的例子.我的实际用例非常复杂,我绝对不想不必要地重新渲染组件.

编辑:
这不是What useCallback do in React?的重复,因为我试图弄清楚如何在类组件方式中实现类似的效果,虽然useCallback提供了一种方法,但它对于可维护性问题并不理想.

解决方法

定义组件函数内部的函数,并使用闭包来传递值.那么你要找的是useCallback来避免不必要的重新渲染. (对于这个例子,它不是很有用)

function SomeComponent(props) {
  const [text,setText] = useState('');

  const onChange = (ev)  => {
    setText(ev.target.value);
  };

  function transformText(text) {
    return text.toUpperCase();
  };

  return (
    <input type="text" onChange={useCallback(onChange)} value={transformText(text)} />
  );
}

阅读更多here

总结

以上是编程之家为你收集整理的javascript – React Hooks:跨函数访问状态而不更改事件处理函数引用全部内容,希望文章能够帮你解决javascript – React Hooks:跨函数访问状态而不更改事件处理函数引用所遇到的程序开发问题。

如果觉得编程之家网站内容还不错,欢迎将编程之家网站推荐给程序员好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您喜欢交流学习经验,点击链接加入编程之家官方QQ群:1065694478