跟着阮一峰老师学习React.js

算算自己学的东西虽然实战很少但是也该学这个了，起码我要认识它呀！

1，如果有跟我一样想要入门reactjs的同样可以跟着阮老师走走看阮老师的REact.js,

2，当然对于英文阅读水平较高的同学可以看官方文档reactjs官方手册

下面我开始学习喽跟着老师做个笔记(我觉得尽量每一个部分都自己完全实现一遍)：

一，就html模板的理解：

引入的库react.js(react核心库) react-dom.js（dom相关功能库） browser.js(将jxs语法转变为js语法，多在服务器端运行因为大)

jxs:JSX本身就和XML语法类似，可以定义属性以及子元素。唯一特殊的是可以用大括号来加入JavaScript表达式。遇到 HTML 标签（以 < 开头），就用 HTML 规则解析；遇到代码块（以 { 开头），就用 JavaScript 规则解析。在这里使用JXS语法的<script>标签中type="text/babel"

二，ReactDOM.render()方法使用，将html模板插入页面：

 <body>
    <div id="cyan1"></div>
	<script type="text/babel">
	    ReactDOM.render(
		<h1>cyancyan</h1>,
		document.getElementById('cyan1')
		);
	</script>
  </body>

三，JXS语法：允许html,js混写，原则见上边红色字

实例一：

<body>
    <div id="cyan"></div>
	<script type="text/babel">
	    var names=['cyan1','cyan2','cyan3','cyan4'];
		ReactDOM.render(
		<div>
		{
		     names.forEach(function(name,index){
			 return <div key={index}>hi,{name}</div>
			 })
		}
		</div>,
		document.getElementById('cyan')
		);
	</script>
  </body>

实例二：用来说明jxs语法中使用变量，此处是一个数组变量

<body>
    <div id="cyan"></div>
	<script type="text/babel">
	    var arr=[
		<h1 key='0'>cyancyan</h1>,    //此处注意为数组元素加key值
		<p key='1'>thinkgamer</p>
		];
		ReactDOM.render(
		<div>{arr}</div>,
		document.getElementById('cyan')
		);
	</script>
  </body>

四，组件：React.createClass()方法

实例：

<body>
    <div id="cyan"></div>
	<script type="text/babel">
	    var Hicyan=React.createClass(
		{
		   render:function(){
		  return <h1>hi,{this.props.className}</h1>
		}
		});
		ReactDOM.render(
		   <Hicyan className='cyan'/>,//此处单双标均可
		   document.getElementById('cyan')
		);
	</script>
  </body>

注意点：1，对于添加的标签属性值的获取利用 this.props.属性名得到；此外这里属性名特殊的有class-----className代替， for-----htmlFor代替，因为这两个与js保留字冲突；

2，会报错：(1) 组件首字母必须大写； (2) 一个组件只能有一个顶级标签（意思就是组外层标签不能有兄弟标签）

五，this.props.children问题

实例：

<body>
    <div id="cyan"></div>
	<script type="text/babel">
	    var Hicyan=React.createClass(
		{
		   render:function(){
		  return <ol>{
		     React.Children.map(this.props.children,function(child){
			     return <li>{child}</li>
			 })
		  }</ol>
		}
		});
		ReactDOM.render(
		   <Hicyan>
		       <span>cyan1</span>
			   <span>cyan2</span>
		   </Hicyan>,
		   document.getElementById('cyan')
		);
	</script>
  </body>

this.props属性与组件属性的一个大的差别在于组件的所有子节点this.props.children,由于组件子节点的个数不确定，因此this.props.children类型可能是undefined,object,array；为了解决，利用React.Children方法来决定：React.Children.map来解决。

六，PropTypes用于验证组件参数

注意每一部分的大小写及其使用，实例如下：

<body>
<div id="cyan"></div>
<script type="text.babel">
   var Prop=React.createClass({
       PropTypes:{
            title:React.PropTypes.string.isrequired,
        },
       render:function(){
            return <h1>{this.props.title}</h1>
      }
    }),
    ReactDOM.render(
        <Prop title="123"></Prop>,
        document.getElementById("cyan")
      )
</script>
</body>

当然也可以设置默认属性的值用getDefaultProps来返回对属性的约束。
七，ref获取真实DOM, 进行进一步的渲染：

实例如下：

 <body>
   <div id="cyan"></div>
   <script type="text/babel">
      var Crel=React.createClass({
	      handleClick:function(){
		     this.refs.textinput.focus();
		  },
		  render:function(){
		     return (
			 <div>
			 <input type="text" ref="textinput"/>
			 <input type="button" value="CLICKGO" onClick={this.handleClick}/>
			 </div>
			 );
		  }
	  });
      ReactDOM.render(
	     <Crel></Crel>,
		 document.getElementById("cyan")
	  );
   </script>
  </body>

此处学习完毕后去熟悉Reactjs事件部分的细节知识点.

八九，State状态与表单元素的结合理解：

实例如下：

<body>
   <div id="cyan"></div>
   <script type="text/babel">
       var Fomsta=React.createClass({
	         getInitialState:function(){
		       return {value:"cyan"};
		   },
		   handelChange:function(event){
                  var e=event?event:window.event;
                  this.setState({value:e.target.value});			
		   },
		   render:function(){
		   var value=this.state.value;
		      return (
			     <div>
				    <input type="text" value={value} onChange={this.handelChange}/>
					<p>{value}</p>
				 </div>
			  )
		   }
	   });
       ReactDOM.render(
	     <Fomsta/>,
		 document.getElementById("cyan")
	   )
   </script>
  </body>

组件的变化，互动是不可避免的，因此组件中借由状态来使其变化，而表单的交互更是需要利用状态的变化来实现与用户的良好互动。getInitialState()来设置初始状态，setState()则实现状态的不断切换改变。

十，生命周期的描述：

React中生命周期以DOM的载入来划分为三个：

Mounting【DOM元素已经被插入】，updating【DOM重新加载】，unmounting【DOM被移除】，

此外每个阶段又有两个函数来规定状态will【将要】，did【已经做了】因此有以下五个函数：

componentWillMount(),componentDidMount(),compnentWillUpdate( 下属性，下状态),componentDidUpdate(上属性，上状态),componentWillUnmount()，

两个特殊的函数：

componentWillReceiveProps(下一个属性)【已加载组件收到新的参数时调用】，shouldUpdateMount(下一个属性，下一个状态)【判断是否要加载下一个】

应用实例如下（本例子是利用了插入后的函数状态）：

<body>
   <div id="cyan"></div>
   <script type="text/babel">
      var Life=React.createClass({
	     getInitialState:function(){
		    return {opacity:1.0};
		 },
		 componentDidMount:function(){
		 var timer=setInterval(function(){		 
		     var opacity=this.state.opacity;
			 opacity-=0.3;
			 if(opacity<0.1){
			 opacity=1.0;}
			 this.setState({opacity:opacity});
		 }.bind(this),100);
		 },
		 render:function(){
		    return(
			   <div style={{opacity:this.state.opacity}}>
			      hi,{this.props.name}
			   </div>
			)
		 }
	  });
      ReactDOM.render(
	  <Life name="cyan"/>,
	  document.getElementById('cyan'))
   </script>
  </body>

跟着阮一峰老师学习React.js

猜你喜欢