React - 無狀態組件，function 內部或外部組件

Question

我想問一下。 我應該在 React 無狀態組件中在哪里定義 function？

例如：

我想准備 function 用一些參數調用它，但我想避免在重新渲染后創建新的。

偽代碼：

    const example = (params) => {...}

    const statelessComponent = () => {
        return(
             <button onClick={example(params)}
        )
    }

或者

    const statelessComponent = () => {
        const example = (params) => {...}

        return(
             <button onClick={example(params)}
        )
    }

但我也想避免：

• 渲染時調用 function
• 我不想使用“useCallback”鈎子來阻止創建新的引用。

如果只有一種解決方案是在父組件中創建 function 並通過道具將其發送到子組件，然后調用此 function？

有人可以解釋一下，如何在沒有 useCallback 或 useMemo 鈎子的情況下以最佳性能做到這一點？

謝謝你。

Answer 1

---

2021年編輯：

---

在實現 React Hooks 之后，這個問題就不再相關了——你可以在你的函數組件中聲明函數，只要你願意。 但是，如果您想避免孩子重新渲染，您可以使用useCallback鈎子包裝您的函數，以便 function 實例保留在渲染之間。

const handleChange = useCallback(() => /* do stuff */, []);

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

---

老答案：

---

我建議盡可能將您的功能保留在無狀態組件之外。

考慮以下示例。 您的父組件會重新渲染，因此 SFC 子組件會重新渲染（僅供參考：每次父組件重新渲染時，SFC 都會重新渲染，它沒有任何內置的淺道具比較邏輯）。

如果您在 SFC 中聲明 function，它將在每次重新渲染時創建一個全新的實例。

如果您在 SFC 之外聲明 function，它將被使用 n 次，但 function 本身將保持相同的實例。

StackBlitz 的工作示例： https://stackblitz.com/edit/react-1m2hds

如何測試它- 在輸入中寫一些東西，然后點擊孩子。 父母會重新渲染，所以孩子會這樣做。 外箱 function fn1被推送到 window 變量test1 ，內箱 function fn2進入test2 。 現在重復過程。 如果您比較test1 -> test1[0] === test1[1]中的函數，將返回true ，因為這兩個函數都是同一個實例。

如果您比較test2[0] === test2[1]它將返回false ，因為創建了 function 的新實例。

注意：使用內置 StackBlitz 控制台進行測試。

最后一點：不管上面說了什么，性能差異基本上是不明顯的。

 window.test1 = []; window.test2 = []; class App extends Component { state = { name: 'React' }; handleChange = (e) => this.setState({ name: e.target.value }); render() { return ( <div> <Child name={this.state.name} /> </div> ); } } const fn1 = () => {}; const Child = ({ name }) => { const fn2 = () => {}; const checkout = () => { window.test1.push(fn1); window.test2.push(fn2); } return ( <div onClick={checkout}>{name}</div> ); }

Answer 2

我認為您的兩種方法之間沒有任何區別。 您的第一個示例實際上需要如下所示：

const example = (params) => {...}

const statelessComponent = () => {
    return(
        <button onClick={() => example(params)}
     )
 }

因此，無論如何，您仍然必須在每次渲染時創建一個新的 function。

在性能方面，您幾乎可以肯定不需要擔心它。 與正在發生的其他事情相比，創建新函數（而不是調用它們）是微不足道的。