javascript - React 16.3+ 从状态变化触发 onChange 的正确方法

Question

所以我有这个组件:

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

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

  previousItems = [];

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

  setState(stateSetter) {
    super.setState(previousState => {
      const newState = stateSetter(previousState);

      if (!isEqual(newState.items, this.previousItems)) {
        this.props.onChange && this.props.onChange(newState.items);
        this.previousItems = newState.items;
      }

      return newState;
    });
  }
}

我想做的是监听状态的变化，并在状态变化时触发 onChange。我曾经使用 componentWillUpdate 来做到这一点，但我听说这将在 React 17 中改变。

现在正确的做法是什么？我上面所做的感觉很老套。

谢谢!

Answer 1

Check the docs for componentDidUpdate()

这是副作用应该发生的地方，作为 ajax 调用，或者在这种情况下，调用 onChange，但您必须检查 Prop 是否真的改变了(就像您在代码中所做的那样)。

请注意，此方法不会在初始渲染中调用，只会在下一次更新时调用。非常适合 onChange 事件。

请注意，如果 onChange 方法设置状态，它可以启动一个无限循环(触发 onChange -> 设置状态 -> 触发 onChange -> ....)。如有必要，检查状态/属性发生了什么变化，并仅在必要时触发 onChange 事件(避免无限循环)。