React各组件的区别

函数式组件

一般用于静态、没有交互事件内容的组件页面

• 函数式组件传参写法

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

• react视图渲染

ReactDOM.render(
  <Childcom weather="不下雨"/>,
  //document.getElementById('root')
  document.querySelector('#root')
) 

类组件

一般又称为动态组件，那么一般会有交互或者数据修改的操作

• 类组件定义

//类组件定义
class HelloWorld extends React.Component{
        render(){
            return(
              <div>
                  <h1>类组件定义helloworld</h1>
              </div>
            )
        }
}

• react视图渲染

ReactDOM.render(
  <HelloWorld abc="哈哈"/>,
  //document.getElementById('root')
  document.querySelector('#root')
)

复合组件

组件中又有其它的组件，复合组件中既可以有类组件又可以有函数组件

• 类组件嵌套函数式组件

//复合组件
class HelloWorld extends React.Component{
        render(){
          console.log(this)
            return(
              <div>
                  <h1>类组件定义helloworld</h1>
                  <h2>hello:{this.props.abc}</h2>
                  <Childcom/>
              </div>
            )
        }
}

• -react视图渲染

ReactDOM.render(
  <HelloWorld abc="哈哈"/>,
  //document.getElementById('root')
  document.querySelector('#root')
)

页面效果