React的入門

引言

    在公司也寫了一段時間的react代碼，不過react環境都是已經搭好了，甚至組件都是已經寫好了，只須要在一些函數內，定義一些邏輯，整體下來，以爲react的門都沒有入，全部有了這篇文章。我打算主要從構建react開發環境開始，到遇到的問題，完成一個登錄的表單提交組件的編碼，大概實現效果以下圖，樣式就不給了，下次自動登陸，改爲記住用戶名，實現的原理是同樣的。

環境搭建

    在進行react的開發的時候須要作一下準備：

    一、node的安裝；

    二、代碼編輯器，剛開始我是使用idea去開發，發現對es6代碼的解析的時候，會出現卡死的問題，有不少專業的前端開發編輯器，好比webstorm、sublime、EditPlus、notePad++等，我常使用的是webstorm，整體用起來，我仍是以爲webstorm比較順手；

    三、腳手架安裝，對於依賴的安裝，若是用node的打包工具npm一個個安裝的話，會很麻煩，因此選了一個官方的腳手架 create-react-app，基本的依賴環境都安裝好了；

開始

    從咱們目標寫的登錄表單，能夠分紅兩個部分，一個是登錄按鈕，另外一個是輸入框和記住密碼選擇框，咱們先寫輸入框這部分，登錄按鈕徹底能夠集成在父類中，先上我寫的輸入框和記住密碼的代碼：

import React, {Component} from 'react';
class InputComponet extends Component{
    constructor(props){
        super(props);
        this.setName = this.setName.bind(this);
        this.setPassword = this.setPassword.bind(this);
        this.setIsRemember = this.setIsRemember.bind(this);
        this.onUpdate = this.onUpdate.bind(this);
    }

    setName(){
        this.onUpdate();
    }

    setPassword(){
        this.onUpdate()
    }

    onUpdate(){
        const name = this.refs.name.value;
        const password = this.refs.password.value;
        const isRemember = this.refs.isRemember.checked;
        this.props.postData(name,password,isRemember)
    }

    setIsRemember(){
        this.onUpdate()
    }

    render(){
        let {name,isRemember} = this.props;
        return(
            <div>
                <label>
                    姓名：<input type="text" ref="name" onChange={this.setName} defaultValue={this.props.name}/>
                </label>
                <label>
                   密碼：<input type="password" ref="password" onChange={this.setPassword}/>
                </label>
                <label>
                    記住登錄帳號<input type="checkbox" ref="isRemember" onChange={this.setIsRemember} checked={this.props.isRemember}/>
                </label>
            </div>
        )
    }
}
export default InputComponet

    須要注意的一下幾點：

    一、組件必需要繼承自Component，否則會在父組件中沒法引入的；

    二、組件的方法必須在構造函數內進行this綁定，es6默認是不進行this綁定的，若是沒有進行這一步的話，方法內的this.setState是沒法使用的，由於this並不是當前組件；

    三、各個組件要有ref屬性，方便須要獲取組件內的屬性使用，能夠經過this.refs.命名的ref 來回去組件對象

    四、若是引用函數的時候，沒有加this就會報錯（以下圖），例如我在代碼中以前使用，引用onUpdate的時候，不是用this.onUpdate()去調用的，而是用onUpdate（）調用的。

    父組件的代碼以下：

import React, {Component} from 'react';
import MyInput from './MyInput'
class LoginApp extends Component{
    constructor(props){
        super(props);
        this.login = this.login.bind(this);
        this.toPost = this.toPost.bind(this);
        this.state = {
            name:window.localStorage.getItem("name"),
            password:"",
            isRemember:window.localStorage.getItem("isRemember")
        }
    }

    login(){
        const {isRemember,name} = this.state;
        if(isRemember) {
            window.localStorage.setItem("name",name);
            window.localStorage.setItem("isRemember",isRemember)
        } else {
            window.localStorage.removeItem("name");
            window.localStorage.removeItem("isRemember");
        }
        //登錄的邏輯寫在這邊
        alert(this.state.name + ",你好!你已經登錄了,你的密碼是：" + this.state.password );
    }

    toPost(name,password,isRemember){
        console.info(this.state)
        this.setState({
            name:name,
            password:password,
            isRemember:isRemember
        })
        console.info(this.state)
    }

    render(){
        return(
            <div>
                <MyInput postData={this.toPost} name={this.state.name} password={this.state.password} isRemember={this.state.isRemember}/>
                <button onClick={this.login}>登錄</button>
            </div>
        )
    }
}
export default LoginApp

     爲了實現，子組件的狀態存在父組件這邊，方便提交，在父組件這邊實現了一個toPost傳給子組件，把子組件的狀態傳給父組件，固然這種實現是不提倡的，react推崇的是數據的單向流轉。

    使用子類傳狀態給父類，也看出來了代碼會很容易，子類的狀態會在父類重現一遍，若是父類有不少子組件，那狀態維護起來就很恐怖了。

結束

    使用react的方便性不用說，像咱們這種Java是平常開發的語言，對於react的這種形式是很是熟悉，本文只是基礎的入門，對react的思想執行並不到位，讀者能夠權當一個helloworld去理解，更深的思想實現要再多探索。

後記

    最近讀了官方的react文檔，在文檔的例子中也有一個和本文相似的例子，從對比中能夠發現，本文的狀態並無進行提高管理，這點是作了修改。入門的同窗能夠看一下官方的文檔（http://www.css88.com/react/docs/add-react-to-an-existing-app.html），畢竟是官方的，寫的也比較全面。