React问题：render外函数返回组件，componentWillReceiveProps调用不生效？

这种情况我之前也遇到过，核心问题大多和React的渲染机制以及生命周期钩子的特性有关，下面给你几个具体的排查和解决方向：

1. 确保调用函数后触发组件重新渲染 #

在componentWillReceiveProps里调用你的函数，但如果这个函数只是计算出了要返回的组件，却没有把结果绑定到组件的state或者props上，React是不会自动触发重新渲染的——毕竟React只有在state或props变化时才会重新执行render方法。

举个例子，你可以这样调整：

class App extends React.Component {
  state = {
    targetComponent: null
  };

  // 定义你的组件生成函数
  getTargetComponent(props) {
    // 根据传入的props条件返回对应组件
    if (props.condition) {
      return <ComponentA />;
    } else {
      return <ComponentB />;
    }
  }

  componentWillReceiveProps(nextProps) {
    // 调用函数并把结果存入state，触发重新渲染
    const newComponent = this.getTargetComponent(nextProps);
    this.setState({ targetComponent: newComponent });
  }

  render() {
    // 直接渲染state里的组件
    return this.state.targetComponent;
  }
}

2. 确认函数使用的是最新的props #

在componentWillReceiveProps中，当前的this.props还是旧的，只有nextProps是更新后的属性。如果你的生成函数依赖的是this.props而不是传入的最新props，就会导致逻辑判断错误，返回不符合预期的组件。

所以一定要把nextProps作为参数传给你的函数，而不是在函数内部直接用this.props，就像上面例子里那样。

3. 考虑替换已弃用的生命周期钩子 #

从React 16.3开始，componentWillReceiveProps已经被标记为弃用了，后续版本可能会移除。如果你的项目用的是较新的React版本，建议改用static getDerivedStateFromProps这个静态钩子来处理props变化后的逻辑：

class App extends React.Component {
  state = {
    targetComponent: null
  };

  static getDerivedStateFromProps(nextProps, prevState) {
    // 在这里根据nextProps计算要返回的组件，更新state
    const targetComponent = nextProps.condition ? <ComponentA /> : <ComponentB />;
    return { targetComponent };
  }

  render() {
    return this.state.targetComponent;
  }
}

这个钩子是静态的，不能访问this，所以所有逻辑都依赖传入的nextProps和prevState，能避免很多旧钩子带来的潜在问题。

4. 直接在render中调用函数（如果场景允许） #

你提到在render里调用函数是正常工作的，这是因为render方法每次都会在组件更新时执行，能拿到最新的props。如果你的函数逻辑不复杂，没有副作用，其实直接在render里调用是最简洁的方案：

class App extends React.Component {
  getTargetComponent() {
    return this.props.condition ? <ComponentA /> : <ComponentB />;
  }

  render() {
    return this.getTargetComponent();
  }
}

这种方式不需要手动管理state，React会自动帮你处理props变化后的重新渲染，减少出错的概率。

内容的提问来源于stack exchange，提问作者2018code2018