3. 组件基础

组件基础

如果代码多了，不可能一直在render方法里面写，多以就要把里面的代码提出来，像下面这样：

import React from 'react'
import ReactDOM from 'react-dom'
const app = <h1>欢迎进入React的世界</h1>
ReactDOM.render(
  app,
  document.getElementById('root')
)

react组件分为两种：函数式组件和类组件

函数式组件

由于元素没有办法传递参数，所以我们就需要把之前定义的变量改为一个方法，让这个方法return一个元素，像下面这样：

import React from 'react'
import ReactDOM from 'react-dom'

// 特别注意这里的写法，如果要在JSX里写js表达式(只能是表达式，不能流程控制)，就需要加 {}，包括注释也是一样，并且可以多层嵌套
const app = (props) => <h1>欢迎进入{props.name}的世界</h1>

ReactDOM.render(
  app({
    name: 'react'
  }),
  document.getElementById('root')
)

这里我们定义的方法实际上就是react定义组件的第一种方式：定义函数式组件，这也是无状态组件。但是这种写法不符合react的jsx（下一篇解释jsx）的风格，更好的方式是使用一下的方式进行改造

import React from 'react'
import ReactDOM from 'react-dom'

const App = (props) => <h1>欢迎进入{props.name}的世界</h1>

ReactDOM.render(
  // React组件的调用方式
  <App name="react" />,
  document.getElementById('root')
)

这样一个完整的函数式组件就定义好了，但是一定要注意：组件名必须大写，否则会报错！！！

class组件（类组件）

ES6的加入让JavaScript直接支持使用class来定义一个类，react的第二种创建组件的方式就是使用类的继承，ES6 class是目前官方推荐的使用方式，它使用了ES6标准语法来构建，如下：

import React from 'react'
import ReactDOM from 'react-dom'

class App extends React.Component {
  render () {
    return (
      // 注意这里得用this.props.name, 必须用this.props
      <h1>欢迎进入{this.props.name}的世界</h1>
      )
  }
}
ReactDOM.render(
  <App name="react" />,
  document.getElementById('root')
)

运行结果和之前完全一样，因为JS里面没有真正的class，这个class只是一个语法糖，但二者的底层运行机制不一样

• 函数式组件是直接调用，在前面的代码中已经可以看到
• ES6 class组件其实就是一个构造器，每次使用组件都相当于在实例化组件，像下面这样：

import React from 'react'
import ReactDOM from 'react-dom'

class App extends React.Component {
  render () {
    return (
          <h1>欢迎进入{this.props.name}的世界</h1>
      )
  }
}

const app = new App({
  name: 'react'
}).render()

ReactDOM.render(
  app,
  document.getElementById('root')
)

组件的组合、嵌套

将一个组件渲染到某个节点里面的时候，会将这个节点里面的原有内容覆盖掉。组件嵌套的方式就是将子组件写到父组件的模板中去。

由于每个React组件只能有一个根节点，所以要渲染多个组件的时候，需要在最外层包一个容器，如果使用div, 会生成多余的一层dom，如果不想生成多余的一层dom可以使用React提供的Fragment组件在最外层进行包裹。

import React, { Component, Fragment } from 'react'
import ReactDOM from 'react-dom'

class Title extends Component {
  render () {
    return (
      <h1>欢迎进入React的世界</h1>
      )
  }
}
class Content extends Component {
  render () {
    return (
      <p>React.js是一个构建UI的库</p>
      )
  }
}
class App extends Component {
  render () {
    return (
      <Fragment>
          <Title />
        <Content />
      </Fragment>
      )
  }
}
ReactDOM.render(
  <App/>,
  document.getElementById('root')
)