React入门

最新推荐文章于 2024-11-07 09:11:54 发布

weixin_30247159

最新推荐文章于 2024-11-07 09:11:54 发布

阅读量73

点赞数

文章标签： ui javascript webpack ViewUI

原文链接：http://www.cnblogs.com/shaoshuai0305/p/8004298.html

版权

第一节：如何开始react和了解react的概念

1.React是什么

　　react是Facebook 开发出来用于促进UI交互，创建带有状态的，可复用的UI组建的UI库！Feacebook的产品广泛运用这技术，Instagram.com（一款图片分享应用）基于react开发出来的。（这里的理解难点在于带有状态的，可复用的UI组件。也就是一个UI组件，它带有状态属性，并且可重复使用！）

　　react的最大的卖点就是，react不仅可以在浏览器端使用，还可以在服务端使用，还可以两端一起使用！

　　react的底层的概念：react运用的是Virtual DOM（虚拟DOM），然后根据UI组件的状态变化，有选择的渲染DOM的节点树！它尽可能的操作最少的DOM来更新UI组件。

2.虚拟DOM是如何工作的？

　　想象下，你建立一个关于人的对象。这对象拥有人的每一个属性，然后这对象就像镜子一样，映射出一些人中每一个人的所有属性。这就是React与DOM的主要关系。

　　（我是这么理解的，React的虚拟DOM尽可能的拥有DOM的一切属性，然后在应用中使用虚拟DOM映射出当前应用需要的所有DOM节点！）

　　现在，如果我们给这个对象，添加一个胡子、一些肱二头肌、Steve Buscemi 的眼睛（给人对象的某个实例添加这些）。在react中，当我们需要这些变化产生，（react）会发生两件事。第一件事，就是react会运行"差异"算法，也就是前跟后发生了哪些变化。第二件事，就是把这种"差异"算法的出的结果更新到DOM上（应该是虚拟DOM）

　　React的这种运行模式不同于依照变化前的人，然后开始重新把这些变化后的人塑造出来（我是这里理解的，原本的DOM要变化一个节点，需要新建一个节点再把变化加上去，然后再去替换之前的节点。而react的方式，就是在它自己的虚拟DOM上直接把需要变化的地方，变化下OK了）。它只需要换下脸和手臂。这就意味着，如果你想要在input输入框中把一些文本渲染出来，只要输入框的父节点没有安排改变，它将会保持原状！（只修改要变化的，不要变化的保持原状！）

3.开始React的准备

　　第一步，下载开发包。下载地址:http://facebook.github.io/react/downloads/react-0.11.2.zip

　　　　　　你也可以用bower安装新版的react。

 
          bower install react

　　第二步，在页面中引入react库。

　　　　在页面中引入react库，分别引入react.js和JSXTransformer.js这两个文件。然后在自己的type为text/jsx的srcipt标签中写应用组件。

 
          <!DOCTYPE html> 
         
          <html> 
         
          <head> 
         
          <title></title> 
         
          <script src= 
          "bower_components/react/JSXTransformer.js" 
          ></script> 
         
          <script src= 
          "bower_components/react/react.js" 
          ></script> 
         
          </head> 
         
          <body> 
         
          <div id= 
          "mount-point" 
          ></div> 
         
          <script type= 
          "text/jsx" 
          > 
         
          //这里的type是text/jsx 
         
          //这里你的代码 
         
          </script> 
         
          </body> 
         
          </html>

　　　　在react中，组件都是绑定到一个元素中，上面的例子就是用id 为mount-point的div作为组件的容器。

　　　　这种事开始react的最简单的方法。但在实际应用中，使用Browserify或者webpack把组件代码放到单独文件中的方法更好。

4.React的基础

　　现在我开始一个简单的展示：

 
          <script type= 
          "text/jsx" 
          > 
         
          React.render( 
         
          <h1>Hellow, World!</h1>, 
         
          document.getElementById( 
          'mount-point' 
          ) 
         
          ) 
         
          </script>

　　用浏览器打开html页面，效果就是：

5.JSX

