react学习第二天（三）

react组件：函数式组件、类组件

1、函数式组件

//函数式组件
function Father(){  //组件名字要大写
  return (
    <div>
      <h1>函数式组件</h1>
    </div>
  )
}

ReactDOM.render(
  <Father/>,
  document.querySelector('#root')
)

//函数式组件
function Father(){  //组件名字要大写
  let title = <h2>我是副标题</h2>
  let weather = "下雨";
  let isGo = weather==="下雨"? "不出门":"出门";
  return (
    <div>
      <h1>函数式组件</h1>
      <p>{title}</p>
      <p>是否出门？</p>
      <span>{isGo}</span>
    </div>
  )
}

ReactDOM.render(
  <Father/>,
  document.querySelector('#root')
)

效果如下：

2、类组件

//类组件
class HelloWorld extends React.Component{
  render(){  //render用来渲染视图
    return(
      <div>
        <h1>类组件</h1>
      </div>
    )
  }
}
ReactDOM.render(
  <HelloWorld/>,
  document.querySelector('#root')
)

效果如下：

3、组件传参

function Father(props){  //props是用来传参数的，是一个对象
  let title = <h2>我是副标题</h2>
  console.log(props);//结果是一个对象，键为weather,值为"下雨""
  let weather = props.weather;  //weather为下雨
  let isGo = weather==="下雨"? "不出门":"出门";
  return (
    <div>
      <h1>函数式组件</h1>
      <div>{title}</div>
      <p>是否出门？</p>
      <span>{isGo}</span>
    </div>
  )
}

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

conso le.log(props)控制台 输出：

4、组件中可以嵌套组件，称 为复合组件，复合组件中既可以有类组件又可以有函数式组件

class HelloWorld extends React.Component{
  render(){  //render用来渲染视图
    return(
      <div>
        <h1>类组件</h1>
        <Father/>  //组件中嵌套组件
      </div>
    )
  }
}

5、函数式组件与类组件区别：

• 函数式比较简单， 一般用 于静态没有 交互唉事件内容的组件页面
• 类组件又称为动态组件，一般会有交互或者数据修改