摘要：目前只是體會(huì)到組件之間傳遞的值的初始來(lái)源一般都是值，可能是實(shí)踐不夠的原因。。。此時(shí)，可以建一個(gè)組件內(nèi)部封裝一個(gè)構(gòu)造函數(shù)，內(nèi)部封裝三個(gè)方法。

PS：開(kāi)頭的一段廢話

???????想起一個(gè)月前還不知道reactjs該如何下手的而今天有點(diǎn)小體會(huì)，還是有點(diǎn)小欣慰，不過(guò)回望一些走過(guò)的坑和開(kāi)始時(shí)的滿頭漿糊覺(jué)得還是有點(diǎn)恐怖的。今天分享一點(diǎn)實(shí)踐中的小心得給新手朋友們。

???????其他的就不必多說(shuō)，只說(shuō)說(shuō)兩個(gè)點(diǎn)：

constructor和super

this.functionName=this.functionName.bind(this)

???????constructor(props)和super(props)一般是要么不出現(xiàn)，要么同時(shí)出現(xiàn),意義實(shí)際上就是繼承，這兩個(gè)東西其實(shí)并不是reactjs的，而是es6的，前者就是一個(gè)一般意義的構(gòu)造函數(shù)，相當(dāng)于es5里面的

function FunctionName(props) {
    this.props=props;
}

???????super(props)則是繼承父類的屬性，（意義相當(dāng)于es5中的 function Son(name){ Parent.call(this, name) }），并在constructor內(nèi)部正確拿到this，這個(gè)this指向此時(shí)的子類。如果在操作this之前（比如console.log(this)）沒(méi)有寫(xiě)super(props)則會(huì)報(bào)錯(cuò)，意思大概是：不能在super()之前寫(xiě)this！

???????而有時(shí)候看到constructor()和super()，即沒(méi)有寫(xiě)props好像也沒(méi)有什么問(wèn)題，原因自然是沒(méi)有在constructor內(nèi)部用到this.props，實(shí)際上在constructor內(nèi)部一般用到的是this.state居多，貌似this.props沒(méi)怎么寫(xiě)。。。

???????this.functionName=this.functionName.bind(this)這個(gè)是綁定方法到子類上，使得這個(gè)this就是當(dāng)前的子類(所謂的this指向)。還可以直接將.bind(this)寫(xiě)函數(shù)定義的地方，比如在render渲染的元素上 onClick={this.handleClick.bind(this)}.

???????state在reactjs組件狀態(tài)渲染里面的作用不言而喻，被稱為狀態(tài)渲染機(jī)，元素節(jié)點(diǎn)的各種屬性值及其改變實(shí)際上基本是由state提供的狀態(tài)值及其改變完成的。比如元素的文本改變、表單的value值、checked、disabled甚至css樣式都可以做到用state來(lái)渲染。以下提供一個(gè)簡(jiǎn)例輔助說(shuō)明：

import React from "react";
import ReactDOM from "react-dom";
import $ from "jquery";
class Comp extends React.Component {
    constructor(){
        super();
        this.handleChange=this.handleChange.bind(this);
        this.handleClick=this.handleClick.bind(this);
        this.state={
            value: "",
            msg: ""
        }
    }
    handleChange(e){
        this.setState({
            value: e.target.value
        })
    }
    handleClick(){
        let {value}=this.state;
        $.ajax({
            ...
            data: {
                value:value
            },
            success:(data)=>{
                this.setState({
                    msg: data
                })
            }
        })
    }
    render(){
        let {value,msg}=this.state; 
        return(
            

                
                
                {msg? msg:"此處加載ajax返回的信息"}
            
        )
    }
}
ReactDOM.render( , document.body)

???????以上簡(jiǎn)例在頁(yè)面上渲染之后是一個(gè)按鈕、一個(gè)輸入框和一個(gè)信息提示。由于reactjs提倡單向數(shù)據(jù)流，在value狀態(tài)初始為空的情況下，如果直接在輸入框中輸入而不設(shè)置value狀態(tài)(setState)，輸入信息無(wú)法獲取。這個(gè)渲染過(guò)程是：首先頁(yè)面加載時(shí)根據(jù)默認(rèn)的this.state中的三個(gè)狀態(tài)值生成相應(yīng)的狀態(tài)，onChange事件不斷改變state的value值，此時(shí)state接收到了改變并馬上重新渲染頁(yè)面上輸入框內(nèi)的值，即：只要任何動(dòng)作改變了state值，頁(yè)面就會(huì)重新渲染相應(yīng)的地方（關(guān)于其他reactjs入門(mén)案例demo可以參見(jiàn)本人的github）。

???????注意一下，以上說(shuō)constructor內(nèi)如果沒(méi)有傳遞props參數(shù)，其內(nèi)部就不能使用this.props。但這并不意味著其他地方比如render內(nèi)部不能使用。目前只是體會(huì)到組件之間傳遞的props值的初始來(lái)源一般都是state值，可能是實(shí)踐不夠的原因 @_@。。。

1.父組件向子組件傳值

???????這是比較常見(jiàn)的父子組件之間通信的方式。子組件上的屬性值可以理解為一個(gè)參數(shù)，而需要父組件傳遞一個(gè)實(shí)際值。傳值這種方式一般是復(fù)用組件所必需的，因?yàn)橛锌赡苡卸鄠€(gè)頁(yè)面的內(nèi)容的某一個(gè)部分高度相似甚至相同，這時(shí)只需要對(duì)一個(gè)組件傳遞不同的值就可以實(shí)現(xiàn)多次利用。如下例：

假定組件文件都在根目錄下:

//子組件Son.js
class Son extends React.Component{
    render(){
        let {title,userValue,pwdValue,handleChange,handleSubmit}=this.props;
        return(
            

                
{title}
                handleChange("user",e.target.value} />
                handleChange("pwd",e.target.value} />
                
            
        )
    }
}

//父組件1:Login.js
import Son from "./Son.js";
class Login extends React.Component{
    constructor(){
        super();
        this.handleChange=this.handleChange.bind(this);
        this.handleSubmit=this.handleSubmit.bind(this);
        this.state={
            user:{
                value:"",
                error:false
            },
            pwd:{
                value:"",
                error:false
            }
        }
    }
    handleChange(field,val){
        let newState={value:val, error:true};
        switch(field) {
            case "user":
                if (!val.length){
                    newState.error=false
                } else if (val.length>4) {
                    newState.error=false
                }
                this.setState({
                    user:newState
                })
                break;
            case "pwd":
                if (!val.length){
                    newState.error=false;
                } else if (val.length>6) {
                    newState.error=false
                }
                this.setState({
                    pwd:newState
                })
                break;
        }
    }
    handleSubmit() {
        let {user, pwd}=this.state;
        if (!user.error || !pwd.error) {
            alert("請(qǐng)重試！");
            return;
        } else {
            $.ajax({
                ...
                data: {
                    username: user.value,
                    password: pwd.value
                },
                ...
            })
        }
    render(){
        let {user, pwd}=this.state;
        return(
            
        )
    }
}

???????相信各位看得出來(lái)，這是個(gè)登錄頁(yè)面的雛形，其中僅限原理說(shuō)明，先不要糾結(jié)規(guī)范什么的哈。。。一般來(lái)說(shuō)，既然有登錄，也就有注冊(cè)，注冊(cè)頁(yè)面基本上也是這個(gè)道理。需要說(shuō)明的是：子組件上的屬性值和方法都是this.props的，這里之所以沒(méi)有寫(xiě)this.handleChange或者this.handleSubmit是因?yàn)樽咏M件本身沒(méi)有這個(gè)方法，因此如果此時(shí)在子組件上的方法前加上this.xxx就會(huì)報(bào)錯(cuò)大概說(shuō)這個(gè)方法不是個(gè)函數(shù)！屬性值也相似；同時(shí)利用拆包表達(dá)式寫(xiě)this.props表示這些屬性和方法都是從父組件上繼承而來(lái)，只要父組件上定義了方法，因此子組件上此時(shí)可以不用寫(xiě)constructor()和super()。

2.父組件的父組件子組件傳值

???????這個(gè)場(chǎng)景主要用于組件嵌套比較多的時(shí)候。比如，我們發(fā)現(xiàn)在子組件Son.js中，有三個(gè)輸入框分別是用戶名、密碼，但貌似有點(diǎn)不倫不類，那么我們就完善一點(diǎn)這個(gè)表單：

新建組件Form.js

class Form extends React.Component{
    render(){
        let {handleSubmit, userValue, pwdValue, handleChange}=this.props;
        return(
            

                handleChange("user",e.target.value} />
                handleChange("pwd",e.target.value} />
                
            
        )
    }
}

???????有了這個(gè)組件之后，關(guān)于表單的Son.js組件可以改造成(同樣假定所有組件都在根目錄下)：

//Son.js
import Form from  "./Form.js";
class Son extends React.Component{
    render(){
        let {title,userValue,pwdValue,handleChange,handleSubmit}=this.props;
        return(
            

                
{title}
                

            
        )
    }
}

???????也許新手童鞋們不太明白Son.js組件上的屬性和方法命名到底是不是一定要和孫子級(jí)組件上的一樣，因?yàn)楸救嗽趯W(xué)這個(gè)地方的時(shí)候的確糾結(jié)過(guò)，不過(guò)請(qǐng)注意：只要onChange或者onSubmit這類元素上原生方法后指定的一個(gè)函數(shù)（Form.js），比如onChange={handleChange}，那么這個(gè)handleChange在傳遞的時(shí)候，上級(jí)組件（Son.js）上的handleChange={handleChange}中，左邊是上級(jí)組件的方法，可以新命名比如footChange。。。而右邊則是傳遞給下級(jí)組件的方法handleChange，所以，下級(jí)組件Form.js中onChange的右邊函數(shù)名必須對(duì)應(yīng)之。

???????此外，我們還可以根據(jù)Son.js做個(gè)簡(jiǎn)單的歡迎頁(yè)：

//Welcome.js
class Welcome extends React.Component{
    render(){
        return(
            
歡迎您！
        )
    }
}

//SonWelcome.js
import Welcome from "./Welcome.js";
class SonWelcome extends React.Component{
    render(){
        return(
            

                
{this.props.title}
                
            
        )
    }
}

???????當(dāng)然，SonWelcom.js太過(guò)簡(jiǎn)單了。。。同時(shí)title的值依賴于上一級(jí)組件傳值確定，兄弟們大開(kāi)腦洞吧。

3.非上下級(jí)關(guān)系和非兄弟的組件之間如何傳值

???????相信這個(gè)情況是比較少的，不過(guò)這是個(gè)值得研究的，有一些師兄和大神們肯定知道如何解決。所謂的兄弟組件就是具有共同的父組件或者“爺組件”的多個(gè)組件，這種情況和以上差不多，主要把兄弟組件之間需要的共同的值掛載到上級(jí)組件即可。而非上下級(jí)和非兄弟組件這種情況的應(yīng)用場(chǎng)景有點(diǎn)類似（注意，僅僅是類似）session或者cookie，比如有多個(gè)頁(yè)面需要根據(jù)用戶是否登錄或者是否是管理員超級(jí)用戶來(lái)對(duì)頁(yè)面進(jìn)行不同的渲染。
???????先說(shuō)說(shuō)可以解決的途徑吧，首先推薦的是一個(gè)js庫(kù)：PubSubJs，詳情可以去了解一下（實(shí)際我也沒(méi)用過(guò)。。。）。其次，說(shuō)說(shuō)本人的想法吧。正如上所言，假設(shè)這個(gè)屬性或者方法在渲染組件的時(shí)候并不涉及安全性問(wèn)題，那么何不將其設(shè)置為cookie或者session呢？哪個(gè)組件需要這個(gè)值就將其提出來(lái)。如下例兩個(gè)組件：
暫且寫(xiě)如下，先不管自定義flag從何而來(lái)，同時(shí)，.active的樣式是：display:none；

//CompOne.js
class CompOne extends React.Component{
    render(){
        return(
            

                
這個(gè)第一個(gè)組件
            
        )
    }
}

//CompTwo.js
class CompTwo extends React.Component{
    render(){
        return(
            

                
這個(gè)第二個(gè)組件
            
        )
    }
}

???????假設(shè)以上兩個(gè)組件并沒(méi)有關(guān)系，且都帶有一個(gè)共同的自定義屬性flag,這兩個(gè)組件根據(jù)flag的意義進(jìn)行隱藏或展示。此時(shí)，可以建一個(gè)組件Cookie內(nèi)部封裝一個(gè)構(gòu)造函數(shù)HandleCookie，內(nèi)部封裝三個(gè)方法setCookie(name, value, time),getCookie(name),clearCookie(name, value, time)。假設(shè)，name是cookie名稱，value是cookie的值，time參數(shù)是參照當(dāng)前時(shí)間的cookie的保存時(shí)間長(zhǎng)度，設(shè)置為1表示一天后過(guò)期，設(shè)置-1則表示過(guò)期失效。

???????照此假定，以上兩個(gè)組件可以直接在渲染頁(yè)面的時(shí)候取到cookie的flag名稱對(duì)應(yīng)的值，并根據(jù)值渲染頁(yè)面。比如在項(xiàng)目的某個(gè)文件加載完畢(componentDidMount)的時(shí)候設(shè)置一個(gè)cookie：{flag:"1"},CompOne.js:

//CompOne.js
import Cookie from "./Cookie.js";
class CompOne extends React.Component{
    render(){
        let flag=Cookie.getCookie("flag");
        return(
            

                
這個(gè)第一個(gè)組件
            
        )
    }
}

???????照此安排，這個(gè)組件CompOne渲染后就會(huì)展示，而CompTwo則會(huì)隱藏。不過(guò)，這種方式明顯不是一種規(guī)范的方法，僅僅是想法而已，望輕噴！

???????以上若有不當(dāng)之處，還請(qǐng)指正一下，給小弟一個(gè)改過(guò)自新的機(jī)會(huì)吧。。。如果童鞋還對(duì)其他沒(méi)有寫(xiě)徹底的地方感興趣，可以參見(jiàn)本人的一個(gè)留言本小項(xiàng)目，乃是本國(guó)reactjs、webpack配置、nodejs和express入門(mén)的最好材料之一，覺(jué)得好用就star一下吧，哎，求star真不好意思^_^