React - 2 组件

1 组件

！！！组件名必须大写，因为若是小写，在render构造dom时，会被当成dom元素解析直接报错

1 函数式组件

函数式组件也可以分出几种，主要原因是js定义函数的多样性导致的

1 声明式函数

 function App() {
   return <h1>hello world</h1>
 }

2 函数表达式

 const App = function () {
   return <h1>hello world</h1>
 }

3 箭头函数

const App = () => {
  return <h1>hello world</h1>
}

2 类组件

ES6的加入让JavaScript直接支持使用class来定义一个类，该方式就是利用的类的继承

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

(3 了解)

在react16版本之前还有一种创建方式，这里仅作了解

const App = React.createClass({
  render () {
    return (
      <div>hello world</div>
    )
  }
})

2 组件的组合和嵌套

function Header () { //声明式
  return (
    <header>React 核心库只关注于视图层</header>
  )
}

const Content = function () { //函数表达式
  return (
    <div>欢迎来到react的世界</div>
  )
}

const Footer = () => { //箭头函数
  return (
    <footer>react采用diff算法以及fiber算法</footer>
  )
}

class App extends React.Component { //类组件
  render () {
    return (
      <div>
        <Header></Header>
        <Content></Content>
        <Footer></Footer>
      </div>
    ) //多个组件时必须有一个结构包裹，多行jsx代码时需要用括号包裹,(js中的html结构就是jsx)
  }
}

ReactDOM.render(
  <App />,
  document.getElementById('root')
)