React 16.3+ 从状态变更触发onChange的正确方式

嘿，这个问题问得很实际！先直接给你结论：你当前重写setState的方式并不推荐，属于React的反模式，可能会埋下一些潜在问题。咱们来拆解下为什么，以及正确的做法是什么。

为什么重写setState不可取？ #

• React的内置方法（比如setState）的实现细节可能在版本迭代中变化，直接重写会让你的组件依赖于React的内部逻辑，很容易在版本升级时出现兼容问题。
• 你维护的previousItems变量容易和实际状态不同步——比如如果组件通过props初始化items，或者有其他未经过重写setState的方式修改状态，这个变量就会失效，导致对比逻辑出错。
• 这种写法会让其他阅读代码的开发者困惑，不符合React的常规开发习惯，增加了维护成本。

推荐的实现方式 #

1. 类组件：使用componentDidUpdate生命周期 #

React 16.3+依然保留了componentDidUpdate钩子，这是专门用来处理组件更新完成后逻辑的地方，非常适合在状态变化后触发onChange。

import React from 'react';
import PropTypes from 'prop-types';
import { isEqual } from 'lodash';

class SomeComponent extends React.Component {
  static propTypes = {
    onChange: PropTypes.func,
  };

  constructor(props) {
    super(props);
    this.state = {
      items: ['some', 'list'],
    };
  }

  componentDidUpdate(prevProps, prevState) {
    // 深层对比前后状态的items，避免浅对比漏判内部变化
    if (!isEqual(this.state.items, prevState.items)) {
      // 使用可选链操作符，避免onChange未传入时报错
      this.props.onChange?.(this.state.items);
    }
  }

  // 示例：修改items的方法（正常调用setState即可）
  addItem = (newItem) => {
    this.setState(prevState => ({
      items: [...prevState.items, newItem]
    }));
  }

  render() {
    return (
      <div>
        {this.state.items.map(item => <div key={item}>{item}</div>)}
        <button onClick={() => this.addItem('new item')}>Add Item</button>
      </div>
    );
  }
}

2. 函数组件（推荐）：使用useEffect钩子 #

如果你的项目已经转向函数组件（React 16.8+支持Hooks），用useEffect监听items的变化是更简洁的方案：

import React, { useState, useEffect } from 'react';
import PropTypes from 'prop-types';
import { isEqual } from 'lodash';

const SomeComponent = ({ onChange }) => {
  const [items, setItems] = useState(['some', 'list']);

  // 当items或onChange变化时，执行回调触发onChange
  useEffect(() => {
    onChange?.(items);
  }, [items, onChange]);

  const addItem = (newItem) => {
    setItems(prevItems => [...prevItems, newItem]);
  };

  return (
    <div>
      {items.map(item => <div key={item}>{item}</div>)}
      <button onClick={() => addItem('new item')}>Add Item</button>
    </div>
  );
};

SomeComponent.propTypes = {
  onChange: PropTypes.func,
};

export default SomeComponent;

关键注意点 #

• 一定要用深层对比（比如lodash.isEqual）：因为React默认的状态对比是浅对比（===），如果items是数组或对象，浅对比无法检测到内部元素的变化，会导致onChange不触发。
• 使用可选链操作符（?.）：避免父组件未传入onChange时出现Cannot read property 'call' of undefined的报错。

内容的提问来源于stack exchange，提问作者Rico Kahler