组件属性
props
组件的属性， 主要作用是让使用该组件的父组件可以传入参数来配置该组件。它是外部传进来的配置参数，组件内部无法控制也无法修改。当外部组件主动传入新的 props可进行修改
state
组件当前的状态，根据state的值呈现UI，当数据发生改变的时候通过render进行渲染，用于组件保存、控制、修改自己的可变状态。state 在组件内部初始化，组件自身通过this.setState进行触发修改，而外部不能访问也不能修改
无状态组件
<script type="text/babel">
var HelloWorld =(props)=>{
return <div>{props.name}</div>;
}
ReactDOM.render(
<HelloWorld name="Hello world !"/>,
document.getElementById('grid')
);
</script>
- 优点
语法简洁
占用内存小，扩展性好 - 缺点
无生命周期，this变量为undefine不能使用
创建组件类
组件类名第一个字母应大写，并且只能包含一个顶层标签
React.createClass
<script type="text/babel">
var LikeButton = React.createClass({
getInitialState: function() {
return {number: 0};
},
handleClickAdd: function() {
var number = this.state.number;
this.setState({number:number+1});
},
render: function() {
return (
<div >
<p>{this.state.number}</p>
<input type="button" value="+" onClick={this.handleClickAdd}/>
</div>
);
}
});
ReactDOM.render(
<LikeButton />,
document.getElementById('example')
);
</script>
- 对于状态的处理使用getInitialState函数进行设置初始值
- 使用React.createClass会自动绑定this
extends React.Component
<script type="text/babel">
class Hello extends React.Component{
constructor(props){
super(props);
this.state={Message:"Welcome World !"};
this.Attention=this.Attention.bind(this);
}
Attention(){
this.setState({Message:"hello world ！"});
}
render(){
return(
<div>
<p>{this.state.Message}</p>
<input type="button" value="change" onClick={this.Attention}/>
</div>
);
}
}
ReactDOM.render(
<Hello/>,
document.getElementById('example')
);
</script>
- extends React.Component 中this需要自己手动绑定，通过es6的bind进行绑定，
在构造函数中绑定：
constructor(props){
super(props);
this.state={Message:"Welcome World !"};
this.Attention=this.Attention.bind(this);
}
在render中绑定:
render(){
return(
<div>
<p>{this.state.Message}</p>
<input type="button" value="change" onClick={this.Attention.bind(this)}/>
</div>
);
- 舍弃了getInitailState函数
最后
- 组件尽可能地少状态使得组件逻辑就越容易维护。
- 当更改这个状态（数据）需要更新组件 UI 的就可以认为是 state，
下面这些可以认为不是状态：
可计算的数据(比如一个数组的长度)和 props 重复的数据(除非这个数据是要做变更的)
