标签：前端开发 ReactJS
官网
官网中文镜像(推荐)
阮一峰老师的教程
菜鸟网的教程
一看就懂的ReactJS入门教程(语法有点过期了)
关键库：
react.js; react-dom.js; browser.min.js；
前言： ReactJS产生的原因背景
在Web开发中，我们总需要将变化的数据实时反应到UI上，这时就需要对DOM进行操作。而复杂或频繁的DOM操作通常是性能瓶颈产生的原因（如何进行高性能的复杂DOM操作通常是衡量一个前端开发人员技能的重要指标）。React为此引入了虚拟DOM（Virtual DOM）的机制：在浏览器端用Javascript实现了一套DOM API。基于React进行开发时所有的DOM构造都是通过虚拟DOM进行，每当数据变化时，React都会重新构建整个DOM树，然后React将当前整个DOM树和上一次的DOM树进行对比，得到DOM结构的区别，然后仅仅将需要变化的部分进行实际的浏览器DOM更新。而且React能够批处理虚拟DOM的刷新，在一个事件循环（Event Loop）内的两次数据变化会被合并，例如你连续的先将节点内容从A变成B，然后又从B变成A，React会认为UI不发生任何变化，而如果通过手动控制，这种逻辑通常是极其复杂的。尽管每一次都需要构造完整的虚拟DOM树，但是因为虚拟DOM是内存数据，性能是极高的，而对实际DOM进行操作的仅仅是Diff部分，因而能达到提高性能的目的。这样，在保证性能的同时，开发者将不再需要关注某个数据的变化如何更新到一个或多个具体的DOM元素，而只需要关心在任意一个数据状态下，整个界面是如何Render的。
如果你像在90年代那样写过服务器端Render的纯Web页面那么应该知道，服务器端所要做的就是根据数据Render出HTML送到浏览器端。如果这时因为用户的一个点击需要改变某个状态文字，那么也是通过刷新整个页面来完成的。服务器端并不需要知道是哪一小段HTML发生了变化，而只需要根据数据刷新整个页面。换句话说，任何UI的变化都是通过整体刷新来完成的。而React将这种开发模式以高性能的方式带到了前端，每做一点界面的更新，你都可以认为刷新了整个页面。至于如何进行局部更新以保证性能，则是React框架要完成的事情。
1.代码生成标签，插入到指定位置
jsx/babel语言 JS,HTML混写
<body>
<div id="example"></div>
<script type="text/babel">
ReactDOM.render(
<h2>Hello,world</h2>,
document.getElementById('example')
);
</script>
</body>
div#example 作为容器存放生成的元素，
生成元素：ReactDOM.render(<tag>{codehere}</tag>, container);
注意：语句结尾可以不加分号，不会出错，有些语句加了分号之后就会出错，因此加分号要小心。
2.自定义标签（组件）
<script type="text/babel">
var MyTag = React.createClass({
render:function(){ return<h1>{this.props.name}</h1> }
}); //this.props.xxx 调用自定义属性;
ReactDOM.render(<MyTag name="zhe" />, document.getElementById('example') );
</script>
自定义标签要一定要用在render中，直接用在html无效。
后面demo为了方便就不写ReactDOM.render()了，实际练习时要加上
注意类名一定要首字母大写，createClass参数是一个对象，
添加组件属性，有一个地方需要注意，对于要调用class属性与for属性，属性名不能直接写 class 或者for，这是因为 class 和 for 是 JavaScript 的保留字。用className="" htmlFor=""代替，这样css一样可以.class找到该元素
3.可嵌套子元素的自定义标签
<script type="text/babel">
var MyList = React.createClass({
render:function(){
return(
<ul>{ React.Children.map(this.props.children,
function(child){return<li>{child}</li>} ) }</ul>
)} //注意大小写，props.children 用于获取子元素
});
// 使用
// <MyList>
// <span>item1</span>
// <span>item2</span>
//</MyList>
</script>
一种映射的方法：array.map(function(item){console.log(item)})遍历array每次输出一个item。
另外如果数组是一系列标签，可以写在容器标签内自动展开,如<div>{array}</div>。
React.Children.map该方法遍历children，而不用理会children因size不同（0,1,1+)而返回的不同类型（undefine,object, array)
4. 组件的参数检查与默认值
<script type="text/babel">
var MyTag = React.createClass({
getDefaultProps: function(){ return {title:"hello"} }, //默认值
propTypes: {title: React.PropTypes.string.isRequired }, //表示title是必须，并且是字符串
render: function(){ return<h1>{this.props.title}</h1>}
});
//<MyTag title={123} /> 控制台报错，但一样会显示在页面
</script>
5. 获取组件内部标签的DOM节点
内部标签定义一个ref属性，组件使用this.refs.xxx内获取节点
var MyInput = React.createClass({
clickEvent:function(){ this.refs.tagInside.focus() }, //clickEvent的名字可随意
render:function(){ return(
<div>
<input type="text" ref="tagInside"/>
<input type="button" value="focus" onClick={this.clickEvent} />
</div> )
}
});
6. 组件的状态this.state
标记组件的状态，用于改变显示的文字，样式等。
var MyInput = React.createClass({
getInitialState: function(){ return { liked: false } },//定义应有的状态与初始化,用键值对形式
clickEvent:function() { this.setState({liked: !this.state.liked }) },//this.setState({}) 改变状态值
render:function() {
var text =this.state.liked ? "liked" : "unliked";
return<input type="button" value={text} onClick={this.clickEvent} />
}
}）;
每次setState后都会自动调用render，因此可以改变样式。
注意this.state与this.props的区别，state可以在交互中改变，可读可写，props定义了了就不能改变，只读。
7. 获取表单的输入
输入表单属于交互，改变this.state
var MyInput = React.createClass({
getInitialState: function() { return {value: "default"} },
changeEvent:function(e) { this.setState({value: e.target.value}) },
render:functiion(){ return(
<div>
<input type="text" value={text} onChange={this.changeEvent} />
<p> {text}</p>
</div> )
} //注意大小写
});
因为每次改变状态都会调用render,因此如果input里的value设为常数，那么输入文本就不会显示改变
8. 组件的生命周期
分为 mounting: 已插入到真实的DOM中；
updating:被渲染中；
unmounting 已经移出真实的DOM
有两种回调函数:will 在进入某一步前调用，did进入某一步后调用，共5个
componentWillMount();
componentDidMount();
componentWillUpdate(oNextProps, oNextState);
componentDidUpdate(oPrevProps, oPrevState);
componentWillUnmount();
这个比较复杂，还是看官网比较好：https://facebook.github.io/react/docs/working-with-the-browser.html#component-lifecycle
9. AJAX
componentDidMount 中可以用jQuery.get() 实现，React 本身没有任何依赖，完全可以不用jQuery，而使用其他库。
<script type="text/babel">
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.body
);
</script>
10. 传入promise对象
<script type="text/babel">
var RepoList = React.createClass({
getInitialState: function() {return {loading:true, data:null, error:null}},
componentDidMount: function() {
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) {
return <span>Error: {this.state.error.message} </span>
} else {
var repos = this.state.data.items;
var list = repos.map(function(repo){
return (
<li>
<a href={repo.html_url}> {repo.name} </a>
({repo.stargazers_count} stars) <br/>
{repo.description}
</li> )
})
}
return (<div>
<h1>Most Popular JavaScript Projects in Github</h1>
<ol>{list}</ol>
</div>)
}
})
ReactDOM.render(
<RepoList promise={$.getJSON('https://api.github.com/search/repositories?q=javascript&sort=stars')} />,
document.getElementById("example")
)
</script>
总结
上面是react的简单用法，更多更详细的解释请看官方文档。
react还可以配合flux框架使用，接下来可以学习这方面的相关知识。
网友评论