如何在功能組件中編寫處理程序和其他功能

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掛鈎來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是一種優化函數重新創建的方法，但是除非您要構建非常昂貴的組件，否則在此主題上可能永遠不會出現任何性能問題。

從React Docs中 ，我們得到：

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

掛鈎是否由於在render中創建函數而變慢？

不。在現代瀏覽器中，閉包的原始性能與類相比，除極端情況外沒有顯着差異。

此外，請考慮通過以下幾種方式更有效地設計Hooks：

• 掛鈎避免了類所需的大量開銷，例如在構造器中創建類實例和綁定事件處理程序的開銷。

• 使用Hooks的慣用語代碼不需要在使用高階組件，渲染道具和上下文的代碼庫中普遍存在的深層組件樹嵌套。 使用較小的組件樹，React要做的工作更少。

傳統上，React中內聯函數的性能問題與子組件中的ComponentUpdate優化如何在每個渲染中斷處傳遞新的回調有關。 掛鈎從三個方面解決了這個問題。

useCallback Hook可讓您在重新渲染之間保持相同的回調引用，以便shouldComponentUpdate繼續工作：

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