生命周期 & State

在本节中,我们将学习如何重用和封装一个 Clock 组件。它将设置自己的计时器,并每秒钟更新一次。

我们可以从封装时钟开始:

  1. class Clock extends Component {
  2. render () {
  3. return (
  4. <View>
  5. <Text>Hello, world!</Text>
  6. <Text>现在的时间是 {this.state.date.toLocaleTimeString()}.</Text>
  7. </View>
  8. )
  9. }
  10. }

Clock 现在被定义为一个类,使用类就允许我们使用其它特性,例如局部状态、生命周期钩子。

为一个类添加局部状态

首先,我们需要添加一个类构造函数来初始化状态 this.state

  1. class Clock extends Component {
  2. constructor (props) {
  3. super(props)
  4. this.state = { date: new Date() }
  5. }
  6. render () {
  7. return (
  8. <View>
  9. <Text>Hello, world!</Text>
  10. <Text>现在的时间是 {this.state.date.toLocaleTimeString()}.</Text>
  11. </View>
  12. )
  13. }
  14. }

注意我们如何传递 props 到基础构造函数的:

  1. constructor (props) {
  2. super(props)
  3. this.state = { date: new Date() }
  4. }

类组件应始终使用 props 调用基础构造函数。接下来,我们将使 Clock 设置自己的计时器并每秒更新一次。

将生命周期方法添加到类中

在具有许多组件的应用程序中,在销毁时释放组件所占用的资源非常重要。

每当 Clock 组件第一次加载到 DOM 中的时候,我们都想生成定时器,这在 Taro/React 中被称为挂载。

同样,每当 Clock 生成的这个 DOM 被移除的时候,我们也会想要清除定时器,这在 Taro/React 中被称为卸载。

我们可以在组件类上声明特殊的方法,当组件挂载或卸载时,来运行一些代码:

  1. class Clock extends Component {
  2. constructor (props) {
  3. super(props)
  4. this.state = { date: new Date() }
  5. }
  6. componentDidMount() {
  7. }
  8. componentWillUnmount() {
  9. }
  10. render () {
  11. return (
  12. <View>
  13. <Text>Hello, world!</Text>
  14. <Text>现在的时间是 {this.state.date.toLocaleTimeString()}.</Text>
  15. </View>
  16. )
  17. }
  18. }

这些方法被称作生命周期钩子。

当组件输出到 DOM 后会执行 componentDidMount() 钩子,这是一个建立定时器的好地方:

  1. componentDidMount() {
  2. this.timerID = setInterval(
  3. () => this.tick(),
  4. 1000
  5. )
  6. }

注意我们如何在 this 中保存定时器 ID。

虽然 this.props 由 Taro 本身设置以及 this.state 具有特殊的含义,但如果需要存储不用于视觉输出的东西,则可以手动向类中添加其他字段。

如果你不在 render() 中使用某些东西,它就不应该在状态中。

我们将在 componentWillUnmount() 生命周期钩子中卸载计时器:

  1. componentWillUnmount () {
  2. clearInterval(this.timerID)
  3. }

最后,我们实现了每秒钟执行的 tick() 方法。

它将使用 this.setState() 来更新组件局部状态:

  1. import Taro, { Component } from '@tarojs/taro'
  2. class Clock extends Component {
  3. constructor (props) {
  4. super(props)
  5. this.state = { date: new Date() }
  6. }
  7. componentDidMount () {
  8. this.timerID = setInterval(
  9. () => this.tick(),
  10. 1000
  11. );
  12. }
  13. componentWillUnmount () {
  14. clearInterval(this.timerID)
  15. }
  16. tick () {
  17. this.setState({
  18. date: new Date()
  19. });
  20. }
  21. render() {
  22. return (
  23. <View>
  24. <Text>Hello, world!</Text>
  25. <Text>现在的时间是 {this.state.date.toLocaleTimeString()}.</Text>
  26. </View>
  27. )
  28. }
  29. }

正确地使用 State

关于 setState() 这里有三件事情需要知道:

不要直接更新状态

例如,此代码不会重新渲染组件:

  1. // Wrong
  2. this.state.comment = 'Hello'

应当使用 setState():

  1. // Correct
  2. this.setState({ comment: 'Hello' })

setState() 函数是唯一能够更新 this.state 的地方。

状态更新一定是异步的

Taro 可以将多个 setState() 调用合并成一个调用来提高性能。

因为 this.stateprops 一定是异步更新的,所以你不能在 setState 马上拿到 state 的值,例如:

  1. // 假设我们之前设置了 this.state.counter = 0
  2. updateCounter () {
  3. this.setState({
  4. counter: 1
  5. })
  6. console.log(this.state.counter) // 这里 counter 还是 0
  7. }

正确的做法是这样,在 setState 的第二个参数传入一个 callback:

  1. // 假设我们之前设置了 this.state.counter = 0
  2. updateCounter () {
  3. this.setState({
  4. counter: 1
  5. }, () => {
  6. // 在这个函数内你可以拿到 setState 之后的值
  7. })
  8. }

这是 Taro 和 React 另一个不同的地方:React 的 setState 不一定总是异步的,他内部有一套事务机制控制,且 React 15/16 的实现也各不相同。而对于 Taro 而言,setState 之后,你提供的对象会被加入一个数组,然后在执行下一个 eventloop 的时候合并它们。

state 更新会被合并

当你调用 setState(),Taro 将合并你提供的对象到当前的状态中。

例如,你的状态可能包含几个独立的变量:

  1. constructor(props) {
  2. super(props)
  3. this.state = {
  4. posts: [],
  5. comments: []
  6. }
  7. }

然后通过调用独立的 setState() 调用分别更新它们:

  1. componentDidMount() {
  2. fetchPosts().then(response => {
  3. this.setState({
  4. posts: response.posts
  5. });
  6. });
  7. fetchComments().then(response => {
  8. this.setState({
  9. comments: response.comments
  10. })
  11. })
  12. }

合并是浅合并,所以 this.setState({comments}) 不会改变 this.state.posts 的值,但会完全替换 this.state.comments 的值。