React 入門: React でコンポーネントを作成する方法

コンポーネントを作成する

コンポーネントを作成する前に、次の点に注意してください:

1. コンポーネント名の最初の文字は大文字にする必要があります

2. コンポーネントで返されるJSXはルートのみにすることができますノードであり、すべてのコンテンツは 1 つの要素を使用する必要があります

1. ステートレス機能コンポーネント

ステートレス機能コンポーネントは、コードがより読みやすく、合理化され、便利になり、冗長性が軽減されることを理解できます。ステートレス コンポーネントには次の特性があります:

1. コンポーネントはインスタンス化できず、全体的なレンダリングが向上します

2. インスタンス化されていないため、コンポーネントはこのオブジェクトにアクセスできません

3. コンポーネントにはライフサイクルがありません

4. ステートレスコンポーネントは入力プロパティにのみアクセスでき、状態はありません

import React from 'react'
import { connect } from 'dva';

 function CreateComponent(props) {
   console.log(props);
   return (
     <p>
        <span>{props.name}今年{props.age}岁</span>
     </p>
   )
 }

export default connect(state => ({
  name:'小明',
  age:15
}))(CreateComponent);

2. React.Component クラスのコンポーネント

各コンポーネントクラスは render メソッドを実装する必要があります。ここで、このレンダリング メソッドは次の要素を返す必要があります。 JSX 要素はすべてのコンテンツを最も外側の要素でラップする必要があります。以下に示すように、複数の JSX 要素を並べて返すことはできません。

import React from 'react'

class CreateComponent extends React.Component {
     render() {
       return(
         <p>
           <h2>标题</h2>
            <ul>
              <li>首先</li>
              <li>其次</li>
              <li>最后</li>
            </ul>
         </p>
       )
     }
}

export default CreateComponent;

上の例では、h2 要素と h2 要素の両方に p を使用しています。 ul. まとめ

1. コンポーネントのイベント監視

import React from 'react'

class CreateComponent extends React.Component {

   clickFunc = (e) => {
     console.log("监听:",e.target.innerHTML);
   }

   clickValue = (value) => {
     console.log(value);
   }
    render() {
      return (
       <p>
         <a onClick={this.clickFunc}>监听事件</a>
         <br/>
         <a onClick={this.clickValue.bind(this,123)}>this对象</a>
      </p>
      )
    }

}

export default CreateComponent;

上記はイベント監視とパラメータの受け渡しの例です

通常、コンポーネントでは状態を内部の状態に置くために使用されます。コンポーネントのパラメータ、および setState は状態のパラメータを変更するために使用されます。例:

3. コンポーネントの props

props は、コンポーネント内の独自の props を変更することはできません。たとえば、次のようにコンポーネントを作成し、このコンポーネントを別のコンポーネントで呼び出します:

import React from 'react'

class CreateComponent extends React.Component {
  state = {
    flag : true
  }
   clickValue = () => {
     this.setState({
       flag: !this.state.flag
     })
   }
    render() {
      return (
       <p>
         <span>flag的值为：{this.state.flag ? '真' : '假'}</span>
         <br/>
         <button onClick={this.clickValue}>改变flag值</button>
      </p>
      )
    }

}

export default CreateComponent;

コンポーネント NewComponent を作成し、次のように呼び出します:

import React from 'react';

function NewComponent(props) {
  return (
    <p>
       {props.content}
    </p>
  );
}


export default NewComponent;

ここから、props が属性であることがわかります。コンポーネントによってもたらされる値。Props は実際に外部コンポーネントの設定を許可し、state はコンポーネントが自身を制御する状態です。

コンストラクターコンポーネントの初期化:

コンストラクターいくつかのパラメーターのプロパティなどを初期化します。

componentWillMount コンポーネントのレンダリング前:

componentWillMount この関数は、react16.3.0 以降、徐々に非推奨になりました。コンポーネントの後に実行されますレンダリングとデータのロードが可能

レンダーコンポーネントのレンダリング:

レンダーコンポーネントのレンダリング 表示ページ

import React from 'react'
import NewComponent from './newComponent.js'

class CreateComponent extends React.Component {
    render() {
      return (
       <p>
         <NewComponent content={&#39;我是内容&#39;} />
      </p>
      )
    }

}

export default CreateComponent;

出力結果:

import React from 'react'

class CreateComponent extends React.Component {
  constructor () {
    super()
    console.log('construct:页面初始化')
  }

  componentWillMount () {
    console.log('componentWillMount：页面将要渲染')
  }

  componentDidMount () {
    console.log('componentDidMount：页面渲染结束')
  }


