Question

我想问。我应该在React无状态组件中的哪里定义函数？

例如：

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

伪代码：

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

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

或

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

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

但我也想避免：

渲染时调用函数
我不想使用“ useCallback”钩子来防止创建新的参考。

如果只有一种解决方案是在Parent组件中创建函数并将其通过props发送给Children组件，然后再调用此函数？

有人可以向我解释一下，如何在没有useCallback或useMemo挂钩的情况下以最佳性能做到这一点？

谢谢。

Answer 1

我认为您的两种方法之间确实没有任何区别。您的第一个示例实际上需要看起来像这样：

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

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

因此无论如何，您仍然必须在每个渲染上创建一个新函数。

在性能方面，几乎可以肯定您不必担心它。与正在发生的其他一切相比，创建新函数（而不调用它们）是微不足道的。

Answer 2

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

请考虑以下示例。您的父级组件会重新渲染，因此SFC子级也会重新渲染（仅供参考：每次父级重新渲染时，SFC都会重新渲染，它没有任何内置的浅层道具比较逻辑）。

如果在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>
  );
}

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

2 个答案: