对React.js框架的初步认识

一、React.js产生的背景

React起源于Facebook的内部项目,该公司积极尝试引入HTML5技术用来架设Instagram网站,过程中发现,对于复杂前端HTML5性能明显下降,达不到预期的效果。在经过对市场上所有JavaScriptMVC框架调研后,Facebook认为MVC无法满足他们的扩展需求,由于他们非常巨大的代码库和庞大的组织,使得MVC很快变得非常复复杂,每当需要添加一项新的功能或特性时,系统的复杂度就成级数增长,致使代码变得脆弱和不可预测,找不到满足自己产品的要求,于是react开始被开发。

React 是一个 Facebook 和 Instagram 用来创建用户界面的 JavaScript 库。

由于React 的设计思想极其独特,属于革命性创新,性能出众,代码逻辑却非常简单, React是一个纯View层,不擅长于和动态数据打交道。React很擅长于处理组件化的页面,因此用上React的项目需求常规为界面组件化。

Reactd 的特点:1虚拟DOM,2.组建化。例如:

<script type="text/babel">

    var Login = React.createClass({

          getInitialState: function() {

                      return {

                                        };

                                    },

   render: function() {

               return React.createElement('h1',null,'hello world ');

                                    }

                                });

       ReactDOM.render(

                 React.createElement(Login,null),

                                document.getElementById('example')

                                );

</script>

    

ReactJs是基于组件化的开发,所以最终你的页面应该是由若干个小组件组成的大组件。

可以通过属性,将值传递到组件内部,同理也可以通过属性将内部的结果传递到父级组件;要对某些值的变化做DOM操作的,要把这些值放到state中。

注意:1为组件添加外部css样式时,类名应该写成className而不是class; for应该写成htmlFor。

2组件名称首字母必须大写。

 

二、reactjs使用

    Reactjs的运行基础环境非常简单,只需要在HTML文件中引入js(主要的

    react.js, jquery.min.js, react-dom.js , browser.min.js)文件即可开始工作。

首先,在官网https://facebook.github.io/react/中下载最新的压缩包,解压后如下图所示:

 

点开build文件如下所示的js样式

 

 

将build文件放到HTML文件下js中,然后在HTML中引入需要的js文件。

还需要一个css进行编译如下图

 

这个也需要引入并且放在第一行。这样的话react的环境已经搭建好了。

下面写一个完整hello world的例子。

首先写一个HTML文件

<!DOCTYPE html>

<html>

<head>

    <meta charset="gbk">

    <title>react的例子</title>

</head>

<body >

Hello world

</body>

</html>

然后在HTML中引入js文件

<link rel='stylesheet' href='../assets/css/base.css'>

    <script src="../assets/js/build/react.js" ></script>

    <script src="../assets/js/build/jquery.min.js"></script>

    <script src="../assets/js/build/react-dom.js"></script>

  <script src="../assets/js/build/browser.min.js"></script>

下一步就是在body中写需要渲染的内容,以一对<div>开头,

                         <div id="example"></div>

                            <script type="text/babel">

                                var Login = React.createClass({

                         getInitialState: function() {

                                        console.log(8888);

                                        return{

                                        };

                                    },

                                    render: function() {

                                        return React.createElement('h1',null,'hello world ');

                                    }

                                });

                                ReactDOM.render(

                            React.createElement(Login,null),

                           document.getElementById('example')

                                );

          </script>

通过这个例子,我们看到通过调用React.createClas方法创建了一个组件类Login,这个组件类包含了一个render函数,该函数通过调用React.createElement实现了HTML内容的输出。

创建好的组件类Login随后被ReactDOM.render函数所调用。该函数将调用React.createElement('h1',null,'hello world ')所生成的组件“挂接”到浏览器DOM中的div标签下,从而实现最终在浏览器的输出。

组建的主要成员:

1、state成员

组件总是需要与用户互动,React 把用户界面当作简单状态机,用户界面拥有不同状态,然后渲染这些状态,可以轻松让用户界面和数据保持一致。于是主要工作就是定义state,并根据不同的state渲染对应的用户界面。

当创建一个状态化的组件时,并只把这些数据状态存入this.state。在 render() 里再根据state的变化生成新的状态。React 里,只需更新组件的state,然后根据新的state重新渲染用户界面。

将初始化的状态定义在getInitialState函数中

访问state数据的方法是“this.state.属性名”

变量用{},不需要加双引号 例子yong.html

    2、render成员函数

对于组件来说,render成员函数是必须的。在使用React进行构建应用时,我们总会有一个步骤将组建或者虚拟DOM元素渲染到真实的DOM上,将任务交给浏览器,这个函数就是React.render()。

 

3组件的生命周期

组件的生命周期分成三个状态:实例化阶段,活动阶段,销毁阶段。

Mounting表示正在挂接虚拟DOM到真实DOM,updating表示正在被重新渲染,unmounting表示正在将虚拟DOM移除真实DOM。

React 为每个状态都提供了两种处理函数,will 函数在进入状态之前调用,did 函数在进入状态之后调用。

实例化阶段的函数有:

1. getInitialState 用来初始化各种变量。

2.componentWillMount在组件将要挂载到DOM中执行,这个函数我基本上很少用到。

3.componentDidMount组件已经加载到DOM中会执行这个函数,在这个函数中可以初始化一些将要执行的函数,在React生命周期中只会执行一次。在开发中,在该函数中执行的setState,在随后通过this.state并不能够马上拿到,可以通过定时来获取。

 

活动阶段:

1.shouldComponentUpdate这个函数提供给我们这些开发者是否允许数据源发生改变后去执行Render的控制权。默认这个函数始终返回true。返回false的话,render函数不会执行,,componentWillUpdate和componentDidUpdate也不会执行。可以在这个函数中去执行逻辑判断,是否有必要去执行Render。

2.componentWillUpdate组件将要更新执行。可以在这个函数中清理在componentDidUpdate绑定的事件(这个方式很有用)。

3.componentDidUpdate组件已经更新执行这个操作。可以在这个函数中初始化需要state中的数据源作为参数的函数。为了防止初始化多次,可以在componentWillUpdate中清理。

销毁阶段:

componentWillUnmount组件从DOM中移除会执行这个函数,在此可以清理无用的DOM和事件。

 

三、react的优点

组件化

简单,使用便捷

React可以创建存放组件的虚拟DOM(文档对象模型Document Object Model),这一特点为开发人员提供了高度灵活性,因为React能够提前计算出DOM中哪些内容需要更改,并对DOM树做出相应地更新。通过这种方式,从而大幅提升了工作效率。

 

posted @ 2017-06-01 12:58  天蓝树绿  阅读(182)  评论(0编辑  收藏  举报