コミュニティ 学ぶ ツールライブラリ レジャー
検索
日本語
ホームページ > ウェブフロントエンド > jsチュートリアル > React 入門: React でコンポーネントを作成する方法

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

不言
リリース： 2018-08-22 17:41:50
オリジナル
1531 人が閲覧しました

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

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

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

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

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

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

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

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

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

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

    5. 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 サイトの他の関連記事を参照してください。

関連ラベル：
javascript react.js
ソース：php.cn
前の記事：jsにはループメソッドがいくつありますか? jsの7つのループメソッドの紹介（コード付き） 次の記事：React におけるキー値の役割とキー値の使用法は何ですか? (コード付き)
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
著者別の最新記事
最新の問題
JavaScript を使用せずにクリック時に画像ソースを動的に変更する CSS のみのメソッド img:active{} のような CSS のみを使用して、マウスクリック時に画像の src を変更する必要があります
から 2024-04-06 19:25:49
0
1
505
d3.js でズームインすると散布図のポイントの値が維持されない d3.js を使用するのは初めてなので、ご容赦ください。 vue.js ファイルに純粋な JavaScript として実装しました。ズーム機能を使用して散布図を作成しようとしていま...
から 2024-04-06 18:16:26
0
1
403
ベンダー固有の疑似要素上の JavaScript ホバー イベント 次の htmlinput タグがあります。 $("input[type='range']::-webkit-slider-thumb").on('hover',...
から 2024-04-06 15:35:24
0
1
274
Javascript/Jqueryを使用してボタンなしでフォームを送信する JavaScript 関数を呼び出し、JQUERY/PHP を使用してフォームを実行することにより、ボタンのないフォームを送信しようとしています。ページを再読み込みせずに、バックエ...
から 2024-04-06 14:54:03
0
2
421
CollapseDisplay クラスを使用してブートストラップ アコーディオン ヘッダーの外観をカスタマイズする class Collapseshow を使用してパネルのカード タイトルのスタイルを設定したいと考えています。この例では、最初のパネルです。 CSS を使用して .accordio...
から 2024-04-06 12:53:11
0
1
376
関連トピック
詳細>
人気のおすすめ
人気のチュートリアル
詳細>
関連するチュートリアル
人気のおすすめ
最新のコース
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート