📊 React 实践技巧和性能优化

shouldComponentUpdate(nextProps, nextStates) {
  if (nextStates.count === this.state.count) return false;
  if (nextStates.count2 !== this.state.count2) return false;
  return true
}

if (this._compositeType === CompositeTypes.PureClass) {
  shouldUpdate = !shallowEqual(prevProps, nextProps) || ! shallowEqual(inst.state, nextState);
}

function shallowEqual(objA: mixed, objB: mixed): boolean {
  // 最简单的浅层比较
  if (Object.is(objA, objB)) return true;
  // 一些边界条件和简单类型数据判定
  if (
    typeof objA !== 'object' ||
    objA === null ||
    typeof objB !== 'object' ||
    objB === null
  ) {
    return false;
  }
  // 下面深入比较
  const keysA = Object.keys(objA);
  const keysB = Object.keys(objB);
  // 如果属性长度不同
  if (keysA.length !== keysB.length) return false;
  // 接下来遍历属性比较，计算可能较多，所以放到最后。属性差异，或者两者同一个属性不相等
  for (let i = 0; i < keysA.length; i++) {
    if (
      !Object.prototype.hasOwnProperty.call(objB, keysA[i]) ||
      !Object.is(objA[keysA[i]], objB[keysA[i]])
    ) {
      return false;
    }
  }
  return true;
}

class TableDemo extends React.Component {
  getColumns = () => {
    return [
      { key: 'name', title: '姓名' },
      { key: 'age', title: '年龄' },
      { key: 'more', title: `${this.state.action}操作` },
    ];
  };
  render() {
    return <Table dataSource={this.props.data} columns={this.getColumns()} onSelect={(key) => this.onSelect(key)} />;
  }
}

class ExampleComponent extends React.Component {
  state = {
    externalData: null,
  };
  static getDerivedStateFromProps(props, state) {
    // Store prevId in state so we can compare when props change.
    // Clear out previously-loaded data (so we don't render stale stuff).
    if (props.id !== state.prevId) {
      return {
        externalData: null,
        prevId: props.id,
      };
    }
    // No state update necessary
    return null;
  }
  componentDidMount() {
    this._loadAsyncData(this.props.id);
  }
  componentDidUpdate(prevProps, prevState) {
    if (this.state.externalData === null) {
      this._loadAsyncData(this.props.id);
    }
  }
  componentWillUnmount() {
    if (this._asyncRequest) {
      this._asyncRequest.cancel();
    }
  }
  render() {
    if (this.state.externalData === null) {
      // Render loading state ...
    } else {
      // Render real UI ...
    }
  }
  _loadAsyncData(id) {
    this._asyncRequest = loadMyAsyncData(id).then(
      externalData => {
        this._asyncRequest = null;
        this.setState({externalData});
      }
    );
  }
}

import memoize from "memoize-one";
class Example extends Component {
  // state 只需要保存当前的 filter 值：
  state = { filterText: "" };
  // 在 list 或者 filter 变化时，重新运行 filter：
  filter = memoize(
    (list, filterText) => list.filter(item => item.text.includes(filterText))
  );
  handleChange = event => {
    this.setState({ filterText: event.target.value });
  };
  render() {
    // 计算最新的过滤后的 list。
    // 如果和上次 render 参数一样，`memoize-one` 会重复使用上一次的值。
    const filteredList = this.filter(this.props.list, this.state.filterText);
    return (
      <Fragment>
        <input onChange={this.handleChange} value={this.state.filterText} />
        <ul>{filteredList.map(item => <li key={item.id}>{item.text}</li>)}</ul>
      </Fragment>
    );
  }
}

const MyComponent = React.memo(function MyComponent(props) {
  /* 使用 props 渲染 */
});

function MyComponent(props) {
  /* 使用 props 渲染 */
}
function areEqual(prevProps, nextProps) {
  /*
  如果把 nextProps 传入 render 方法的返回结果与
  将 prevProps 传入 render 方法的返回结果一致则返回 true，
  否则返回 false
  */
}
export default React.memo(MyComponent, areEqual);