react this.state + 组件生命周期

来源：互联网发布：淘宝订单号在哪里找编辑：程序博客网时间：2024/05/19 15:39

组件的生命周期分成三个状态：

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)：组件判断是否重新渲染时调用

例子：

<body>

<div id="example"></div>
<script type="text/babel">
var Text = React.createClass({
getInitialState : function(){
return {
opacity:1.0
}
},
componentDidMount: function(){
var timer = setInterval(function(){
var opacity = this.state.opacity;
opacity -= 0.1;
opacity = opacity<0 ? 1.0 : opacity; console.log(opacity)
this.setState({
opacity : opacity

})

}.bind(this),500)

},
render : function(){
return (
<div>
<p style={{opacity: this.state.opacity}}>新的段落</p>
<div>新的div: {this.props.name}</div>
</div>
)
}
})
ReactDOM.render(
<Text name="textbox"></Text> ,
document.getElementById('example')
)
</script>

</body>

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

React 组件样式是一个对象，所以第一重大括号表示这是 JavaScript 语法，第二重大括号表示样式对象

0 0