时间戳

首页 > 解决方案 > 如何在功能组件中编写处理程序和其他函数

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

问题描述

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

前：

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)
   } 

}

标签： reactjsreact-hooks

解决方案

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

知道它们会在每次渲染时重新创建是很奇怪的，但这就是它应该完成的方式。

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

从React Docs中，我们得到：

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

由于在渲染中创建函数，Hooks 会变慢吗？

不会。在现代浏览器中，闭包与类相比的原始性能没有显着差异，除非在极端情况下。

此外，考虑到 Hooks 的设计在以下几个方面更有效：

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

  • 使用 Hooks 的惯用代码不需要在使用高阶组件、渲染道具和上下文的代码库中普遍存在的深层组件树嵌套。使用更小的组件树，React 要做的工作更少。

传统上，围绕 React 中内联函数的性能问题与如何在每次渲染时传递新的回调中断子组件中的 shouldComponentUpdate 优化有关。Hooks 从三个方面解决了这个问题。

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

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

推荐阅读