请添加图片描述

属性状态

属性状态要知道这几个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还可以实现数据分离，评论表单、重新渲染等等功能，多上手操练就会越来越熟悉。

【前端】一个更底层库-React基础知识点第2篇

目录