前端React开发入门笔记

什么是React

React是一个JavaScript库，是由FaceBook和Instagram开发的，主要用于用户创建图形化界面。

Hello world

<!DOCTYPE html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

<script src="build/react.js"></script>

<script src="build/react-dom.js"></script>

<script src="build/browser.min.js"></script>

<!-- browser.min.js将JSX语法转换成JavaScript语法 -->

<script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/1.9.1/jquery.min.js"></script>

<title>React Hello world</title>

</head>

<body>

	<div id="example1"></div>

	<!-- React独有的JSX语法，跟JavaScript不兼容，凡是使用JSX的地方，都要加上type = “text/babel” -->

	<!-- JSX的基本语法规则：遇到HTML标签(以<开头)，就用HTML规则解析；遇到代码块(以{开头)，就用JavaScript规则解析。 -->

	<script type="text/babel">

		ReactDOM.render(

            <h1>Hello,World!</h1>,

            document.getElementById('example1')

      	);

   </script>

</body>

</html>

map 遍历

var animals = ['dog','cat','pig'];

ReactDOM.render(

	<div>

	{

    	animals.map(function(animal, key) {

      		return <h3 key={key}>{animal}</h3>

    	})

	}

	</div>,

	document.getElementById('example2')

);

组件化

React.createClass方法就是用于生成一个组件类。组件首字母大写

var ZGButton = React.createClass({

    render:function() {

        return <button>ZG{this.props.name}</button>

    }

});

ReactDOM.render(

    <ZGButton name='Button1'/>,

    document.getElementById('example3')

);

this.props

this.props对象的属性和组件的属性一一对应，但是有个children除外，它表示的是组件的所有子节点

var Students = React.createClass({

    render:function() {

        return (

            <ol>

                {

                    React.Children.map(this.props.children,function(child) {

                        return <li>{child}</li>

                    })

                }

            </ol>

        );

    }

});

ReactDOM.render(

    <Students>

        <span>zhangsan</span>

        <span>lisi</span>

    </Students>,

    document.getElementById('example4')

);

PropTypes

组件的属性可以接受任意值，字符串、对象、函数都行。这里面有一个propTypes，可以用来限定提供的属性是否满足要求

var Student = React.createClass({

	getDefaultProps: function() {

		//getDefaultProps就类似与我们在开发iOS或者Java的时候对声明属性的时候进行赋初始化值。

        return {

            myName:"Default React"

        }

    },

    propTypes: {

      myName:React.PropTypes.string.isRequired,

    },

    render:function() {

        return <h1>

            {this.props.myName}

        </h1>

    }

});

var myNameStr = "React";

ReactDOM.render(

    <Student myName = {myNameStr} />,

    document.getElementById('example5')

);

Virtual DOM

虚拟DOM，只有插入文档的时候才会变成真实的DOM.根据React的设计，当重新渲染组件的时候，会通多diff寻找到变更的DOM节点，再把这个修改更新到浏览器实际的DOM节点上，所以实际上并不是渲染整个DOM数，这个Virtual DOM是一个纯粹的JS数据结构，性能比原生DOM快很多。

var MyComponment = React.createClass({

    render:function(){

        return (

          <div>

              <input type = "text" ref = "myTextInput"/>

              <input type = "button" value = "Focus the text input" onClick={this.handleClick}/>

          </div>

        );

    },

    handleClick:function() {

        alert(this.refs.myTextInput.value);

        this.refs.myTextInput.focus();

    }

});

ReactDOM.render(

    <MyComponment/>,

    document.getElementById('example6')

);

this.state拿到组件的状态

var LinkButton = React.createClass({

    getInitialState:function () {

      return {linked:false};

    },

    handleClick:function() {

        this.setState({linked:!this.state.linked});

    },

    render:function() {

        var text = this.state.linked? 'linked':'not linked';

        return (

            <p onClick={this.handleClick}>

                You {text} this. Click to toggle

            </p>

        );

    }

});

ReactDOM.render(

    <LinkButton/>,

    document.getElementById('example7')

);

表单

var Form = React.createClass({

    getInitialState:function() {

        return {value:'Hello'};

    },

    handleChange:function(event) {

        this.setState({value:event.target.value});

    },

    render:function() {

        var value = this.state.value;

        return (

            <div>

                <input type="text" value = {value} onChange={this.handleChange}/>

                <p>{value}</p>

            </div>

        );

    }

});

ReactDOM.render(

    <Form/>,

    document.getElementById('example8')

);

组件生命周期

组件有三个主要的生命周期：

Mounting:组件插入到DOM
Updating:组件被重新渲染，如果DOM需要更新
Unmounting:从DOM中删除组件

React为每个状态都提供了两种处理函数，will函数在进入状态之前调用，did在进入状态之后调用。

var MyButton = React.createClass({

    componentDidMount:function() {

        console.log("已经装载");

    },

    componentWillMount:function() {

        console.log("将要装载");

    },

    componentWillUpdate:function() {

        console.log("将要更新");

    },

    componentDidUpdate:function() {

        console.log("已经更新");

    },

    componentWillUnmount:function() {

        console.log("将要移除");

    },

    render:function(){

        return (

            <button>MyButton</button>

        );

    },

});

var LoadButton = React.createClass({

    loadMyButton:function() {

      ReactDOM.render(

          <MyButton/>,

          document.getElementById('myBTN')

      );

    },

    removeMyButton:function() {

        var result = ReactDOM.unmountComponentAtNode(document.getElementById('myBTN'));

        console.log(result);

    },

    render:function() {

        return (

            <div>

                <button onClick={this.removeMyButton}>卸载MyButton</button>

                <button onClick={this.loadMyButton}>装载MyButton</button>

                <div id="myBTN">这里是mybuttonquyu</div>

            </div>

        );

    }

});

ReactDOM.render(

    <LoadButton/>,

    document.getElementById('example1')

);

Ajax请求

组件的数据通常是通过Ajax请求服务器获取的，可以使用componentDidMount方法来设置Ajax请求，等到请求成功，再用this.setState方法重新渲染UI

var UserGist = React.createClass({

    getInitialState:function() {

        return {

            username:'',

            lastGistUrl:''

        }

    },

    componentDidMount:function(){

        $.get(this.props.source,function(result){

            var lastGist  = result[0];

            if (this.isMounted()) {

                this.setState({

                        username:lastGist.owner.login,

                        lastGistUrl:lastGist.html_url

                });

            }

        }.bind(this));

    },

    render:function() {

        return (

            <div>

                {this.state.username}'s last gist is

                <a href={this.state.lastGistUrl}>here</a>

            </div>

        );

    }

});

ReactDOM.render(

    <UserGist source = "https://api.github.com/users/octocat/gists"/>,

    document.getElementById('example1')

);

使用Promise对象

将Promise对象作为属性，传给RepoList组件。

如果Promise对象正在抓取数据（pending状态），组件显示"正在加载"；如果Promise对象报错（rejected状态），组件显示报错信息；如果Promise对象抓取数据成功（fulfilled状态），组件显示获取的数据。

var RepoList = React.createClass({

	getInitialState: function() {

		return { loading: true, error: null, data: null};

	},

	componentDidMount() {

		this.props.promise.then(

		  value => this.setState({loading: false, data: value}),

		  error => this.setState({loading: false, error: error})

		);

	},

	render: function() {

		if (this.state.loading) {

			return <span>Loading...</span>;

		}

		else if (this.state.error !== null) {

			return <span>Error: {this.state.error.message}</span>;

		}

		else {

		  	var repos = this.state.data.items;

		  	var repoList = repos.map(function(repo, key) {

		    return (

		    	<li key={key}>

		        <a href={repo.html_url}>{repo.name}</a> ({repo.stargazers_count} stars) <br/> {repo.description}

		      	</li>

		    	);

			});

			return (

			    <main>

			      	<h1>Most Popular JavaScript Projects in Github</h1>

			      	<ol>{repoList}</ol>

			    </main>

		  	);

		}

	}

});

ReactDOM.render(

	<RepoList

	promise={$.getJSON('https://api.github.com/search/repositories?q=javascript&sort=stars')}

	/>,

    document.getElementById('example2')

);

参考：http://www.ruanyifeng.com/blog/2015/03/react.html

http://www.cnblogs.com/zhanggui/p/5962037.html