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

Question

i具有功能组件(以前是基于类的功能组件，但我决定用react钩子对其进行重构(。因此，现在在每个Rerender上声明的每个函数都将在每个Rerender上声明(在此示例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)
   } 
}

Answer 1

这些功能属于您的主组件函数声明的身体。

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

useCallback是您可以选择重新创建功能的一种方式，但是除非您构建非常昂贵的组件，否则您可能永远不会在此主题上遇到任何性能问题。

来自 react docs ，我们得到了：

https://reactjs.org/docs/hooks-faq.html#are-hooks-slow-bauce------- createating-functions-indrender

挂钩是因为在渲染中创建功能吗？

否。在现代浏览器中，除了极端情况外，与课程相比的原始封闭性能没有显着差异。

此外，考虑挂钩的设计在几种方面更有效：

• 挂钩避免了类所需的许多开销，例如创建类实例和绑定事件处理程序的成本。

• 使用挂钩的惯用代码不需要在使用高阶组件，渲染prop和上下文的代码库中普遍存在的深层组件树。对于较小的组件树，React的工作要少。

传统上，React中的内联功能的性能问题与在儿童组件中的每次渲染中的新回调相关的新回调有关。钩子从三个方面接近这个问题。

usecallback挂钩可让您在重新租赁器之间保留相同的回调引用，以便shorecomponentupdate继续工作：

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

Answer 2

您可以使用useCallback钩记录该功能，因此仅在其依赖关系更改时才会重新创建它。

类似的东西：

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

我强烈建议您阅读完整的挂钩参考，特别注意Usestate Updater(IE：setValue(x => x + 1)(的功能形式，以及对UseCallback的第二个参数，其中列出了您的记忆功能的依赖性。

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