render()中的React函数

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

每次渲染都会创建一个render方法中的函数,这是一个轻微的性能影响.如果你把它们放在渲染中也很麻烦,这是一个更大的原因,你不必在渲染中滚动代码来查看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>;
  }
}