React基礎入門(技術的に太い基礎教程の例)

今週reactフレームワークの基礎知識を勉強しました.大体いくつかの公式文書の内容は以下のように分けられます.1、JSX文法を簡単に理解するJSX文法はJavaScript+XML文法です.コンポーネントの拡張子.jsxまたは.jsは、コンポーネント名が大文字であるとエラーが発生します.2、コンポーネント状態コンポーネントの変数は状態によって管理され、アクセスはthis.state.変数名によって、修正はthis.set State({}を使用し、setsStateはコールバック関数を提供することができます.状態が向上するという概念があります.コンポーネント間でデータを共有する必要があるなら、一番近い親のコンポーネントにデータを置く必要があるという意味です.

constructor(props) {
   super(props);
   this.state = {  }
}

3、親子コンポーネント間の通信父コンポーネントは、プロpsを介してサブアセンブリにデータを伝達し、サブアセンブリは、親コンポーネントからのデータを修正することができないが、親コンポーネントを受信する方法は、親コンポーネントの方法でデータを修正することができる.実例に示す.4、Reactライフサイクル関数ライフサイクル関数の理解はコンポーネントのレンダリングから破壊までの過程に自動的に完成できるフック関数を注入しました.これらのフック関数を利用してコンポーネントを操作できます.vueのライフサイクル関数もこの道理です.ライフサイクル関数でデータを取得できます.

componentDidMount(){
        axios.get('http://iwenwiki.com/api/blueberrypai/getIndexBanner.php')
        .then((res)=>{
            console.log(JSON.stringify(res))
        })
        .catch((error)=>{
            console.log("      ：" + error)
        })
    }
 

これはコンポーネント更新を許可する関数です.trueに戻ると更新が許可されます.falseに戻り、更新が許可されません.下の関数の役割は、親コンポーネントを操作している間に、サブアセンブリが更新されていることを防止します.判定条件を追加します.コンポーネントが変化する属性など、propsに伝達されてきたコンテンツに対してのみ、サブアセンブリのdomをレンダリングします.

shouldComponentUpdate(nextProps,nextState){
        if(nextProps.content !== this.props.content){
            return true;
        }else{
            return false;
        }
    }

5、PropTypeは、親のコンポーネントから渡されたデータをタイプチェックし、満足しないとコンソールでエラーを報告します.

Foodmenuitem.propTypes = {
    content:PropTypes.string,
    index:PropTypes.number,
    deleteItem:PropTypes.func
};

6、例の親コンポーネントfoodmunu.jsx親コンポーネントには入力ボックスがあります.一つのbuttonをクリックして、テキストボックスの値を追加できます.

入力枠inputにIDを付けて、labelのhtml For="id"をクリックして、labelラベルをクリックするとテキストボックスに

を入力するように促すことができます.

ref作用は伝わってくるe.target.valueを使わないので、非制御コンポーネントの書き方かもしれないと思います.

が分子構成要素を取り外さなかった場合は、リストをthis.state.list.map(item,index)によってレンダリングし、keyの値

に注意する.

入力ボックスは、htmlタグdangerouslySetInnerHTML={{_}:item}

を識別することができます.

 handleChange = () => {
        this.setState({
            // inputValue: e.target.value
            inputValue:this.input.value
        })
    }

追加します.これはES 6によって構成された値の構文を通してlistに値を割り当て、その後inputをクリアすることで、テキストボックスを空にする効果があります.

 add = () => {
        this.setState({
            list: [...this.state.list, this.state.inputValue],
            inputValue: ''
        },()=>{
            console.log(this.ul.querySelectorAll('li').length)
        })
    }

                

                        ：
                    {this.input = input}} //
                    />
                    Add
                
                
{this.ul = ul}}>
                    {
                        this.state.list.map((item, index) => {
                            return (

                                // 

                                //  {/* {item} */}
                                // 
                                

                            )

                        })
                    }
                
            

サブコンポーネント:このうち、親コンポーネントがサブコンポーネントに伝達するパラメータは、content、index、および削除する方法deletem foodmunuitem.jsxである.

 return ( 
            
{this.props.content}
        );

削除の方法deleteItem親コンポーネント

 delete(index) {
        console.log(index);
        let list1 = this.state.list;
        list1.splice(index, 1);
        this.setState({
            list: list1
        })
    }

サブコンポーネント

handleClick = ()=>{
        this.props.deleteItem(this.props.index)
    }

サブコンポーネントは、プロpsで親コンポーネントを受信して渡される方法で、クリック削除項目を実現する.
注:Chromeの二つのデバッグツール

Vue.js

.devtools React Developer Tools

redux DevTools

v scodeプラグイン

快速生成reactコードSimpleReact Snippets

コードフォーマットVetur