Question

我有一个功能组件（以前是基于类的，但是我决定使用react钩子对其进行重构）。因此，现在将在每次重新渲染时声明在内部声明的每个函数（在此示例handleClick中）。当它是基于类的组件时，由于函数存储在class属性中，因此不存在此类问题。所以，我的问题是这些功能属于哪里？

之前：

class Select extends Component {

    constructor(props) {
       super(props)
       state ={
          value: props.value
       }
    }
    render() {
       return <OtherComponent click={this.handleClick} />
    }

    handleClick = (value) => {
       this.setState({value})
    }
}

之后：

const Select = (props) => {
   const [value, setValue] = useState(props.value);
   return <OtherComponent click={handleClick} />
   function handleClick(value) {
     setValue(value)
   } 

}

Answer 1

您可以使用useCallback钩子来记住该函数，以便仅在其依赖项更改时才重新创建它。

类似这样的东西：

const Select = (props) => {
  const [value, setValue] = useState(props.value);
  const memoizedHandleClick = useCallback(
    (value) => {
      setValue(value)
    },
  );

  return <OtherComponent click={memoizedHandleClick} />
}

我强烈建议阅读完整的钩子参考，特别注意useState更新器的功能形式（即setValue(x => x + 1)）和useCallback的第二个参数，该参数列出了已记忆函数的依赖性。

参考： https://reactjs.org/docs/hooks-reference.html#usecallback

Answer 2

这些函数属于您的主要组件函数声明的主体内部。

奇怪的是，知道它们会在每个渲染器上重新创建，但这就是它要做的方式。

useCallback是一种优化函数重新创建的方法，但是除非您要构建非常昂贵的组件，否则在此主题上永远不会有任何性能问题。

从反应文档中，我们得到：

https://reactjs.org/docs/hooks-faq.html#are-hooks-slow-because-of-creating-functions-in-render

由于在渲染器中创建函数，钩子变慢了吗？

不。在现代浏览器中，与封闭类相比，闭包的原始性能没有很大区别，除非在极端情况下。

此外，请考虑通过以下几种方式更有效地设计Hooks：



钩子避免了类所需的大量开销，例如在构造函数中创建类实例和绑定事件处理程序的开销。



使用Hooks的惯用代码不需要深层的组件树嵌套，而在使用高阶组件，渲染道具和上下文的代码库中很常见。使用较小的组件树，React的工作量就减少了。



传统上，React中内联函数的性能问题与子组件中的ComponentUpdate优化应该如何在每个渲染中断处传递新的回调有关。钩子从三个方面解决这个问题。

useCallback挂钩可让您在重新渲染之间保持相同的回调引用，以便shouldComponentUpdate继续工作：

// Will not change unless `a` or `b` changes
const memoizedCallback = useCallback(() => {
  doSomething(a, b);
}, [a, b]);

如何在功能组件中编写处理程序和其他功能

2 个答案: