Reactjs render（）中的React函数

在react组件中放置函数的位置是否有首选项。我还在学习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>

    )

    }


  }

类内容扩展了React.Component{
///把函数放在这里有什么区别
你好（）{
}
render（）{
///还是在这里
你好（）{
}
返回（）(
废话
)
}
}

对于性能稍有影响的每次渲染，都将在渲染方法中创建一个函数。如果将它们放在渲染中也会很混乱，这是一个更大的原因，您不必在渲染中滚动代码来查看html输出。总是把它们放在课堂上

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

例如：

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

        return <div />
    }
);

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

constmystatelesscomponent=（{randomProp}）=>(
render（）{
剂量测定法（randomProp）；
返回
}
);
doSomething=（randomProp）=>{
//在这里做点什么
}

值得指出的是，有时您需要在render（）中执行密集计算并获得性能上的损失。特别是当它涉及到从道具进行计算时。以…为例

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

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

class.Component{
建造师（道具）{
超级（道具）；
此.state={
名称：props.firstName+props.lastName，
};
}
render（）{
返回{this.state.name}；
}
}

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

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

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

class.Component{
render（）{
const myName=this.props.firstName+this.props.lastName；
返回{myName}；
}
}

这个版本的内容更简洁：

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

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

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

class.Component{
calculateName=（）=>{
返回this.props.firstName+this.props.lastName；
}
render（）{
const myName=this.calculateName（）；
返回{myName}；
}
}

我在我的项目上也是这样做的。另外一种方法是使用ComponentWillReceiveProps（）方法来更新状态吗。Cwrp为1。在react 16+和2中已弃用。cwrp不会在初始渲染时触发。在渲染中运行计算，确保它在渲染中运行。