reactjs - render() 中的 React 函数

Question

在 React 组件中放置函数的位置是否有偏好？我仍在学习 React，所以只是想找出最佳实践。

class Content extends React.Component {
  // What is the difference between putting functions here such as 
  Hello() {

  }
  
  render() {
    // or here
    Hello() {

    }

    return() (
      <div>blah blah</div>
    );
  }
}

Answer 1

每次渲染都会创建渲染方法中的一个函数，这会对性能造成轻微影响。如果你把它们放在渲染中也会很困惑，这是一个更大的原因，你不应该在渲染中滚动代码来查看 html 输出。始终将它们放在类里面。

对于无状态组件，最好将函数保留在主函数之外并传入 props，否则每次渲染也会创建该函数。我尚未测试性能，因此我不知道这是否是微优化，但值得注意。

示例:

const MyStatelessComponent = ({randomProp}) => (
    render() {
        doSomething(randomProp);

        return <div />
    }
);

doSomething = (randomProp) => {
    //Do something here
}