ReactJS学习笔记(一)

1.依赖的资源：

2.基本写法：

html：<div id='demo1'></div>

JS：

ReactDOM.render(

<h1>Hello, I.m demo1!</h1>,

document.getElementById('demo1')

);

3.定义组件式写法createClass（！组件名称开头字母一定要大写）

html：<div id='demo2'></div>

JS：

var Demo2Box=React.createClass({

render:function(){

return(

hello,I.m demo2

</div>

);

}

});

ReactDOM.render(

<Demo2Box />,

document.getElementById('demo2')

);

4.React.createElement使用，参数（ ReactElement element, [object props], [children ...]）

基本用法： React.createElement('a', {href: 'http://facebook.github.io/react/'}, 'Hello React!')

html：<div id='demo3'></div>

JS：

var Demo3Box=React.createClass({

render:function(){

return(

React.createElement('div',{className:'demo3Box'},

"hello,I.m demo3"

)

}

});

ReactDOM.render(

React.createElement(Demo3Box,null),

document.getElementById('demo3')

);

5.引用多个组件的写法：

html：<div id='demo4'></div>

JS：

var Demo4List=React.createClass({

render:function(){

return (

"hello,I.m demo4List"

</div>

);

}

});

var Demo4Form=React.createClass({

render:function(){

return (

"hello,I.m demo4Form"

</div>

);

}

});

var Demo4Box=React.createClass({

render:function(){

return (

</div>

);

}

});

ReactDOM.render(

<Demo4Box />,

document.getElementById('demo4')

);

6.this.props[属性名]得到组件的属性。（用于获取外面传入的参数或者回调方法）

特例：this.props.children：表示组件的所有子节点（！没有子节点时就是undefined，如果有一个子节点，数据类型是Object，多个节点时，数据类型就是array。）

外部data，内部通过props遍历：

var data = [

{id: 1, author: "Pete Hunt", text: "This is one comment"},

{id: 2, author: "Jordan Walke", text: "This is *another* comment"}

];

var Demo5Box=React.createClass({

render:function(){

var commentNodes=this.props.data.map(function(comment) {

return (

{comment.text}

</li>

);

});

return(

{commentNodes}

</ul>

)

}

});

ReactDOM.render(

<Demo5Box data={data} />,

document.getElementById('demo5')

);

使用props.children及React.Children：

7.this.state属性对象，可以改变。（比如用户输入、服务器请求、时间变化等）

getInitialState定义初始变量，这个对象可以通过this.state属性读取。

this.setState方法是修改状态值。

html:<div id='demo6'></div>

JS:

var Demo6Box=React.createClass({

getInitialState:function(){

return {liked:false}

handleClick:function(){

this.setState({liked:!this.state.liked});

render:function(){

var text=this.state.liked?'like':'haven\'t liked';

return (

You {text} this,click to toggle.

</p>

)

}

});

ReactDOM.render(

<Demo6Box />,

document.getElementById('demo6')

);

8.组件的propTypes属性，用于验证传入的参数是否符合要求。

组件的 getDefaultProps方法，用来设置组件传入参数的默认值。

html:<div id='demo7'></div>

JS:

/*demo7*/

var title='title';

var bool=true;

var count=10;

var arr=[1,2,3];

var obj={'a':1};

var callback=function(){

console.log('dddddd');

};

var content="dsfsdffdd";

var Demo7Box=React.createClass({

propTypes:{

title:React.PropTypes.string.isRequired,

bool:React.PropTypes.bool.isRequired,

count:React.PropTypes.number.isRequired,

arr:React.PropTypes.array.isRequired,

obj:React.PropTypes.object,

callback:React.PropTypes.func.isRequired,

content:React.PropTypes.any.isRequired

getDefaultProps:function(){

return{

contentDefault:'sdsfsfdsaafdsfds'

}

render:function(){

return (

<div>

<h2>{this.props.title}</h2>

<h2>{this.props.bool}</h2>

<h2>{this.props.count}</h2>

<h2>{this.props.arr}</h2>

<h2>{this.props.obj.a}</h2>

<h2>{this.props.callback()}</h2>

<h2>{this.props.content}</h2>

<h2>{this.props.contentDefault}</h2>

</div>

)

}

});

ReactDOM.render(

<Demo7Box title={title} bool={bool} count={count} arr={arr} obj={obj} callback={callback} content={content} />,

document.getElementById('demo7')

);

9.this.refs:从组件中获取真实DOM的节点。

html：<div id='demo8'></div>

JS：

/*demo8*/

var Demo8Box=React.createClass({

handleClick:function(){

this.refs.myInput.focus();

render:function(){

return (

<div>

</div>

);

}

});

ReactDOM.render(

<Demo8Box />,

document.getElementById('demo8')

);

10.组件的生命周期的处理函数。

组件的生命周期分成三个状态： Mounting：已插入真实 DOM 、Updating：正在被重新渲染、Unmounting：已移出真实 DOM。

React 为每个状态都提供了两种处理函数，will 函数在进入状态之前调用，did 函数在进入状态之后调用，三种状态共计五种处理函数。

componentWillMount()

componentDidMount()

componentWillUpdate(object nextProps, object nextState)

componentDidUpdate(object prevProps, object prevState)

componentWillUnmount()

此外，React 还提供两种特殊状态的处理函数。

componentWillReceiveProps(object nextProps)：已加载组件收到新的参数时调用

shouldComponentUpdate(object nextProps, object nextState)：组件判断是否重新渲染时调用。

html:<div id='demo9'></div>

JS:

/*demo9*/

var Demo9Box=React.createClass({

getInitialState:function(){

return {

num:100

}

componentDidMount:function(){

var num=this.state.num;

this.timer=setInterval(function(){

if(num<=0){

this.setState({num:100})

}

else{

this.setState({num:num-1})

}

}.bind(this),1000)

render:function(){

return (

<div>

{this.state.num}

</div>

)

}

});

ReactDOM.render(

<Demo9Box />,

document.getElementById('demo9')

);