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

- Whymess

Answer 1

在渲染方法中创建函数会导致轻微的性能损失。如果将它们放在渲染方法中，代码会变得混乱不堪，并且你不应该必须在渲染中滚动查看HTML输出。始终将它们放在类上。

对于无状态组件，最好将函数保持在主函数外部并传入props，否则每次重新渲染都会创建函数。我没有测试过性能，所以不知道这是否是微优化，但值得注意的是。

例如：

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

        return <div />
    }
);

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

- Martin Dawson

---

我在我的项目中也是这样做的。 - yussan

如果您将doSomething作为组件，例如const DoSomething = (props) => { ...}，然后在渲染时像这样使用<DoSomething {...randmProp} />，我认为这可能会减轻性能损失，根据文档https://reactjs.org/docs/conditional-rendering.html。 - taylor michels

Answer 2

值得一提的是，有时候你希望在render()函数中执行密集计算并承受性能损失，特别是当涉及到从props进行计算时。以此为例：

class Person extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      name: props.firstName + props.lastName,
    };
  }

  render() {
    return <div> {this.state.name} </div>;
  }
}

现在，当props改变时，状态不会更新，因为构造函数只在组件挂载时运行。更好的方法是在render中进行计算。因此，每当您的组件重新呈现时，它会重新计算并呈现正确的值。

class Person extends React.Component {
  render() {
    const myName = this.props.firstName + this.props.lastName;

    return <div> {myName} </div>;
  }
}

这个版本更加易读：

class Person extends React.Component {
  calculateName = () => {
    return this.props.firstName + this.props.lastName;
  }

  render() {
    const myName = this.calculateName();

    return <div> {myName} </div>;
  }
}

- Gunther

---

另一种做法不是可以使用componentWillReceiveProps()方法来更新状态吗？ - Andrew

有点儿。Cwrp在React 16+中已被弃用，且cwrp不会在初始渲染时触发。在渲染中运行计算可以确保它在渲染时运行。 - Gunther