zoukankan html css js c++ java

前端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

查看全文

相关阅读:
Linux 多线程编程实例 1
面试题-链表反转c实现
 information_schema.TABLES
mongodb遇到的错误
 MySQL优化的奇技淫巧之STRAIGHT_JOIN
mongodb安装
 XtraBackup安装
 提高mysql千万级大数据SQL查询优化30条经验（Mysql索引优化注意）
我用 TypeScript 语言的七个月
 Grunt之添加文件监视：Grunt-watch (已备份)

原文地址：https://www.cnblogs.com/umgsai/p/6256332.html