在 JSX 中渲染组件与通过函数渲染

Question

When using React, what is the difference (and when should each method be applied) when rendering a component?

Does this impact the component lifecycle in any way? Or impact how hooks are run in the component?

Method 1:

class App extends React.Component {
  ...
  function getComponent() {
    return <Component />
  }
  render() {
   return this.getComponent()
  }
}

Method 2:

class App extends React.Component {
  ...
  render() {
   return <Component />
  }
}

Answer 1

( Note: The OP has now changed the question, it used to have return {this.getComponent()} in Method 1.)

render in Method 1 is incorrect (well, it was before the edit) , it should be:

render() {
  return this.getComponent() // No {} wrapper
}

You need the {} within a JSX context, but you're not in a JSX context there. For instance, if you wanted to wrap what this.getComponent returned in a div , you'd use the JSX expression to define the div 's children within the JSX defining the div :

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

With the {} sorted out, whether you use Method 1 or Method 2 is up to you. If you have substantial parts of the render that you want to move into their own functions, that's fine. For instance:

render() {
    return (
        <div>
            {this.getHeader()}
            {this.getBody()}
            {this.getFooter()}
        </div>
    );
}

...although I think I'd probably argue at that point that without a good counter-argument, the header, body, and footer should probably be components (perhaps function components). But the occasional helper function call like that is fine.

Does this impact the component lifecycle in anyway?

No. It's just a function call within render .

Answer 2

There is no real difference between both. I'd personally use only one render() method as much as possible, then when the method gets too big, extract parts of it into their own method.

Answer 3

I have found this great article by Kent C. Dodds. An extract of the article is:

React doesn't know the difference between us calling a function in our JSX and inlining it. So it cannot associate anything to the Counter function, because it's not being rendered like a component.

This is why you need to use JSX (or React.createElement) when rendering components rather than simply calling the function. That way, any hooks that are used can be registered with the instance of the component that React creates.

With this in mind, it sounds like it's better to use JSX when rendering a component that uses hooks.