相关疑难解决方法(0)

假设我们有这样的组件

const Example = () => {
  const [counter, setCounter] = useState(0);
  
  const increment = () => setCounter(counter => counter + 1); 
  return (
    <div>
      <Button onClick={increment} />
      
      <div>{counter}</div>
    </div>
  );
}

当我将onClick处理程序作为箭头函数传递时，我eslint抛出一个警告：

error    JSX props should not use arrow functions        react/jsx-no-bind

正如我从这篇文章的答案中读到的：https : //stackoverflow.com/questions/36677733/why-shouldnt-jsx-props-use-arrow-functions-or-bind# :~: text=Why%20you%20shouldn 't%20use,previous%20function%20is%20garbage%20collected。

简短的回答是因为每次都会重新创建箭头函数，这会损害性能。这篇文章提出的一个解决方案是用空数组包装在useCallback钩子中。当我改成这个时，eslint 警告就真的消失了。

const Example = () => {
  const [counter, setCounter] = useState(0);
  
  const increment = useCallback(() => setCounter(counter => counter + …

在基于类的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重新渲染我的组件时，如果输入值未更改，它将不会重新渲染输入。

这里要注意的重要事项：

1. this.onChange是对同一函数的常量引用。
2. 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()} />
    );
}

现在的问题是，我需要传递text到transformText和setText到onChange分别的方法。我能想到的可能解决方案是：

1. 在组件函数中定义函数，并使用闭包传递值。
2. 在组件函数内部，将值绑定到方法，然后使用绑定的方法。

进行上述任何一项操作都会更改对我需要维护的功能的常量引用，以便不input重新渲染组件。我该如何使用挂钩？可能吗

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

编辑：这不是React中useCallback做什么的重复项？因为我试图找出如何实现与类组件方式相似的效果，并且尽管useCallback提供 …

在我读过的反应文档中

传递内联回调和依赖项数组。useCallback 将返回回调的记忆版本，仅当依赖项之一发生更改时该版本才会更改。当将回调传递给依赖引用相等性来防止不必要的渲染的优化子组件时（例如，shouldComponentUpdate），这非常有用。

没关系，我们需要防止子组件不必要的渲染，但是对于当前使用 的组件useCallback，真正提供了什么useCallback？

据我所知useCallback，是为了防止当前组件重新渲染一遍又一遍地创建相同的函数（如果我错了，请纠正我），并且它将保留对相同函数的引用（不创建新函数）：只要依赖项数组包含相同的引用即可。

这样对吗？或者我们有更深层次的东西？

我已经检查了这个很好的答案，但它谈论的是防止（子级）重新渲染，我正在寻找useCallback当前组件的含义。