到目前为止我们只学习了一种方法来更新UI。
我们调用 ReactDOM.render()
方法来改变输出。
这一节,我们在前面的基础上,如何将之前的例子变成可重用的组件。
先回顾一下之前的方法:
function Clock(props) {
return (
Hello, world!
It is {props.date.toLocaleTimeString()}.
);
}
function tick() {
ReactDOM.render(
,
document.getElementById('root')
);
}
setInterval(tick, 1000);
理想情况下,Clock更细自己的UI应该是自己内部的事情,他能够自己更新自己的UI。
为了实现这个需求,我们需要为Clock组件添加状态
状态与属性十分相似,但是状态是私有的,完全受控于当前组件。
把函数变成类
1.创建一个名称扩展为 React.Component的ES6类
2.创建一个叫做render()的空方法
3.将函数体移动到 render()方法中
4.在 render()方法中,使用 this.props替换 props
export class Tick extends Component {
constructor(props){
super(props);
this.state = {
date:new Date()
}
}
render() {
return (
Hello,{this.props.name}
It is {this.state.date.toLocaleTimeString()}
)
}
}
这里我是在自己本地运行的一个react的环境,在对应的文件写了一个组件。你们也可以在自己本地安装环境,这样学习起来也比较方便:
npm install -g create-react-app
create-react-app my-app
cd my-app
npm start
然后就可以开始了。
现在我们定义了一个类,使用类就允许我们使用其它特性,例如局部状态、生命周期钩子。
代码中,我们是使用构造函数的方法来初始化组件的状态以及传递props
的。
建议大家在学习前还是了解一下类的概念比较容易理解。
接下来我们为组件添加定时器,来更新时间。
将生命周期函数添加到类中
在具有许多组件的应用程序中,在销毁时释放组件所占用的资源非常重要。
每当组件第一次加载到DOM中的时候,这在React中被称为挂载
同样,每当组件生成的这个DOM被移除的时,这在React中被称为卸载。
我们可以在组件类上声明特殊的方法,当组件挂载或卸载时,来运行一些代码:
export class Tick extends Component {
constructor(props){
super(props);
this.state = {
date:new Date()
}
}
componentDidMount() {
}
componentWillUnmount() {
}
render() {
return (
Hello,{this.props.name}
It is {this.state.date.toLocaleTimeString()}
)
}
}
这些方法被称作生命周期钩子。
当组件输出到 DOM 后会执行 componentDidMount()
钩子,这是一个建立定时器的好地方:
componentDidMount() {
this.timerId = setInterval(
() => this.tick(),
1000
)
}
注意我们如何在 this 中保存定时器ID。
虽然 this.props
由React本身设置以及this.state
具有特殊的含义,但如果需要存储不用于视觉输出的东西,则可以手动向类中添加其他字段。
如果你不在 render() 中使用某些东西,它就不应该在状态中。
我们将在 componentWillUnmount()
生命周期钩子中卸载计时器:
componentWillUnmount() {
clearInterval(this.timerID);
}
更新组件局部状态
我们使用用 this.setState()
来更新组件局部状态:
tick() {
this.setState({
date: new Date()
})
}
最后,我们实现了每秒钟执行的 tick() 方法。然后组件每一秒就会更新自己的状态。现在,现在时钟每秒钟都会执行。
关于 setState():
- 不要直接更新状态,应当使用
setState()
- 构造函数是唯一能够初始化 this.state 的地方。
- 状态更新合并,这里的合并是浅合并,当你更新一个状态时,其余的状态保持不变。
数据单向流动
父组件或子组件都不能知道某个组件是有状态还是无状态,并且它们不应该关心某组件是被定义为一个函数还是一个类。
这就是为什么状态通常被称为局部或封装。 除了拥有并设置它的组件外,其它组件不可访问。
组件可以选择将其状态作为属性传递给其子组件,这也适用于用户定义的组件:
FormattedDate 组件将在其属性中接收到 date 值,并且不知道它是来自父组件 状态、还是来自 父组件的属性、亦或手工输入:
function FormattedDate(props) {
return It is {props.date.toLocaleTimeString()}.
;
}
这通常被称为自顶向下或单向数据流。
为了表明所有组件都是真正隔离的,我们可以创建一个 App 组件,它渲染三个Tick
:
export class App extends Component {
render() {
return (
);
}
}
每个 Tick
建立自己的定时器并且独立更新。