相关reactjs的相关知识

一、组件的属性：

var Greet = React.createClass({
render: function() {
return <h1>Hello {this.props.name}</h1>;
}
});

React.render(
<Greet name="Jack" />,
document.getElementById('container')
);


使用React.createClass来生成一个组件；
注意的点：

1、创建组件时，组件的首字母必须大写；

2、获取组件的值时，使用this.props.属性名（id,name）;

3、为元素添加css的class时，需要将class改为className;

4、组件的样式设置时（style）,写法：style={{width:this.state.witdh}}；

二、组件的状态：

var InputState = React.createClass({
getInitialState: function() {
return {enable: false};
},
handleClick: function(event) {
this.setState({enable: !this.state.enable});
},
render: function() {

return (
<p>
<input type="text" disabled={this.state.enable} />
<button onClick={this.handleClick}>Change State</button>
</p>
);
}
});

React.render(
<InputState />,
document.getElementById('container')
);

这里，我们又使用到了一个方法

getInitialState

，这个函数在组件初始化的时候执行，必需返回

NULL

或者一个对象。这里我们可以通过

this.state.属性名

来访问属性值，这里我们将

enable

这个值跟input的disabled绑定，当要修改这个属性值时，要使用

setState

方法。我们声明

handleClick

方法，来绑定到button上面，实现改变

state.enable

的值。

原理分析：
当用户点击组件，导致状态变化，

this.setState

方法就修改状态值，
每次修改以后，自动调用

this.render

方法，再次渲染组件。

这里值得注意的几点如下：

getInitialState

函数必须有返回值，可以是

NULL

或者

一个对象

。

访问state的方法是

this.state.属性名

。

变量用

{}

包裹，不需要再加双引号。

三、组件的生命周期：

组件的生命周期分成三个状态：
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, objectnextState)

：组件判断是否重新渲染时调用。

eg:

var Hello = React.createClass({
getInitialState: function () {
return {
opacity: 1.0
};
},

componentDidMount: function () {
this.timer = setInterval(function () {
var opacity = this.state.opacity;
opacity -= .05;
if (opacity < 0.1) {
opacity = 1.0;
}
this.setState({
opacity: opacity
});
}.bind(this), 100);
},

render: function () {
return (
<div style={{opacity: this.state.opacity}}>
Hello {this.props.name}
</div>
);
}
});

React.render(
<Hello name="world"/>,
document.body
)
上面代码在hello组件加载以后，通过 

componentDidMount

方法设置一个定时器，每隔100毫秒，就重新设置组件的透明度，从而引发重新渲染。


四、组件的嵌套：

var Search = React.createClass({
render: function() {
return (
<div>
{this.props.searchType}:<input type="text" />
<button>Search</button>
</div>
);
}
});
var Page = React.createClass({
render: function() {
return (
<div>
<h1>Welcome!</h1>
<Search searchType="Title" />
<Search searchType="Content" />
</div>
);
}
});
React.render(
<Page />,
document.getElementById('container')
)这里我们创建了一个Search组件，然后又创建了一个Page组件，然后我们在Page组件中调用Search组件，并且调用了两次，这里我们通过属

searchType

传入值。

总结：

1、ReactJs是基于组件化的开发，所以最终你的页面应该是由若干个小组件组成的大组件。

2、可以通过属性，将值传递到组件内部，同理也可以通过属性将内部的结果传递到父级组件(留给大家研究)；要对某些值的变化做DOM操作的，要把这些值放到state中。

3、为组件添加外部CSS样式时，类名应该写成

className

而不是

class

；添加内部样式时，应该是

style={{opacity:
this.state.opacity}}

而不是

style="opacity:{this.state.opacity};"

。

4、组件名称首字母必须大写。

5、变量名用

{}

包裹，且不能加双引号。



参考资料：http://www.ruanyifeng.com/blog/2015/03/react.html

二、组件的状态：