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

来源：互联网发布：sql是一种什么语言编辑：程序博客网时间：2024/06/05 01:54

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

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>

阅读全文

0 0