Question

将函数放在这样的渲染中是一种不好的做法吗？

每次渲染都会创建这些函数，从而导致性能下降吗？性能有多大？是否有某个链接可以衡量这个或可靠的来源，说这很糟糕？

这是否会以任何方式导致不必要的渲染？我听说PureComponent特别不是一个好主意。

无法澄清这是否合适。

class MyComponent extends Component {
  ...

  render() {
    const myFunc1 = () => {};
    const myFunc2 = () => {};
    const myFunc3 = () => {};
    const myFunc4 = doSomething(() => {});

    return (
      <div>hello world</div>
    );
  }
}

Answer 1

将函数放在这样的渲染中是一种不好的做法吗？

是的

每次渲染都会创建这些函数，从而导致性能下降吗？

是

性能有多大？

它可以从完全可以忽略不计（大多数简单组件）到绝对关键（如果您经常在复杂的应用程序上重新渲染整个树）。

是否有某个链接可以衡量这个或可靠来源说这是坏事？

请参阅Chase DeAnda's answer。

这是否会以任何方式导致不必要的渲染？我听说这对PureComponent来说尤其不是一个好主意。

实际上，由于函数将在每次渲染时创建，如果将它们传递给PureComponent，它会认为函数已更改并将再次渲染。

无法澄清这是否合适。

我希望这会有所帮助。

Answer 2

更像是一种不好的做法。它不会破坏您的代码，但可能会导致一些严重的性能问题。来自React Docs

此语法的问题是创建了不同的回调每次组件渲染。在大多数情况下，这很好。然而，如果这个回调作为prop传递给较低的组件，那些组件可能会进行额外的重新渲染。我们一般建议在构造函数中绑定或使用属性初始化器语法，避免这种性能问题。

所以你在这个例子中所拥有的很好，因为你并没有将它作为道具传递下去。如果您将myFunc4作为道具传递给div，那么您会看到一些性能问题。

Answer 3

将函数放在这样的渲染中是一种不好的做法吗？

嗯，它肯定不是良好的练习，但从表现的角度来看，它完全取决于项目。

每次渲染都会创建这些函数，从而导致性能下降吗？性能有多大？

是，这些功能是在每次render来电时创建的，如果你做的事情比今年的第600个求职玩具稍微复杂一点，那么你正在打电话你的render反复快速（例如在60 FPS渲染周期中），新创建的函数对象将对性能产生次要影响，因为垃圾收集器必须更频繁地运行。 / p>

这又是依赖于项目和基于意见的，但是我们有一个规则，就是更喜欢在任何渲染调用之外创建非原始对象（或者与渲染直接关联的任何生命周期方法，例如{{1} }）。

这是否会以任何方式导致不必要的渲染？

简单地在componentDidUpdate内创建函数对象本身不会导致额外的不必要的渲染，但正如我所提到的，函数对象是在每次render调用时创建的，这可能比你可能一开始就预料到了。

如果您还将这样的函数对象作为回调或处理程序传递给子组件，请记住，对于对props进行浅层引用检查的render实现将触发，因为每个渲染都会传递给你一个不同的函数对象引用。

在渲染中创建函数是不是很糟糕？

3 个答案: