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

PS：開頭的一段廢話

???????想起一個月前還不知道reactjs該如何下手的而今天有點小體會，還是有點小欣慰，不過回望一些走過的坑和開始時的滿頭漿糊覺得還是有點恐怖的。今天分享一點實踐中的小心得給新手朋友們。

???????其他的就不必多說，只說說兩個點：

constructor和super

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

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

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

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

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

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

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

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)

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

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

1.父組件向子組件傳值

???????這是比較常見的父子組件之間通信的方式。子組件上的屬性值可以理解為一個參數(shù)，而需要父組件傳遞一個實際值。傳值這種方式一般是復(fù)用組件所必需的，因為有可能有多個頁面的內(nèi)容的某一個部分高度相似甚至相同，這時只需要對一個組件傳遞不同的值就可以實現(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("請重試！");
            return;
        } else {
            $.ajax({
                ...
                data: {
                    username: user.value,
                    password: pwd.value
                },
                ...
            })
        }
    render(){
        let {user, pwd}=this.state;
        return(
            
        )
    }
}

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

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

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

新建組件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} />
                
            
        )
    }
}

???????有了這個組件之后，關(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組件上的屬性和方法命名到底是不是一定要和孫子級組件上的一樣，因為本人在學(xué)這個地方的時候的確糾結(jié)過，不過請注意：只要onChange或者onSubmit這類元素上原生方法后指定的一個函數(shù)（Form.js），比如onChange={handleChange}，那么這個handleChange在傳遞的時候，上級組件（Son.js）上的handleChange={handleChange}中，左邊是上級組件的方法，可以新命名比如footChange。。。而右邊則是傳遞給下級組件的方法handleChange，所以，下級組件Form.js中onChange的右邊函數(shù)名必須對應(yīng)之。

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

//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}
                
            
        )
    }
}

???????當然，SonWelcom.js太過簡單了。。。同時title的值依賴于上一級組件傳值確定，兄弟們大開腦洞吧。

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

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

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

                
這個第一個組件
            
        )
    }
}

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

                
這個第二個組件
            
        )
    }
}

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

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

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

                
這個第一個組件
            
        )
    }
}

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

???????以上若有不當之處，還請指正一下，給小弟一個改過自新的機會吧。。。如果童鞋還對其他沒有寫徹底的地方感興趣，可以參見本人的一個留言本小項目，乃是本國reactjs、webpack配置、nodejs和express入門的最好材料之一，覺得好用就star一下吧，哎，求star真不好意思^_^