コンポーネント入門を反応させます

コンポーネント入門を反応させます

最小単位の内側に反応する：要素/仮想ノードを反応

リアクトでは、アセンブリと呼ばれる概念があります

コンポーネント：ページより微細な粒子の大きさは、モジュラー部門に分かれています。

コンポーネントを作成する方法であって、クラス（クラス継承）：クラスアプリ} {延びています。

2020年2月13日

状態や小道具：二つの成分のコアコンセプト

状態：内部状態（動的データ）を記述するために使用される成分の

[外国チェーンの写真は、ソースステーションは、セキュリティチェーン機構を有していてもよい失敗ダンプ、ダウン直接アップロードした画像を保存することをお勧めします（IMG-9iexgbZG-1582465469233）（C：\ Users \ユーザージョーイ\のAppData \ローミング\ Typora \ typora-ユーザー画像\画像20200213145958058.png）]

再レンダリングノードへの変更は自動的に、それらの異なるノードにポストが反応する見つかりましたでしょうがあります

例えば：

import React from "react";

export default class Counter extends React.Component {
    state = {
        count: 0
    };
    render() {
        return (
            <div>
                <p>
                    你一共点击了{this.state.count}次
                </p>
//给button添加事件，用户点击加号count就加1，
                <button
                    onClick={
                        ()=>{
                            this.setState({
                                count:this.state.count+1
                            })
                        }
                    }
                >+
                </button>
            </div >
        )
    }
}

関数のスコープは1つだけを生成します

React.createRef（）;ノードネイティブを得るために使用される方法、

パッケージ

アセンブリは、ステートレスコンポーネント（ステートレス）及びステートフルアセンブリ（ステートフル）に分割することができます

小道具の外部インターフェース

ネストされたコンポーネントが反応する、それは小道具を使用します

[外国チェーンの写真は、ソースステーションは、セキュリティチェーン機構を有していてもよい失敗ダンプ、ダウン直接アップロードした画像を保存することをお勧めします（IMG-qboqaiZj-1582465469235）（C：\ Users \ユーザージョーイ\のAppData \ローミング\ Typora \ typora-ユーザー画像\画像20200222094530833.png）]

サブアセンブリのアセンブリインタフェースに反応するように、サブアセンブリは避けるエラーするために、注意を直接持っ使用されている、小道具は、サブアセンブリのデフォルト値を与えます

static defaultProps = {};//默认值，避免运行出错

[外国チェーンの写真は、ソースステーションは、セキュリティチェーン機構を有していてもよい失敗ダンプ、ダウン直接アップロードした画像を保存することをお勧めします（IMG-XXrmQD5F-1582465469245）（C：\ Users \ユーザージョーイ\のAppData \ローミング\ Typora \ typora-ユーザー画像\画像20200222094727272.png）]

サンプルコード

import React from "react";//引入React以及自定义的两个组件
import Title from "./title"
import Ibutton from "./Ibutton"

export default class extends React.Component {
    state = {//自定义count为1
        count: 1
    }
    increase = () => {
        this.setState({
            count:this.state.count + 1   //count增加的方法
        })
    }
    decrease = () => {
        this.setState({
            count:this.state.count - 1   //count减小的方法
        })
    }
    render() {
        return (
            <div>
                <Title count={this.state.count} />   //count接口把值暴露出去
                <Ibutton name={"+"} onClick={this.increase} />
                <Ibutton name={"-"} onClick={this.decrease} />
            </div>
        )
    }
}

サブアセンブリのiButtonとタイトル

//title:
import React from "react";

export default class extends React.Component{

    static defaultProps = { //定义默认值，避免出错，兼容性考虑
        count:0
    }
    render(){
        return (
        <h1>{this.props.count}</h1>
        )
    }
}
//Ibutton：
import React from "react";

export default class extends React.Component{

    static defaultProps = {  //同样的定义默认值，避免出错，兼容性考虑
        name:"55",
        onClick:()=>{console.log("click")}
    }

    render(){
        return (
        <button onClick={this.props.onClick}>{this.props.name}</button>
        )
    }
}

pureComponent

React.PureComponent

React.PureComponentそして、React.Componentそれは非常によく似ています。違いはされReact.Component達成されずshouldComponentUpdate()、かつReact.PureComponent浅い状態と小道具の方法とは対照的に、この機能を実現します。

所与同じ小道具コンポーネントと状態を反応させる場合、render()機能は同じ内容、使用をレンダリングし、いくつかのケースではReact.PureComponent、パフォーマンスを向上させることができます。

ご注意ください

React.PureComponentshouldComponentUpdate()唯一のオブジェクトとして比較的浅いです。オブジェクトは、複雑なデータ構造が含まれている場合、彼らは結果よりも深い違い、エラーを確認することができないので、それが可能です。あなたの小道具や状態は比較的簡単、ちょうど使用された場合にのみReact.PureComponent、またはデータ呼の構造の深い変化は時にforceUpdate()コンポーネントが正しく更新されていることを確認します

注：直接最適化パフォーマンスするために、データの内部が真実で操作していないため、我々はその理由を述べる前に。