Question

是否优先考虑将函数放在react组件中的位置。我仍然在学习反应，所以只是想弄清楚最佳实践。

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

   }

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

   }


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

    )

    }


  }

Answer 1

渲染方法中的一个函数将在每次渲染时创建，这是一个轻微的性能影响。如果你把它们放在渲染中也很麻烦，这是一个更大的原因，你不必在渲染中滚动代码来查看html输出。总是把它们放在课堂上。

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

示例：

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

        return <div />
    }
);

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

Answer 2

值得指出的是，有时您希望在render（）中执行密集计算并获得性能影响。特别是当涉及从道具进行计算时。以

为例

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

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

现在当props更改时，状态将不会更新，因为构造函数仅在安装组件时运行。更好的方法是在渲染中进行计算。因此，每当您的组件重新渲染时，它都会重新计算并呈现正确的值。

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

render（）中的React函数

2 个答案: