算算自己学的东西虽然实战很少但是也该学这个了,起码我要认识它呀!
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>