section-1
//react组件
export class Halo extends React.Component{
constructor(...args){
super(...args); //初始化父类构造函数
this.state={ //设置state
text:""
}
}
hello(ev){
this.setState({ //修改state
text:ev.target.value
})
}
render(){
return(
{/*只能一个父元素包裹*/}
<div>
{/*事件大小写注意 onChange onClick*/}
<input type="text" onChange= {this.hello.bind(this)}/>
<span>{this.state.text}</span>
</div>
)
}
}
section-2
export class Halo extends React.Component{
constructor(...args){
super(...args);
this.state={
display:"block"
}
}
toggle(){
this.setState({
display:this.state.display==="none" ? "block":"none"
})
}
render(){
return(
<div>
<input type="button" value="切换" onClick={this.toggle.bind(this)}/>
{/*class在JSX中需要改成className*/}
{/*行内样式需要加两个花括号*/}
<span className="content" style={{display:this.state.display}}>内容的显示和隐藏</span>
</div>
)
}
}
section-3
export class Halo extends React.Component{
constructor(...args){
super(...args);
this.state={
h:0,
m:0,
s:0
};
setInterval(function(){
this.update();
}.bind(this),1000)
}
update(){
let date=new Date();
this.setState({
h:date.getHours(),
m:date.getMinutes(),
s:date.getSeconds()
})
}
componentDidMount(){
this.update();
}
render(){
return(
<div>
{this.state.h}:{this.state.m}:{this.state.s}
</div>
)
}
}
section-4
/*react 生命周期*/
componentWillMount() 创建前
componentDidMount() 创建后
componentWillUpdate() 更新前
componentDidUpdate() 更新后
componentWillUnMount() 销毁前
componentWillReceiveProps(nextProps){
// ???
}
shouldComponentUpdate(){
//返回boolean值 默认每次状态更改时重新渲染
//返回false componentWillUpdate(),render()和componentDidUpdate()将不会被调用
}
section-5
//组件的另一种写法 无状态state组件
//Es6 React.Component Es5 React.createClass 其他两种定义方式
let Item=function(props){
return <li>{props.value}</li>
};
export class Halo extends React.Component{
constructor(...args){
super();
this.state={
arr:[1,2,3,4,5]
}
}
addItem(){
this.setState({
arr:this.state.arr.concat([Math.random()])
})
}
render(){
let result=[],arr=this.state.arr;
for(var i=0;i<arr.length;i++){
{/*需要给每个Item增加unique key唯一标识*/}
result.push(<Item key={i} value={arr[i]} />)
}
return(
<div>
<input type="button" value="增加Item" onClick={this.addItem.bind(this)}/>
<ul>
{result}
</ul>
</div>
)
}
}