web-dev-qa-db-ja.com

React render（）内の関数

反応コンポーネント内で関数を配置する場所に好みがありますか？私はまだ反応を学んでいるので、ベストプラクティスを見つけようとしています。

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

   }

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

   }


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

    )

    }


  }
reactjscomponents
17
Whymess

Renderメソッドの関数は、レンダリングごとに作成されますが、パフォーマンスがわずかに低下します。また、レンダリングに配置するのは面倒です。これははるかに大きな理由であり、html出力を表示するためにレンダリングでコードをスクロールする必要はありません。代わりに常にクラスに配置してください。

ステートレスコンポーネントの場合、おそらく関数をメイン関数の外に置いて代わりにpropsを渡すのが最善です。そうでない場合は、各レンダリングでも関数が作成されます。パフォーマンスをテストしていないので、これがマイクロ最適化であるかどうかはわかりませんが、注目に値します。

例：

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

        return <div />
    }
);

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

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