個人react學習

時間  2019-12-07
標籤 個人 react 學習 欄目 React 简体版
原文   原文鏈接

基礎部分

建立一個react的項目

  • 建立一個react的項目html

    全局安裝 react 指令react

    // 全局安裝react （根據須要安裝，不是必須的）
    npm i -g react // 或者 yarn -global react

    // 全局安裝 react的腳手架 (建立react的應用，必須安裝腳手架)
    npm i -g create-react-app // 或者 yarn -global create-react-app

    使用腳手架建立應用npm

    create-react-app 應用名稱
// 例如建立一個TodoList應用
create-react-app todo-list

    注意點：瀏覽器

    1.全局安裝create-react-app才能使用腳手架建立應用
  2.應用名稱所有爲小寫字母，不能出現「TodoList」這樣的名稱

組件的使用

  • 組件的組成app

    // React 是react組件必不可少的，用於支持jsx語法的模塊，雖然看不到引用，可是不能少
    // Component 全部的react的組件都繼承於Component，它是react組件的基類
    import React, { Component } from 'react';

    // TodoItem 自定義的組件
    import TodoItem from "./TodoItem"

    // 定義TodoList組件 ，該組件繼承於基類Component
    class TodoList extends Component {
            /***
             * constructor 當前類的構造函數
            * props 簡單的理解：是父類傳遞的參數，例如 傳遞的值 或 方法，它是一個對象
            * super(props) 簡單的理解是：繼承父類中的傳遞的參數
            **/
        constructor(props){
            super(props)
            // state 是 全部react變量的倉儲，簡單理解就是：當前組件的變量都放在這個對象中
            this.state = {
                inputValue: "",
                List: []
            }
            // 使用 bind綁定this，讓方法中的this永遠指向當前的組件（可根據需求改變this的指向）
            this.getList =  this.getList.bind(this)
            this.inputChang = this.inputChang.bind(this)
            this.addItem = this.addItem.bind(this)
            this.delItem = this.delItem.bind(this)
        }
        // react組件必不可少的方法，return 返回的是jsx的模板，能夠理解爲相似html+js的模板
        render() {
            return (
                {/*在jsx中只能有一個根標籤，使用<></>(幽靈標籤)包裹，既能知足jsx的語法格式，在瀏覽器解析時不會解析幽靈標籤，減小了dom樹結構節點 */}
                <>
                    <div>
                        <input value={this.state.inputValue} onChange={this.inputChang} /> <button onClick={this.addItem}>添加</button>
                    </div>
                    <ul>
                        {this.getList()}
                    </ul>
                </>
            );
        };

        // 遍歷輸出item
        getList() {
            ...
        }
        // 動態改變輸入框的值
        inputChang( e ) {
            ...
        }

        // 添加item
        addItem() {
            ...
        }

        // 刪除item
        delItem(index) {
            ...
        }
    }
    // 導出TodoList
    export default TodoList;

  • 認識jsxdom

    簡單的jsx的語法函數

    ...
    render() {
        return (
            {/*在jsx中只能有一個根標籤，使用<></>(幽靈標籤)包裹，既能知足jsx的語法格式，在瀏覽器解析時不會解析幽靈標籤，減小了dom樹結構節點 */}
            <>
                <div>
                    <input value={this.state.inputValue} onChange={this.inputChang} /> <button onClick={this.addItem}>添加</button>
                </div>
                <ul>
                    {this.getList()}
                </ul>
            </>
        );
    };

...

    1. 在jsx中只能有一個根標籤，使用<></>(幽靈標籤)包裹，既能知足jsx的語法格式，在瀏覽器解析時不會解析幽靈標籤，減小了dom樹結構節點,也可使用代碼片斷（Fragments ），效果和<></>相同，只是Fragments 還有更普遍的使用，後面會有詳細說明this

    2. 在jsx中使用註釋，多行使用{/* 註釋內容 */}，單行使用lua

      // 多行

    {/* 多行註釋內容 */}
    {/*
        多行註釋內容
    */}


    // 單行
    {
        // 單行註釋內容
    }

    3. 在jsx中使用組件的變量或者方法，使用{}包裹code

    4. 在jsx中綁定的方法默認this指向undefined，因此須要使用bind綁定this的指向

      // 方式1： 在constructor指定this
    constructor(props){
        super(props)
        this.state = {
            inputValue: "",
            List: []
        }
        this.getList =  this.getList.bind(this)
        this.inputChang = this.inputChang.bind(this)
        this.addItem = this.addItem.bind(this)
        this.delItem = this.delItem.bind(this)
    }

    // 方式2：綁定事件的時候指定this

    ...
        <li onClick={this.delItem.bind(this,index)}></li>
    ...

  • 組件的基本通信

  1. 最簡單的 父 ---> 子 傳值

    // 父組件經過在子組件標籤上設置屬性傳遞數據
    <Boy
        teacherName={ this.state.teacherName }
    />

    <Girl
        teacherName={ this.state.teacherName }
    />