　　　这种写法叫JSX。这是一种javascript XML语法的转换（javascript 中的XML语法）。这可以让你在javascript中编写html标签。其实你编写的是基于对象展现的XML。

　　　　对于常规的html标签，在JSX中class属性是className，for属性是htmlFor。应为class、for等都是javascript的保留字。更多的不同你可以看这里　　　　（http://facebook.github.io/react/docs/jsx-gotchas.html）

　　　　如果你不用JSX语法编写，用存粹的javascript的语法你可以这么写。

 
          <script type= 
          "text/javascript" 
          > 
         
          React.render( 
         
          React.DOM.h1( 
          null 
          ,  
          'Hello, World!' 
          ), 
         
          document.getElementById( 
          'mount-point' 
          ) 
         
          ) 
         
          </script>

　　在网页中也能显示出Hello， World！

6.组件

　　　当时调用render的方法时，它的第一个参数就是就要选人的组件。第二个参数就是你想定绑定的DOM节点。

　　　　我们可以使用createClass方法创建一个自定义的组件。它接受一个对象格式的参数。例子如下：

var MyComponent = React.createClass({
    render: function(){
        return (
            <h1>Hello, world!</h1>
        );
    }
});

　　　　创建了一个组件之后，可以把MyComponent渲染到我们的DOM中：

 
          React.render( 
         
          <MyComponent/>, 
         
          document.getElementById( 
          'mount-point' 
          ) 
         
          )

7.Props

　　　　当我们使用定义的组件时，我们可以给它添加props属性。这属性非常有作用，在我们的组件中作为this.props。当我们想要渲染动态数据就使用它。

　　　　列子如下：

 
          var  
          MyComponent = React.createClass({ 
         
          render:  
          function  
          () { 
         
          return  
          ( 
         
          <h1>Hello, { 
          this 
          .props.name}!</h1> 
         
          ); 
         
          } 
         
          }); 
         
          React.render( 
         
          <MyComponent name= 
          "Ailen" 
          />, 
         
          document.getElementById( 
          'mount-point' 
          ) 
         
          )

　　　　显示结果就是：

8.规范，生命周期和状态

　　创建一个组件， render 方法是唯一需要的规范。但我们的组件想要完成其他一些事情时，这里有几个生命周期方法和规范供组件有效的完成这些事情。

　　生命周期方法：

　　　　1.componentWillMount（组件将要安装绑定）：在客户端和服务端组件被渲染之前，componentWillMount执行一次。

　　　　2.componentDidMount （绑定安装过的组件）： 组件渲染完成后仅在客户端compoentDidMount调用一次。

　　　　3.shouldComponentUpdate（应该更新的组件）：返回值决定组件是否要更新。

　　　　4.componentWillUnmount（将要取消安装绑定的组件）：优先调用要取消安装绑定的组件。

　　　　（这里我也是一知半解）

　　Specs（规格，规范）

　　　　1.getInitialState： 为状态返回一个初始化值。

　　　　2.getDefaultProps：如果为提供props，设置回退的props值。

　　　　3.mixins： 通过一个关于对象的数组来扩展组件的功能性。

　　关于更多的specs 和 lifecycle方法可以点击链接：http://facebook.github.io/react/docs/component-specs.html

　　State（状态）

　　　　每个组件都有一个state对象和一个props对象。state使用setState方法，调用setState来触发视图更新和React的交互性。如果我们想在交互发生之前设置一个默认的状态，可以使用getInitialState方法。下面举例演示组件的状态：

 
          var  
          MyComponent = React.createClass({ 
         
          getInitialState:  
          function  
          () { 
         
          return  
          { 
         
          count: 5 
         
          } 
         
          }, 
         
          render:  
          function  
          () { 
         
          return  
          ( 
         
          <h1>{ 
          this 
          .state.count}</h1> 
         
          ) 
         
          } 
         
          }); 
         
          React.render(<MyComponent/>, document.getElementById( 
          'mount-point' 
          ));

9.Event（事件）

　　　　react也提供一套能够兼容各浏览器的事件系统。这些事件作为属性添加组件上可以触发方法。

