在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>
)
}
}
render 方法中的一个函数将在每次渲染时创建，这是一个轻微的性能损失。如果你把它们放在渲染中也会很混乱，这是一个更大的原因，你不应该在渲染中滚动代码来查看 html 输出。总是把它们放在课堂上。
对于无状态组件，最好将函数保留在主函数之外并传入 props，否则该函数也会在每次渲染时创建。我还没有测试过性能，所以我不知道这是否是一个微优化，但值得注意的是。
例子：
const MyStatelessComponent = ({randomProp}) => (
render() {
doSomething(randomProp);
return <div />
}
);
doSomething = (randomProp) => {
//Do something here
}
值得指出的是，有时您希望在 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 改变时，状态不会更新，因为构造函数只在组件被挂载时运行。更好的方法是在渲染中进行计算。因此，每当您的组件重新渲染时，它都会重新计算并渲染正确的值。
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>;
}
}