前端React开发入门笔记
2017-01-09 14:09
686 查看
什么是React
React是一个JavaScript库，是由FaceBook和Instagram开发的，主要用于用户创建图形化界面。
Hello world
map 遍历
组件化
React.createClass方法就是用于生成一个组件类。组件首字母大写
this.props
this.props对象的属性和组件的属性一一对应，但是有个children除外，它表示的是组件的所有子节点
PropTypes
组件的属性可以接受任意值，字符串、对象、函数都行。这里面有一个propTypes，可以用来限定提供的属性是否满足要求
Virtual DOM
虚拟DOM，只有插入文档的时候才会变成真实的DOM.根据React的设计，当重新渲染组件的时候，会通多diff寻找到变更的DOM节点，再把这个修改更新到浏览器实际的DOM节点上，所以实际上并不是渲染整个DOM数，这个Virtual DOM是一个纯粹的JS数据结构，性能比原生DOM快很多。
this.state拿到组件的状态
表单
组件生命周期
组件有三个主要的生命周期：
Mounting:组件插入到DOM
Updating:组件被重新渲染，如果DOM需要更新
Unmounting:从DOM中删除组件
React为每个状态都提供了两种处理函数，will函数在进入状态之前调用，did在进入状态之后调用。
Ajax请求
组件的数据通常是通过Ajax请求服务器获取的，可以使用componentDidMount方法来设置Ajax请求，等到请求成功，再用this.setState方法重新渲染UI
使用Promise对象
将Promise对象作为属性，传给RepoList组件。
如果Promise对象正在抓取数据（pending状态），组件显示"正在加载"；如果Promise对象报错（rejected状态），组件显示报错信息；如果Promise对象抓取数据成功（fulfilled状态），组件显示获取的数据。
参考：http://www.ruanyifeng.com/blog/2015/03/react.html
http://www.cnblogs.com/zhanggui/p/5962037.html
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
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- 前端React开发入门笔记
- 支付宝技术专家：React前端开发入门与实战
- React前端开发入门与实战
- Web安全基础入门笔记（二）Web前端开发基础
- 阿里云大学明星课程：React前端开发入门与实战
- 【网页前端学习之html】 学习笔记1-入门（开发工具）
- 写给IOS开发工程师的网页前端入门笔记
- React前端开发入门与实战案例
- React前端开发入门与实战
- React前端开发入门与实战案例
- 前端开发入门:框架篇-ReactJS入门学习
- Web前端开发修炼之道—笔记
- iPhone开发入门笔记（三）—关于数据类型介绍 （NSObject）
- Android 学习笔记 Android的王国\开发入门蓝图
- IOS开发笔记 (2) ---objective c 入门
- Android 开发笔记——环境入门
- 前端学习笔记入门篇三－－浏览器兼容
- Android入门学习笔记（二）：Android开发环境的搭建
- iPhone开发入门笔记（一）—快速入门
- 前端学习笔记一：关于一个新页面的开发