React组件从RxJS Observable订阅渲染（跳过初始渲染）与Redux渲染优化

我之前也碰到过类似的困扰——从NgRx转到React+Redux后沿用RxJS包装store的模式，结果订阅状态流时频繁触发setState，导致组件反复渲染。下面几个方案可以帮你控制渲染次数，让组件只在必要时更新：

1. 用RxJS的distinctUntilChanged过滤重复状态 #

这是最直接的办法：在订阅状态流之前，通过distinctUntilChanged操作符过滤掉和上一次完全相同的状态值，只有当状态真正发生变化时，才会触发setState。

基础用法（浅比较）： #

// 假设你已经用RxJS包装了Redux store，得到store$
store$.pipe(
  // 先选择你需要的状态切片，避免监听整个store的变化
  map(state => state.foo),
  // 只在值和上一次不同时才发射
  distinctUntilChanged()
).subscribe(updatedFoo => {
  this.setState({ foo: updatedFoo });
});

处理复杂对象（深比较）： #

如果你的状态是嵌套对象，默认的浅比较会失效，这时候可以传入自定义的比较函数，比如用lodash的isEqual：

import { isEqual } from 'lodash';

store$.pipe(
  map(state => state.complexFoo),
  distinctUntilChanged(isEqual)
).subscribe(updatedComplexFoo => {
  this.setState({ complexFoo: updatedComplexFoo });
});

2. 让组件本身具备渲染优化能力 #

即使setState被调用，只要新状态和旧状态没有变化，我们可以让组件跳过渲染：

• 函数组件：用React.memo包裹组件，它会对props做浅比较，只有props变化时才重新渲染

  const MyComponent = React.memo(({ foo }) => {
    return <div>{foo}</div>;
  });
  

• 类组件：继承React.PureComponent，它会自动对props和state做浅比较，替代默认的Component

  class MyComponent extends React.PureComponent {
    render() {
      return <div>{this.state.foo}</div>;
    }
  }
  

如果需要更精细的控制，类组件也可以手动实现shouldComponentUpdate方法，自定义比较逻辑。

3. 结合React-Redux的优化机制 #

虽然你在用RxJS包装store，但React-Redux官方的useSelector已经做了很好的性能优化，你可以把两者结合，或者直接利用它的能力：

import { useSelector, shallowEqual } from 'react-redux';

const MyComponent = () => {
  // 用shallowEqual做浅比较，只有当foo真正变化时才更新
  const foo = useSelector(state => state.foo, shallowEqual);
  
  return <div>{foo}</div>;
};

如果是复杂对象，同样可以传入isEqual这类深比较函数。

4. 避免重复创建订阅 #

如果你的订阅逻辑写在组件的渲染函数里（比如函数组件的顶层），每次组件渲染都会重新创建订阅，导致多次触发setState。一定要把订阅放在只会执行一次的生命周期里：

• 函数组件：用useEffect，依赖数组设为空，确保只在组件挂载时订阅一次，卸载时取消订阅

  useEffect(() => {
    const subscription = store$.pipe(
      map(state => state.foo),
      distinctUntilChanged()
    ).subscribe(foo => {
      setFoo(foo);
    });
  
    // 组件卸载时取消订阅，避免内存泄漏
    return () => subscription.unsubscribe();
  }, []); // 空依赖数组=只执行一次
  

• 类组件：把订阅放在componentDidMount，取消订阅放在componentWillUnmount

  componentDidMount() {
    this.subscription = store$.pipe(
      map(state => state.foo),
      distinctUntilChanged()
    ).subscribe(foo => {
      this.setState({ foo });
    });
  }
  
  componentWillUnmount() {
    this.subscription.unsubscribe();
  }
  

一般来说，把distinctUntilChanged过滤 + 组件渲染优化 + 正确管理订阅生命周期这三个方案结合起来，就能完美解决组件多次渲染的问题啦。

内容的提问来源于stack exchange，提问作者Adrian Moisa