    render() {
      console.log('render：页面渲染');
      return (
       <p>
         页面渲染
      </p>


      )
    }

}

export default CreateComponent;

componentWillUnmountコンポーネントの削除

componentWillUnmount関数はコンポーネントの削除前に実行される関数です次のコード:

construct:页面初始化
componentWillMount：页面将要渲染
render：页面渲染
componentDidMount：页面渲染结束

コンポーネント NewComponent を作成し、このコンポーネントを CreateComponent コンポーネントに導入します:

import React from 'react';

class NewComponent extends React.Component {
  componentWillUnmount() {
    console.log('componentWillUnmount:将要从页面中删除');
  }

  render() {
    return (
      <p>
         {this.props.content}
      </p>
    );
  }

}

export default NewComponent;

削除ボタンをクリックすると、コンポーネント NewComponent が削除され、componentWillUnmount 関数が実行されます。削除前

出力結果:

import React from 'react'
import NewComponent from "./newComponent.js";

class CreateComponent extends React.Component {
  constructor () {
    super()
    console.log('construct:页面初始化');
    this.state = {
      content:'测试组件',
      isDelete:false
    }
  }

  componentWillMount () {
    console.log('componentWillMount：页面将要渲染')
  }

  componentDidMount () {
    console.log('componentDidMount：页面渲染结束')
  }

  deleteFunc = () => {
    this.setState({
      isDelete:true
    })
  }


    render() {
      console.log('render：页面渲染');
      return (
       <p>
         页面渲染
         <input type="button" value=&#39;删除&#39; onClick={this.deleteFunc}/>
         {!this.state.isDelete?(
          <NewComponent content={this.state.content}/>
         ):(null)}

      </p>


      )
    }

}

export default CreateComponent;

上記のライフサイクルは、一般的に使用されるコンポーネントのライフサイクルです。ライフサイクルには更新フェーズのライフサイクルもありますが、これらは比較的まれに使用されます。

shouldComponentUpdate(nextProps, nextState)

以下に示すように、コンポーネントを再レンダリングするかどうかを制御します

construct:页面初始化
componentWillMount：页面将要渲染
render：页面渲染
componentDidMount：页面渲染结束
componentWillUnmount:将要从页面中删除

。これは、 shouldComponentUpdate で戻り値が false に設定されているため、ページは再描画できません。この関数の最初のパラメータは最新のプロパティを表し、2 番目のパラメータは最新の状態を表します

componentWillReceiveProps(nextProps)

このコンポーネントは、親コンポーネントから新しいプロパティを受け取る前に呼び出されます。関数のパラメータ nextProps は、

NewComponent コンポーネント内:

import React from 'react'
import NewComponent from "./newComponent.js";

class CreateComponent extends React.Component {
  constructor () {
    super()
    console.log('construct:页面初始化');
    this.state = {
      content:'测试组件',
      isDelete:false
    }
  }

  componentWillMount () {
    console.log('componentWillMount：页面将要渲染')
  }

  componentDidMount () {
    console.log('componentDidMount：页面渲染结束')
  }

  shouldComponentUpdate(nextProps, nextState){
    if(nextState.isDelete){
      return false;
    }

  }

  deleteFunc = () => {
    this.setState({
      isDelete:true
    })
  }


    render() {
      console.log('render：页面渲染');
      return (
       <p>
         页面渲染
         <input type="button" value=&#39;删除&#39; onClick={this.deleteFunc}/>
         {!this.state.isDelete?(
          <NewComponent content={this.state.content}/>
         ):(null)}

      </p>


      )
    }

}

export default CreateComponent;

コンポーネント CreateComponent 内:

import React from 'react';

class NewComponent extends React.Component {
  componentWillUnmount() {
    console.log('componentWillUnmount:将要从页面中删除');
  }

  componentWillReceiveProps(nextProps){
    console.log(nextProps);
  }

  render() {
    return (
      <p>
         {this.props.content}
      </p>
    );
  }

}

export default NewComponent;

ただし、componentWillReceiveProps は、react16.3.0 の開始後に非推奨になります

componentWillUpdate:

このメソッドは、コンポーネントが再実行される前に呼び出されます。レンダリングされ、react16.3.0 で使用されます 開始後に非推奨になります

componentDidUpdate:

コンポーネントは再レンダリングされ、変更が実際の DOM に変更されます。後で呼び出してください

注:

componentWillUpdate、componentWillReceiveProps、componentWillMount 3 つのライフ サイクルは、react116.3.0 以降非推奨になります

関連する推奨事項:

React コンポーネントのライフサイクル インスタンス分析

React コンポーネント Dragact 0.1.4 の詳細な説明

以上がReact 入門: React でコンポーネントを作成する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。