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），毕竟是官方的，写的也比较全面。