propTypes 检查组件的属性值是否符合要求
var Test = React.createClass({
PropTypes: {
title: React.PropTypes.string.isRequired
},
render: function() {
return (
<h1>{this.props.title}</h1>
)
}
});
var titleData = 111;
ReactDOM.render(
<Test title={titleData}></Test>,
document.querySelector('#display')
);
注意React.PropTypes是大写开头
ref 真实DOM
- React使用的是虚拟DOM的实现方式，即所有的DOM先在虚拟DOM中发生，再反应在真实的DOM上
- 在标签上使用
ref="refName"属性，获取时使用this.refs.refName就可以拿到真实的DOM -
this.refs.refName需要在虚拟DOM插入到文档之后才能使用，否则会报错
state 状态机
-
getInitialState用于初始化状态，这个对象可以通过this.state拿到，因此对象里的属性也可以通过this.state.属性名的方式获取到 - 通过
this.setState()来修改状态值，每次修改之后，会自动调用this.render()方法再次渲染组件
state和props的区别
都用于描述组件的特性，this.props表示那些一旦定义，就不再改变的特性，而this.state是会随着用户互动而产生变化的特性。
表单与onChange、setState、event.target.value实现值同步
输入框实时输入的值，不能用 this.props.value 读取，而要定义一个 onChange 事件的回调函数，通过 event.target.value 读取用户输入的值。textarea 元素、select元素、radio元素都属于这种情况
var MyInput = React.createClass({
getInitialState: function() {
return {
value: "input some words here"
};
},
inputHandleChange: function(e) {
this.setState({
value: e.target.value
});
},
render: function() {
return (
<div>
<input type="text" value={this.state.value} onChange={this.inputHandleChange}/>
<h1>{this.state.value}</h1>
</div>
);
}
});
ReactDOM.render(
<MyInput></MyInput>,
document.querySelector('#display')
);
生命周期
生命周期的三个状态
- Mounting 已挂载真实DOM
- Updating 正在重新渲染
- Unmounting 已卸载真实DOM
生命周期调用的方法：
- 初始化阶段：
- getDefaultProps() 初始化属性
- getInitialState() 初始化状态
- componentWillMount() 准备挂载
- render() 渲染
- componentDidMount() 挂载完毕
- 运行阶段：
- componentWillReceiveProps() 组件将接收到新属性
- shouldComponentUpdate() 收到新属性或新状态判断是否重新渲染
- componentWillUpdate() 准备重新渲染
- render() 渲染
- componentDidUpdate() 重新渲染完毕
- 销毁阶段：
- componentWillUnmount() 准备卸载
组件样式
- 错误写法：
style="opacity:{this.state.opacity};"
- 正确示范：
style={{opacity: this.state.opacity}}
