App(props) 与 <APP {...props} /> 区别

App(props)有时你会在一些封装库里面看到这种写法，但是App(props) 与 <APP {...props} />区别是什么呢？

const Counter: React.FC<{ initNum: number }> = ({ initNum }) => {
  const [count, setCount] = useState(initNum);
  return (
      <div className='123'>
        <div>info-{count}</div>
        <div onClick={() => setCount(count + 1)}>add</div>
      </div>
  )
}


const Boxer:React.FC<{children: React.ReactElement}> = ({ children }) => { 
  console.log(children, 'children======');
  return (
    <div className="App-box" >
      {children}
    </div>
  )
}

App(props)

function App() {
    console.log('render======')
    return (
      <div className="App">
        <header className="App-header">
          <Boxer>{Counter({ initNum: 8 }) as React.ReactElement}</Boxer>
        </header>
      </div>
    )
}

这种情况我们可以看出，组件props并非外部传进来的props, 而且组件每次渲染都会引起父级组建的渲染

<APP {...props} />

function App() {
    console.log('render======')
    return (
      <div className="App">
        <header className="App-header">
          <Boxer><Counter initNum={8}/></Boxer>
        </header>
      </div>
    )
}

这种情况我们可以看出，组件props就是外部传进来的props, 而且组件每次渲染并不会引起父级组建的渲染