　　　　　下面我们通过事件来实现count自增。

 
          var  
          MyComponent = React.createClass({ 
         
          incrementCount:  
          function  
          () { 
         
          //修改state 通过setState方法 
         
          this 
          .setState({ 
         
          count:  
          this 
          .state.count + 1 
         
          }) 
         
          }, 
         
          //getInitialState 初始化state的值 
         
          getInitialState:  
          function  
          () { 
         
          return  
          { 
         
          count: 5 
         
          } 
         
          }, 
         
          render:  
          function  
          () { 
         
          return  
          (<br>　　　　　　　　　　　　　　　 
          //友情提醒、react的组件必须用一个一个容器包裹下。也就是这里的div。如果只有一个标签例如：<h1>hello, world!</h1>就不需要div包裹了。 
         
          <div> 
         
          <h1>{ 
          this 
          .state.count}</h1> 
         
          <button type= 
          "button"  
          onClick={ 
          this 
          .incrementCount} >Increment</button> 
         
          </div> 
         
          ) 
         
          } 
         
          }); 
         
          React.render(<MyComponent/>, document.getElementById( 
          'mount-point' 
          ));

　　感觉很酷哦！

10.Unidirectional Data Flow(单向数据流)

　　　　react中，应用的数据传递是单向的通过state和props对象，不同于angular的双向数据绑定。单向数据流的意思就是，在一个多组件构成的应用中，每一个父组件负责管理state并且通过props传递给下一层组件。

　　　　　状态（state）通过setState方法来更新，来确保UI更新发生。如果有必要state的最终结果值应该被当作子组件的属性传递给子组件，在子组件中通过this.props来获取值。

　　　　　下面来举

 
          var  
          FilteredList = React.createClass({ 
         
          //自定义的过滤方法 
         
          filteredList:  
          function  
          (event) { 
         
          var  
          updateList =  
          this 
          .state.initialItems; 
         
          //根据输入框的值来过滤出结果 
         
          updateList = updateList.filter( 
          function  
          (item) { 
         
          return  
          item.toLowerCase().search(event.target.value.toLowerCase()) !== -1; 
         
          }); 
         
          //将过滤出的值通过setState方法来更新state 
         
          this 
          .setState({items: updateList}); 
         
          }, 
         
          //state 初始化方法 
         
          getInitialState:  
          function  
          () { 
         
          return  
          { 
         
          initialItems: [ 
          "Apples" 
          ,  
          "Broccoli" 
          ,  
          "Chicken" 
          ,  
          "Duck" 
          ,  
          "Eggs" 
          ,  
          "Fish" 
          ,  
          "Granola" 
          , 
          "Hash Browns" 
          ], 
         
          items: [] 
         
          } 
         
          }, 
         
          //在组件渲染之前执行该方法 
         
          componentWillMount:  
          function  
          () { 
         
          this 
          .setState({items:  
          this 
          .state.initialItems}); 
         
          }, 
         
          render:  
          function  
          () { 
         
          //onChange 事件来执行filteredList方法 
         
          //再将更新过的state 作为List组件的属性传递给List组件 
         
          return  
          ( 
         
          <div  
          class 
          = 
          "filter-class" 
          > 
         
          <input type= 
          "text"  
          placeholder= 
          "Search"  
          onChange={ 
          this 
          .filteredList} />   
         
          <List items={ 
          this 
          .state.items} /> 
         
          </div> 
         
          ) 
         
          } 
         
          }) 
         
          var  
          List = React.createClass({ 
         
          render:  
          function  
          () { 
         
          //List组件中通过this.props来获取到FilteredList传递进来的值 
         
          return  
          ( 
         
          <ul> 
         
          { 
         
          this 
          .props.items.map( 
          function  
          (item) { 
         
          return  
          <li key={item}>{item}</li> 
         
          }) 
         
          } 
         
          </ul> 
         
          ) 
         
          } 
         
          }); 
         
          React.render(<FilteredList/>, document.getElementById( 
          "mount-point" 
          ));