React - 无状态组件，组件内部或外部的函数

Question

我想问一下，在React无状态组件中应该在哪定义函数?

比如说：

我想要准备一个函数以便带上一些参数调用它，但是我想避免在重新渲染后创建一个新的函数。

伪代码:

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

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

或者

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

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

但我也想避免：

• 在渲染过程中调用函数
• 我不想使用"useCallback"钩子来防止创建新的引用。

如果唯一的解决方案是在父组件中创建函数，将其通过 props 发送到子组件，然后再调用该函数？

有人可以向我解释一下，如何在没有useCallback或useMemo钩子的情况下以最佳性能实现它吗？

谢谢。

- frontreact

---

可能是无状态组件中的函数？的重复问题。 - jmargolisvt

为什么你不想使用 useCallback？ - duc mai

我认为将子函数定义在组件外部可能会更有效率，但很难想象这会对实际应用产生多大的影响。如果子函数仅在此组件中使用，我会根据通用软件设计原则将其定义在（函数）组件的作用域内。 - Robin Zigmond

Answer 1

---

2021编辑：

---

在实施React Hooks之后，这个问题就不再相关了 - 你可以在函数组件内部声明函数，只要你想。然而，如果你想避免子元素重新渲染，可以使用useCallback钩子来包装你的函数，这样函数实例就会在渲染之间保留。

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

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

---

旧答案：

---

我建议尽可能将函数放在无状态组件之外。

考虑以下示例。您的父组件重新呈现，因此SFC子组件也会重新呈现（FYI：每次父级重新呈现时，SFC都会重新呈现，它没有任何内置的浅层props比较逻辑）。

如果在SFC内部声明函数，则每次重新呈现都会创建一个全新的实例。

如果在SFC外部声明函数，则它将被使用n次，但函数本身将保持相同的实例。

在StackBlitz上的工作示例：https://stackblitz.com/edit/react-1m2hds 如何测试它 - 在输入框中写入一些内容，然后单击子元素。父项将重新呈现，因此子项也会重新呈现。外部框函数fn1被推到窗口变量test1中，内部框函数fn2进入test2中。现在重复过程。如果比较test1中的函数 - > test1 [0] === test1 [1]将返回true，因为这两个函数是相同的实例。

如果比较test2 [0] === test2 [1]，它将返回false，因为创建了函数的新实例。

注意：使用内置的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>
  );
}

- kind user

---

灵活性成为新常态，真是太好了 :) - Dogunbound hounds