React中向路由组件传递组件引用，避免路由切换时重复渲染

我来帮你搞定这个头疼的问题～你遇到的计数器归零情况，本质是路由切换时，目标组件的实例被重新创建或者直接卸载后再挂载，导致之前的状态全丢了。下面我给你拆解原因和对应的解决办法：

为啥会出现这个问题？ #

主要有两种情况：

• 组件被卸载再挂载：比如从/other切回/，原来的Dummy组件会被React销毁，重新渲染页面时又新建一个实例，状态自然从零开始。
• 每次渲染都生成新组件实例：如果你在Route的render函数里直接写() => <Dummy />，或者父组件每次渲染时都重新生成Dummy元素（比如把它作为props传给路由组件时没做缓存），React会觉得这是个全新的组件，就会把旧实例删掉、挂新的，状态肯定留不住。

具体怎么解决？ #

1. 让组件一直挂载（只隐藏不卸载） #

如果你的路由结构允许，可以把需要保留状态的组件放在Switch外面，用路由路径控制它的显示/隐藏，这样组件不会被卸载，状态就一直存在：

class App extends React.Component {
  constructor(props) {
    super(props);
    this.dummyRef = React.createRef();
  }

  render() {
    const isHome = this.props.location.pathname === '/';
    return (
      <Router>
        <div>
          <nav>
            <Link to="/">Home</Link>
            <Link to="/other">Other</Link>
          </nav>
          {/* 始终挂载，只控制显示隐藏 */}
          <Dummy ref={this.dummyRef} style={{ display: isHome ? 'block' : 'none' }} />
          <Switch>
            <Route path="/other" component={OtherComponent} />
            <Route path="/" render={() => null} />
          </Switch>
        </div>
      </Router>
    );
  }
}

2. 复用同一个组件实例 #

如果必须通过Route渲染组件，那就要确保每次渲染用的是同一个实例。可以把组件实例提前创建好存在父组件里，不要在render里重复创建：

class App extends React.Component {
  constructor(props) {
    super(props);
    this.dummyRef = React.createRef();
    // 只创建一次实例，存在构造函数里
    this.dummyInstance = <Dummy ref={this.dummyRef} />;
  }

  render() {
    return (
      <Router>
        <div>
          <nav>
            <Link to="/">Home</Link>
            <Link to="/other">Other</Link>
          </nav>
          <Switch>
            {/* 直接复用已经创建好的实例 */}
            <Route path="/" render={() => this.dummyInstance} />
            <Route path="/other" component={OtherComponent} />
          </Switch>
        </div>
      </Router>
    );
  }
}

3. 把状态提到父组件管理 #

这是React里很常用的思路——把组件的状态提升到更高层级的父组件中，通过props传递给子组件。这样就算子组件重新挂载，也能从父组件拿到之前的状态：

class App extends React.Component {
  constructor(props) {
    super(props);
    // 把计数器状态放在父组件
    this.state = { count: 0 };
    this.incrementCount = () => this.setState(prev => ({ count: prev.count + 1 }));
  }

  render() {
    return (
      <Router>
        <div>
          <nav>
            <Link to="/">Home</Link>
            <Link to="/other">Other</Link>
          </nav>
          <Switch>
            <Route path="/" render={() => (
              <Dummy count={this.state.count} increment={this.incrementCount} />
            )} />
            <Route path="/other" component={OtherComponent} />
          </Switch>
        </div>
      </Router>
    );
  }
}

// Dummy改成受控组件，不用自己存状态
class Dummy extends React.Component {
  render() {
    return (
      <div>
        <p>Count: {this.props.count}</p>
        <button onClick={this.props.increment}>Increment</button>
      </div>
    );
  }
}

4. 用React.memo优化函数组件（可选） #

如果你的Dummy是函数组件，可以用React.memo包裹它，避免props没变化时的不必要重新渲染，不过这只适用于props稳定的场景：

const Dummy = React.memo(({ count, increment }) => {
  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={increment}>Increment</button>
    </div>
  );
});

总结 #

一般来说，状态提升或者保持组件挂载这两种方案最实用，具体选哪个看你的路由结构和组件职责。如果需要组件卸载后还能保留状态，也可以考虑用localStorage把状态存起来，不过这会有持久化的副作用，得根据需求权衡～

内容的提问来源于stack exchange，提问作者Muhammad Yasir