Preact 生命周期方法

在 Preact 中，组件的生命周期方法是用于管理组件从创建到销毁整个过程中的不同阶段的方法。这些方法允许你在特定时刻执行自定义逻辑，例如数据获取、DOM 操作或清理工作。

初始化阶段

constructor(props)

构造函数是组件实例化时第一个被调用的方法。在这个方法中，你可以初始化状态和绑定事件处理器。

// www.javascriptcn.com code example
import { Component } from 'preact';

class MyComponent extends Component {
  constructor(props) {
    super(props);
    this.state = {
      count: 0,
    };
    this.handleClick = this.handleClick.bind(this);
  }

  handleClick() {
    this.setState({ count: this.state.count + 1 });
  }

  render() {
    return <button onClick={this.handleClick}>{this.state.count}</button>;
  }
}

static getDerivedStateFromProps(nextProps, prevState)

getDerivedStateFromProps 是一个静态方法，用于根据新的 props 更新组件的状态。它会在每次渲染之前被调用，包括初始渲染。

// www.javascriptcn.com code example
class MyComponent extends Component {
  state = {
    count: 0,
  };

  static getDerivedStateFromProps(nextProps, prevState) {
    if (nextProps.initialCount !== prevState.count) {
      return { count: nextProps.initialCount };
    }
    return null;
  }

  render() {
    return <div>{this.state.count}</div>;
  }
}

渲染阶段

render()

render 方法是唯一必须实现的方法，它描述了组件应该如何显示。这个方法会返回一个虚拟 DOM 节点，该节点最终会被转换成真实的 DOM。

// www.javascriptcn.com code example
class MyComponent extends Component {
  render() {
    return (
      <div>
        <p>当前计数：{this.state.count}</p>
        <button onClick={() => this.setState({ count: this.state.count + 1 })}>
          点我加一
        </button>
      </div>
    );
  }
}

打补丁阶段

componentDidMount()

componentDidMount 在组件插入到 DOM 后立即调用。这是执行网络请求、添加订阅或者操作 DOM 的最佳时机。

// www.javascriptcn.com code example
class MyComponent extends Component {
  componentDidMount() {
    console.log('Component has been mounted.');
    // 例如，发起一次 AJAX 请求
    fetch('https://api.example.com/data')
      .then(response => response.json())
      .then(data => console.log(data));
  }

  render() {
    return <div>加载中...</div>;
  }
}

更新阶段

shouldComponentUpdate(nextProps, nextState)

shouldComponentUpdate 允许你在渲染之前决定组件是否应该更新。如果返回 false，则不会触发后续的生命周期方法。

// www.javascriptcn.com code example
class MyComponent extends Component {
  shouldComponentUpdate(nextProps, nextState) {
    return nextProps.text !== this.props.text || nextState.color !== this.state.color;
  }

  render() {
    return <div style={{ color: this.state.color }}>{this.props.text}</div>;
  }
}

getSnapshotBeforeUpdate(prevProps, prevState)

getSnapshotBeforeUpdate 允许你在更新发生之前捕获一些信息，比如滚动位置。

// www.javascriptcn.com code example
class MyComponent extends Component {
  state = { text: '' };

  getSnapshotBeforeUpdate(prevProps, prevState) {
    const element = this.myRef.current;
    return element.scrollHeight - element.scrollTop;
  }

  componentDidUpdate(prevProps, prevState, snapshot) {
    const element = this.myRef.current;
    if (snapshot !== element.scrollHeight - element.scrollTop) {
      element.scrollTop = element.scrollHeight - snapshot;
    }
  }

  render() {
    return <div ref={el => (this.myRef = el)}>Hello, {this.state.text}</div>;
  }
}

componentDidUpdate(prevProps, prevState)

componentDidUpdate 在组件更新后立即调用。它接受前一个 props 和 state 作为参数，可以用来执行 DOM 操作或者网络请求。

// www.javascriptcn.com code example
class MyComponent extends Component {
  componentDidUpdate(prevProps) {
    if (prevProps.user !== this.props.user) {
      console.log('User updated:', this.props.user);
    }
  }

  render() {
    return <div>User: {this.props.user.name}</div>;
  }
}

销毁阶段

componentWillUnmount()

componentWillUnmount 在组件即将从 DOM 中移除时调用。这是取消网络请求、清理定时器或取消订阅的最佳时机。

// www.javascriptcn.com code example
class MyComponent extends Component {
  componentDidMount() {
    this.timer = setInterval(() => {
      console.log('Tick');
    }, 1000);
  }

  componentWillUnmount() {
    clearInterval(this.timer);
  }

  render() {
    return <div>组件将在 5 秒后卸载</div>;
  }
}

通过理解并正确使用这些生命周期方法，你可以更有效地管理和优化你的 Preact 组件。希望本章对你有所帮助！