React-如何在render之外的函数中渲染组件以及如何在render之外执行相同的函数？

Question

我在render之外有一个功能。 该函数返回（有条件地）一个组件，该函数不是在渲染内部而是在componentWillReceiveProps内部（由于其他事实而必需）触发的。 我的问题是该函数最终不会返回该组件，我也不知道为什么。 当我在render中调用该函数时，它可以工作，但是我不能做到这一点，因为必须在componentWillReceiveProps中调用它。 有任何想法吗？ 谢谢！！

class App extends React.Component {
  componentWillReceiveProps(nextProps) {
    if (nextProps.user != this.props.user) {
      this.getData(nextProps.user)
    }
  }

  getData() {
    if (...) {
      return <Child />
    }
  }

  render() {
    return (
      <div>{this.getData}</div>
    );
  }
}

const Child = () => {
  return <h1>Hello</h1>
}

Answer 1

在构造函数中创建一个名为data的状态，如下所示：

constructor(props){
    super(props);
    this.state={data:""};
}

现在， {this.getdata}里面render()与{this.state.data}

还可以如下替换componentWillReceiveProps：

componentWillReceiveProps(nextProps) {
    if (nextProps.user != this.props.user) {
        var newdata = this.getData(nextProps.user)
        this.setState({data:newdata});
    }
}

Answer 2

您只能在render中返回JSX数据，而不能在要渲染的其他生命周期函数中返回。 而且render方法是纯净的，因此对于相同的输入，它返回相同的输出，因此react可以通过维护虚拟dom来正确地针对相同的性能进行优化，因此您只需编写

class App extends React.Component {
      getData() {
        if (...) {
            return <Child />
        }
      }
      render() {
          return (
              <div>
                {this.getData()}
              </div>
          )
      }
}

const Child = () => {
    return <h1>Hello</h1>
}

如果您使用React.PureComponent进一步优化，那么它也将具有相同的效果，以便在更改道具时调用render。 React.PureComponent通过浅层shouldComponentUpdate和状态比较实现了shouldComponentUpdate 。

class App extends React.PureComponent {
      componentWillReceiveProps(nextProps) {
         if (nextProps.user != this.props.user) {
         this.getData(nextProps.user)
         }
      }
      getData() {
        if (...) {
            return <Child />
        }
      }
      render() {
          return (
              <div>
                {this.getData()}
              </div>
          )
      }
}

但是，要执行您想要的操作，您实际上将日期存储在组件状态下，然后根据状态在render方法中渲染数据

class App extends React.Component {
      constructor(props) {
         super(props);
         this.state {
             data: this.getData(props)
         }
      }
      componentWillReceiveProps(nextProps) {
         if (nextProps.user != this.props.user) {
            this.getData(nextProps.user)
         }
      }
      getData(props) {
        if (...) {
            const newData;
            // update newData based on receivedProps here
            // store the data in state
            this.setState({data: newData});
        }
        return [];
      }
      render() {
          return (
              <div>
                {this.state.data.map((obj) => return <Child data={obj}/>)}
              </div>
          )
      }
}

Answer 3

因为除了render以外，您不能从其他挂钩中返回children ，所以您需要将它们保持在一个状态：

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      someChildren: null
    };
  }

  componentWillReceiveProps(nextProps) {
    if (nextProps.user != this.props.user) {
      this.setState({ someChildren: this.getData(nextProps.user) });
    }
  }
  getData() {
    if (...) {
      return <Child />;
    }
    return null
  }
  render() {
    return <div>{this.state.someChildren}</div>;
  }
}

Answer 4

当您的组件将收到新的道具时，它将自动重新渲染，就像执行以下操作一样，使您的组件重新渲染并进行更新：

class App extends React.Component {
  getData: () => {
    if (...) {
      return <Child />
    }
    return null;
  };

  render() {
    return (
      <div>{this.getData()}</div>
    );
  }
}

Answer 5

componentWillReceiveProps是React生命周期方法，一旦您的React Component收到父对象的支持，就会调用该方法。 例如，可以在其中执行的操作将更新您正在做什么的状态，而不是调用getDate方法，该方法将返回React组件。

可能的实现方式可能是：

class App extends React.Component {

  getData() {
    const { user } = this.props;
    return user ? <Child /> : <div />
  }
  render() {
      return (
          <div>
            {this.getData()}
          </div>
      )
  }
}

const Child = () => {
  return <h1>Hello</h1>
}