React组件updating使用方法及操作代码-CFANZ编程社区

React组件的更新阶段（Updating）是指当组件的props或state发生变化时，React重新渲染组件的过程。这个阶段包含多个生命周期方法，用于在不同更新时机执行特定操作。

更新阶段生命周期方法及调用顺序

在React类组件中，更新阶段的生命周期方法按以下顺序调用：

static getDerivedStateFromProps(props, state)

调用时机：在创建或更新阶段调用，或在props、state和render方法前调用
用途：基于props更新state，在render之前返回新的state
注意：这是一个静态方法，不能访问组件实例

shouldComponentUpdate(nextProps, nextState)

调用时机：在props或state变化后，render之前调用
用途：判断组件是否需要重新渲染，返回布尔值
重要：如果返回false，后续更新流程将被跳过

render()

调用时机：在组件更新时调用
用途：返回要渲染的React元素，不应在此方法中修改state

getSnapshotBeforeUpdate(prevProps, prevState)

调用时机：在DOM更新之前被调用
用途：返回一个值（通常是一个DOM元素），这个值可以在componentDidUpdate中使用
重要：必须与componentDidUpdate配合使用

componentDidUpdate(prevProps, prevState, snapshot)

调用时机：在DOM更新之后立即调用
用途：执行依赖于DOM更新的操作，如网络请求、DOM操作等
注意：snapshot参数是getSnapshotBeforeUpdate返回的值

实现代码

import React, { Component } from 'react';

class UpdatingComponent extends Component {
  constructor(props) {
    super(props);
    this.state = {
      count: 0,
      inputText: '',
      data: null
    };
  }

  // 1. getDerivedStateFromProps - 根据props更新state
  static getDerivedStateFromProps(props, state) {
    // 例如：当props改变时，重置某些state
    if (props.reset) {
      return { count: 0 };
    }
    return null;
  }

  // 2. shouldComponentUpdate - 决定是否需要更新
  shouldComponentUpdate(nextProps, nextState) {
    // 优化性能：如果count没有变化，就不需要重新渲染
    if (this.state.count === nextState.count) {
      return false;
    }
    return true;
  }

  // 3. render - 渲染组件
  render() {
    return (
      <div>
        <h2>Updating Component</h2>
        <p>Count: {this.state.count}</p>
        <button onClick={() => this.setState(prevState => ({ count: prevState.count + 1 }))}>
          Increment
        </button>
        
        <input 
          type="text" 
          value={this.state.inputText}
          onChange={e => this.setState({ inputText: e.target.value })}
          placeholder="Type something..."
        />
        
        <p>Input: {this.state.inputText}</p>
      </div>
    );
  }

  // 4. getSnapshotBeforeUpdate - 在DOM更新前获取快照
  getSnapshotBeforeUpdate(prevProps, prevState) {
    // 例如：保存滚动位置
    if (prevState.inputText !== this.state.inputText) {
      return { scrollPosition: this.inputRef.scrollTop };
    }
    return null;
  }

  // 5. componentDidUpdate - DOM更新后执行
  componentDidUpdate(prevProps, prevState, snapshot) {
    // 例如：当输入变化时，根据快照恢复滚动位置
    if (snapshot && snapshot.scrollPosition) {
      this.inputRef.scrollTop = snapshot.scrollPosition;
    }
    
    // 例如：当count变化时，执行网络请求
    if (prevState.count !== this.state.count) {
      console.log('Count changed, fetching data:', this.state.count);
      // 模拟网络请求
      setTimeout(() => {
        this.setState({ data: `Data for count ${this.state.count}` });
      }, 500);
    }
  }

  // 用于保存输入框引用
  inputRef = React.createRef();

  render() {
    return (
      <div>
        <div ref={this.inputRef}>
          <input 
            type="text" 
            value={this.state.inputText}
            onChange={e => this.setState({ inputText: e.target.value })}
            placeholder="Type something..."
          />
        </div>
        <p>Input: {this.state.inputText}</p>
        {this.state.data && <p>Data: {this.state.data}</p>}
      </div>
    );
  }
}

export default UpdatingComponent;

重要注意事项

React 16.3+的生命周期变更：

componentWillReceiveProps 和 componentWillUpdate 已被废弃
请使用 getDerivedStateFromProps 和 getSnapshotBeforeUpdate 替代

性能优化：

shouldComponentUpdate 是性能优化的关键点
通过合理实现该方法，可以避免不必要的渲染

函数组件替代方案：对于函数组件，可以使用useEffect和useMemo来实现类似功能：

import React, { useState, useEffect } from 'react';

function UpdatingComponent() {
  const [count, setCount] = useState(0);
  const [inputText, setInputText] = useState('');
  const [data, setData] = useState(null);
  
  // 模拟shouldComponentUpdate
  useEffect(() => {
    if (count > 0) {
      // 模拟网络请求
      const timer = setTimeout(() => {
        setData(`Data for count ${count}`);
      }, 500);
      
      return () => clearTimeout(timer);
    }
  }, [count]); // 仅在count变化时执行

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => setCount(prev => prev + 1)}>
        Increment
      </button>
      
      <input 
        type="text" 
        value={inputText}
        onChange={e => setInputText(e.target.value)}
        placeholder="Type something..."
      />
      <p>Input: {inputText}</p>
      {data && <p>Data: {data}</p>}
    </div>
  );
}