React入门学习

2016-07-11 本文已影响1039人牛油果大虾

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 三种组合模式分别有什么样的理解?