(目录)
这一篇学习React知识点。分别从属性状态和相关API了解一下。
属性状态
属性状态要知道这几个PROPS,PROP VALIDATION,STATE。
PROPS
通过 this.props 可以获取传递给该组件的属性值,还可以 通过定义 getDefaultProps 天来指定默认属性值: 实例代码
varB=React.createClass({
getDefaultPropsO){
return {
title:'default'} ;},
renderO{
return <b>{this.props.title}</b>
}
});
React.render(<div>
<B title-"指定"/> <B title={2}/>
</div>,document.getElementById('container'));
PROP VALIDATION
通过指定 propTypes 可以校验属性值的类型:
varB=React.createClass({
propTypes:{
title: React.PropTypes.string,
},
getDefaultProps(){
return {
title:'default'};},
render(){
return <b>{this.props.title}</b>
}
});
React.render(<div>
<B title-"指定"/> <B title={2}/>
</div>,document.getElementByIdc container"));
STATE
组件内部的状态,可以使用 state:
var Timer = React.createClass({
getInitialstate: function() {
return {secondsElapsed: 0};初始值为0
},
tick: function() {
this.setState({secondsElapsed: this.state.secondsElapsed + 1});},
componentDidMount:function() {
this.interval = setInterval(this.tick,1000);},就会更新自己的状态
componentWillUnmount: functionO {
clearInterval(this.interval);
},
render: function(){
return(
<div>Seconds Elapsed: {this.state.secondsElapsed}</div>更新完之后,ui会自动同步。
);
}
});
状态变了,数据变了,UI就自动变了。
FORM
react中的form和 html 的不同点:
value/checked 属性设置后,用户输入无效textarea 的值要设置在 value 属性select 的 value 属性可以是数组,不建议使用 option 的 selected 属性input/textarea 的 onChange 用户每次输入都会触发(即使不失去焦点)radio/checkbox 点击后触发 onChange。
CONTROLLED COMPONENTS
- 1.如果设置了 value 属性,那么改组件变为受控组件,用户无法输入,除非程序改变 value 属性:
var Test= React.createClass({
render(){
return <input value="x"/>
}
});
React.render(<Test />,document.getElementByIdc"container'));
- 2.可以通过监听 onChange 事件结合 state 来改变 input 的值:
var Test =React.createClass({
getInitialState(){
return {
value: ‘xasdasdf’
};
},
onChange(e){
this.setState({
value:e.target.value
});},
Render(){
return
<input value={this.state.value} onChange={this.onChange}/>
}
});
React.render(<Test />,document.getElementById('container'));
- 3.设置 defaultValue 为设置 input 的初始值,之后 input 的值由用户输入
var Test m React.createClass({
Render(){
return <input defaultValue="xyz" />
}
});
React.render(<Test />,document.getElementByIdc'container'));
MIXIN
React中的Mixin 是一个普通对象,通过 mixin 可以在不同组件间共享。 代码实例:
var mixin = {
propTypes:{
title: React.PropTypes.string,
getDefaultProps()
return{
title: 'default’
};
},
};
var B=React.createClass({
mixins: [mixin],
Render(){
return <b>{this.props.title}</b>
}
});
React.render(<div>
<B/> <A title={2}/>
<A/>
</div>,document.getelementByld(‘contalner'));
为了结合现有非 react 类库,通过 ref/refs 可以取得组件实例,进而取得原生节点。
COMPONENT API
React.createClass 定义组件时允许传入的配置 getDefaultProps 得到默认属性对象 propTypes 属性检验规则 mixins 组件间公用方法
COMPONENT LIFECYCLE
React.createClass 定义时允许传入的函数,会在特定生命
周期内调用
- 1.初次创建组件时调用
getinitialState 得到初始状态对象 render 返回组件树,必须设置 componentDidMount渲染到 dom 树中是调用,只在客户端调用,可用于获取原生节点
- 2.组件的属性值改变时调用
componentWillReceiveProps 属性改变调用 shouldComponentUpdate 判断是否需要重新渲染 render 返回组件树.必须设置 componentDidUpdate 渲染到 dom 树中是调用,可用于获取原生节点 最后是 componentWillUnmount 组件从 dom 销毁前调用
TOP API
React.createClass 创建组件类 React.findDOMNode 从组件实例获取 dom 根节点 React.render 渲染组件到 dom React.Children.*操作 map/forEach children 工具类
#总结 本章了解到了React的属性状态和相关API方法,以及代码实例,React还可以实现数据分离,评论表单、重新渲染等等功能,多上手操练就会越来越熟悉。