React生命周期的使用与实例解读

import React from 'react';

class ExampleComponent extends React.Component {
  constructor(props) {
    super(props);
    // 1. 初始化state
    this.state = {
      count: props.initialCount,
      name: 'Initial Name'
    };

    // 2. 绑定实例方法
    this.handleButtonClick = this.handleButtonClick.bind(this);
  }

  // 3. 静态方法（可选）
  static getDerivedStateFromProps(nextProps, prevState) {
    if (nextProps.name !== prevState.name) {
      return { name: nextProps.name };
    }
    // 返回null或undefined表示不需要更新state
    return null;
  }

  handleButtonClick() {
    // 处理按钮点击逻辑
    this.setState((prevState) => ({ count: prevState.count + 1 }));
  }

  componentDidMount() {
    // 4. 挂载后执行的操作
    console.log('Component did mount!');
    const timerId = setInterval(() => {
      console.log('Timer tick');
    }, 1000);

    // 建议在componentWillUnmount中清理定时器
    this.setState({ timerId });
  }

  render() {
    // 5. 渲染组件UI
    const { count, name } = this.state;
    return (
      <div>
        <h1>{name}</h1>
        <p>Count: {count}</p>
        <button onClick={this.handleButtonClick}>Increment</button>
      </div>
    );
  }
}

// 使用组件
<ExampleComponent initialCount={0} name="My Component" />

import React from 'react';

class ExampleComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      count: props.initialCount,
      name: 'Initial Name',
      shouldRenderName: true
    };

    this.handleButtonClick = this.handleButtonClick.bind(this);
  }

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

  shouldComponentUpdate(nextProps, nextState) {
    // 仅在shouldRenderName为true且count或name发生变化时才更新
    return this.state.shouldRenderName && (nextProps.count !== this.props.count || nextState.name !== this.state.name);
  }

  getSnapshotBeforeUpdate(prevProps, prevState) {
    // 获取某个特定DOM节点的scrollTop值
    const node = document.getElementById('scrollableDiv');
    const scrollTop = node ? node.scrollTop : 0;
    return { scrollTop };
  }

  componentDidUpdate(prevProps, prevState, snapshot) {
    if (snapshot) {
      // 根据snapshot恢复滚动位置
      const node = document.getElementById('scrollableDiv');
      if (node) {
        node.scrollTop = snapshot.scrollTop;
      }
    }
  }

  handleButtonClick() {
    this.setState((prevState) => ({
      count: prevState.count + 1,
      shouldRenderName: false // 控制是否渲染name
    }));
  }

  render() {
    const { count, name } = this.state;

    return (
      <div id="scrollableDiv">
        {this.state.shouldRenderName && <h1>{name}</h1>}
        <p>Count: {count}</p>
        <button onClick={this.handleButtonClick}>Increment</button>
      </div>
    );
  }
}

// 使用组件
<ExampleComponent initialCount={0} name="My Component" />

import React from 'react';

class ExampleComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      count: props.initialCount,
      name: 'Initial Name'
    };

    this.timerId = null;
    this.scrollListener = null;
  }

  componentDidMount() {
    // 设置定时器
    this.timerId = setInterval(() => {
      console.log('Timer tick');
    }, 1000);

    // 添加滚动事件监听器
    this.scrollListener = () => {
      console.log('Scroll event triggered');
    };
    window.addEventListener('scroll', this.scrollListener);
  }

  componentWillUnmount() {
    // 卸载阶段执行的清理工作
    clearInterval(this.timerId); // 取消定时器
    window.removeEventListener('scroll', this.scrollListener); // 解绑事件监听器
  }

  render() {
    const { count, name } = this.state;

    return (
      <div>
        <h1>{name}</h1>
        <p>Count: {count}</p>
      </div>
    );
  }
}

// 使用组件
const App = () => {
  const [showComponent, setShowComponent] = React.useState(true);

  return (
    <div>
      {showComponent && <ExampleComponent initialCount={0} name="My Component" />}
      <button onClick={() => setShowComponent(false)}>Remove Component</button>
    </div>
  );
};

export default App;

import React, { Component } from 'react';

class ErrorBoundary extends Component {
  constructor(props) {
    super(props);
    this.state = { hasError: false, errorMessage: '' };
  }

  static getDerivedStateFromError(error) {
    // 更新 state 使下一次渲染能够显示降级后的 UI
    return { hasError: true, errorMessage: error.message };
  }

  componentDidCatch(error, errorInfo) {
    // 你可以将错误日志上报给服务器
    logErrorToMyService(error, errorInfo);
  }

  render() {
    if (this.state.hasError) {
      // 你可以自定义降级后的 UI 并显示错误信息
      return <h1>Something went wrong:</h1> <pre>{this.state.errorMessage}</pre>;
    }

    return this.props.children; // 通常情况下，渲染子组件
  }
}

function logErrorToMyService(error, errorInfo) {
  // 实现向服务器发送错误报告的逻辑
  console.error('An error occurred:', error, errorInfo);
}

function AppContent() {
  // 假设此处可能存在引发错误的代码
  // ...
  throw new Error('A simulated error in a child component.');
}

function App() {
  return (
    <div>
      <h1>Welcome to my app</h1>
      <ErrorBoundary>
        <AppContent />
      </ErrorBoundary>
    </div>
  );
}

export default App;