// 子組件經過this.props獲取父組件傳遞的數據
// this.props.teacherName 獲取老師的名稱
    render(){
        return (
            <>
                <p>
                    我是{this.state.boyName},個人老師是{this.props.teacherName},
                    我對老師很
                    <button onClick={()=> this.props.say(this.state.boyName,"滿意") } >
                        滿意
                    </button>
                </p>
            </>
        )
    }

  2. 最簡單的 子 ---> 父 通信

    // 父組件經過在子組件標籤上設置屬性傳遞數據
    <Boy
        say = { this.stuSay }
    />

    <Girl
        say = { this.stuSay }
    />
// 子組件經過this.props獲取父組件傳遞的數據
// this.props.say 獲取父組件提供的方法，經過調用父組件的方法，將傳遞的數據做爲參數傳入，當父組件的方法被調用，就經過獲取當前方法參數的方式，獲得了子組件傳遞的數據
    render(){
        return (
            <>
                <p>
                    我是{this.state.boyName},
                    我對老師很
                    <button onClick={()=> this.props.say(this.state.boyName,"滿意") } >
                        滿意
                    </button>
                </p>
            </>
        )
    }

  3. 最簡單的非父子通信

核心思路：找到共同的父組件，同時使用父組件傳遞的值和方法

過程有些複雜，這裏省略了

teacher.js

import React,{ Component } from "react"

// 導入 Boy（男孩） 和 Girl（女孩） 組件
import Boy from "./boy"
import Girl from "./girl"

export default class Teacher extends Component {
    constructor(props){
        super(props)
        this.state = {
            teacherName: "Tom",
            stuName: "",
            stuSayContent: "",
            boyName: "",
            girlName: "",
            boySayContent: "",
            girlSayContent: ""
        }
        this.stuSay = this.stuSay.bind(this);
        this.boySaySecret = this.boySaySecret.bind(this);
        this.grilSaySecret = this.grilSaySecret.bind(this);
    }
    render(){
        let evaluation = false
        if (this.state.stuName!=="" && this.state.stuSayContent) {
            evaluation = true
        }
        return (
            <>
                <p>我是{ this.state.teacherName }老師</p>

                <div>
                    {
                        evaluation ? (<p>學生評價：{this.state.stuName}對我很{this.state.stuSayContent}</p>) : " "
                    }
                </div>

                <Boy
                    say = { this.stuSay }
                    teacherName={ this.state.teacherName }
                    boySaySecret = {this.boySaySecret}
                    girlSayContent = {this.state.girlSayContent}
                />

                <Girl
                    say = { this.stuSay }
                    teacherName={ this.state.teacherName }
                    grilSaySecret = {this.grilSaySecret}
                    boySayContent = {this.state.boySayContent}
               />
            </>
        )
    }
    stuSay(stuName,stuSayContent){
        this.setState(()=>{
            return {
                stuSayContent,
                stuName
            }
        })
    }
    boySaySecret(constent){
        this.setState(()=>{
            return {
                boySayContent : constent
            }
        })
    }
    grilSaySecret(constent){
        this.setState(()=>{
            return {
                girlSayContent : constent
            }
        })
    }
}

boy.js

import React,{ Component } from "react"

export default class Boy extends Component {
    constructor(props){
        super(props)
        this.state = {
            boyName: "龍震天"
        }
    }
    render(){
        return (
            <>
                <p>
                    我是{this.state.boyName},個人老師是{this.props.teacherName},
                    我對老師很
                    <button onClick={()=> this.props.say(this.state.boyName,"滿意") } >
                        滿意
                    </button>,
                    我想對女孩說：<button onClick={()=> this.props.boySaySecret("我喜歡你")}>悄悄話</button>，
                    她對我說：{this.props.girlSayContent}

                </p>
            </>
        )
    }

}

gril.js

import React,{ Component } from "react"

export default class Boy extends Component {
    constructor(props){
        super(props)
        this.state = {
            girlName: "憐香玉"
        }
    }
    render(){
        return (
            <>
                <p>
                    我是{this.state.girlName}，個人老師是{this.props.teacherName},
                    我對老師很
                    <button onClick={()=> this.props.say(this.state.girlName,"不滿意") } >
                        不滿意
                    </button>,
                    我想對男孩說：<button onClick={() => this.props.grilSaySecret("我也是")}>悄悄話</button>，
                    他對我說：{this.props.boySayContent}
                </p>
            </>
        )
    }

}

高級部分

待續....

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程