React 官网列子学习
一个有状态的组件
除了接受输入数据(通过 this.props
),组件还可以保持内部状态数据(通过this.state
)。当一个组件的状态数据的变化,展现的标记将被重新调用render()
更新。
先看结构,下面是hook函数
hook函数:<br>
最早是指windows 系统下提供的一种用来替换DOS 系统下的中断的系统机制;<br>
现在则是泛指,在对特定的系统事件进行hook 后,一旦发生已hook 事件,对该事件进行hook 的程序,就会收到系统的通知。这是程序就可以对该事件第一时间做出响应。
//Mounting 表示 React Components 被render 解析生成对应的DOM 节点并被插入浏览器的DOM 节点并被插入浏览器的DOM 结构的一个过程//执行顺序看上图
var Timer = React.createClass({
//初始化state
getInitialState: function() {
return {secondsElapsed: 0};
},
tick: function() {
//调用setState为secondsElapsed重新赋值,调用后会重新render
this.setState({secondsElapsed: this.state.secondsElapsed + 1});
},
//react Components生命周期在render后调用
componentDidMount: function() {
//定时器更新this.interval = setInterval(this.tick, 1000);
},
//react Components生命周期在控件销毁时调用
componentWillUnmount: function() {
//清除当前定时器clearInterval(this.interval);
},
render: function() {
return (
//输出当前secondsElapsed值
<div>Seconds Elapsed: {this.state.secondsElapsed}</div>
);
}
});
//mountNode,绑定到指定id上,一般这么写document.getElementById('app')
React.render(<Timer />, mountNode);
以上是 React 官网列子学习 的全部内容, 来源链接: utcz.com/z/381518.html