React作为近来最火的前端框架,相信很多前端小伙伴都开始或正在学习,但学习的资料现在来讲相对较少或没权威或看不懂啊(大牛好像根本不会想你懂不懂啊),题结合自己的学习经历来分享一下如何入门.
图片来源于网络
1.心态:怀着敬畏心态的同时想着这也不过是个渣渣(不能想当然的以为很难而被吓到)
2.记下这段代码,记下这段代码,记下这段代码(重要的事情说三遍)
<body>
<!--规定DOM容器-->
<div id="example"></div>
<!--注意是babel而不是javascript或其他-->
<script type="text/babel">
//此处的ReactDOM而不是React(一些老版本的教程用的React可以用,但题主在学习时发现会报错,因为React目前完善的很快,所以API可能会变化,此坑注意)
ReactDOM.render(
<h1>Hello, world!</h1>,
document.getElementById('example')
);
</script>
</body>
下面让我们来更进一步的了解一下它
一.React起源
React 起源于 Facebook 的内部项目，因为该公司对市场上所有JavaScript MVC 框架，都不满意，就决定自己写一套，用来架设Instagram的网站。做出来以后，发现这套东西很好用，就在2013年5月[开源]了。(此类东西自己百科)
2.####:扩展:你对MVC、MVP、MVVM 三种组合模式分别有什么样的理解?
二.React特点
1.React的最大优点是组件化
如何理解组件化开发?
个人理解:组件化开发就是将网页碎片化,模块化(就像大家都玩过的积木,多个单个的小块可以通过组合构建出不同的东西,而不是直接雕刻出一个整体),这样优点显而易见,方便代码的维护以及后续功能的添加.
2.JSX语法
什么是JSX语法?
JSX语法，像是在Javascript代码里直接写XML的语法，实质上这只是一个语法糖(又叫糖衣语法,在某种语言中添加语法,达到增强可读性的同时不影响原功能),类似的有TypeScript和CoffeeScript等
3.Virtual DOM(虚拟DOM)
React组件中的DOM不是真正的DOM,只是存在于内存中的一种结构,当它插入文档以后才变成真实的DOM.
4.ReactDOM.render(ReactDOM渲染)
这行代码贯穿React始终,非常重要x3
三.React写法结构
像开篇提到的那样可简单理解为
1.html部分定义container(DOM容器)
2.定义组件将它插入到container
下面写几个demo来方便大家理解
首先下载react相关文档
下载地址:React中文社区
开发时引入react.js,rect-dom.js,browser.min.js这三个文件
1.较核心的组件demo
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<!--文件引入-->
<script src="js/react.js" type="text/javascript" charset="utf-8"></script>
<script src="js/react-dom.js" type="text/javascript" charset="utf-8"></script>
<script src="js/browser.min.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<!--定义容器-->
<div id="container">
</div>
<script type="text/babel">
//自定义组件,组件名(此处的Hello)首字母大写,小写不显示
var Hello = React.createClass({
//渲染函数
render:function(){
//return的东西要有()较多老版本没用,此坑注意
return(
<div>hello {this.props.name}</div>
)
}
});
//此处的ReactDOM不是React,原因同上
//格式ReactDOM.render(a,b);
//将组件插入容器
ReactDOM.render(<Hello name = "text"/>
,document.getElementById('container')
);
</script>
</body>
</html>
上面代码所涉及的坑代码段中有标注
此段代码执行结果为
hellotext
2.组件生命周期demo
此处涉及的概念
1.组件的生命周期分成三个状态：
Mounting：已插入真实 DOM
Updating：正在被重新渲染
Unmounting：已移出真实 DOM
var Hello = React.createClass({
//getInitialState:定义初始状态
getInitialState: function () {
return {
opacity: 1.0
};
},
//React生命周期处理函数共5种(*自行百科*)
componentDidMount: function () {
this.timer = setInterval(function () {
//React中设置属性状态的state
var opacity = this.state.opacity;
opacity -= .05;
if (opacity < 0.1) {
opacity = 1.0;
}
this.setState({
opacity: opacity
});
//ES5:把方法里的this指针改为bind括号里那个对象
}.bind(this), 100);
},
render: function () {
return (
//注意此处设定style的格式和双大括号
<div style={{opacity: this.state.opacity}}>
Hello {this.props.name}
</div>
);
}
});
ReactDOM.render(
<Hello name="world"/>,
document.getElementById('example')
);
此段代码实现的功能是文本Hello text透明度从1到0的循环变换
以上为个人学习总结,欢迎提出意见纠错和改进
参考资料:
1.React入门
2.react入门实例教程
3.react中文网
4.你对MVC、MVP、MVVM 三种组合模式分别有什么样的理解?
