React的函数式组件和类组件

先说一下函数式组件，他一般用于静态没有交互事件内容的组件页面
举个函数式组件的例子

function Childcom(props){
  console.log(props.weather)
  let title = <h2>我是副标题</h2>
   let weather = props.weather
  let isGo = weather =="不下雨"?"不出门":"出门"
  return(
      <div>
        <h1>函数式组件gogoing</h1>
        {title}
        <div>
          是否出门?
     <span>{isGo}</span>
        </div>
      </div>
  )
}

   ReactDOM.render(
   <Childcom weather="下雨"></Childcom>,
  document.querySelector('#root')
)
这里的props就类似于vue的父传子通过props

再来举个类组件的例子，一般称为动态组件，一般会有交互或者数据修改的操作，实际开发还是用这个比较多我感觉

class HelloWorld extends React.Component{
  // 类组件要渲染，就用render方法
  render(){
    console.log(this)
    return (
      <div>
        <h1>类组件定义HELLOWORLD</h1>
  
      </div>
    )
  }
}
ReactDOM.render(
<HelloWorld></HelloWorld>,
document.querySelector('#root')
)

能不能组件套组件呢，就类似父组件里面套子组件，当然可以

class HelloWorld extends React.Component{
  // 类组件要渲染，就用render方法
  render(){
    console.log(this)
    return (
      <div>
        <h1>类组件定义HELLOWORLD</h1>
        <Childcom weather={this.props.weather}></Childcom>
      </div>
    )
  }
}
	ReactDOM.render(

  <HelloWorld weather="下雨"></HelloWorld>,
  document.querySelector('#root')
)
我们把上面那个函数式组件HelloWorld写在类组件HelloWorld里面，然后通过在下面使用HelloWorld组件，给它传了一个weather，这样HelloWorld里面的Childcom再通过传给他本身的props，这样麻烦了一点，总结来说还是vue香啊😄