对React组件的简要介绍

对React组件的简要介绍

一个组件是一个孤立的界面。例如，在一个典型的博客主页中，你可能会发现侧边栏组件，以及博客文章列表组件。它们又是由组件本身组成的，所以你可以有一个Blog post组件的列表，每一个都是针对每一篇博文的，而且每一个都有自己的特殊属性。

React让它变得非常简单：所有东西都是一个组件。

即使是普通的HTML标签也是自己的组件，而且它们被默认添加。

接下来的两行是相等的，它们做同样的事情。一个有JSX，一个没有，通过将<h1>Hello World!</h1> 注入一个id为app 的元素。

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

ReactDOM.render(<h1>Hello World!</h1>, document.getElementById('app'))

ReactDOM.render(
  React.createElement('h1', null, 'Hello World!'),
  document.getElementById('app')
)

看，React.createElement 向我们暴露了一个API，用来创建h1 组件。改变该方法的第一个参数可以让你创建不同的标签。第二个参数是一个道具对象，在这种情况下，我们不需要任何道具，所以我们传递null 。

这就是我们如何使用React来处理内置的HTML组件，但你很快就会超越它们。React最擅长的是让我们通过组成自定义组件来构成一个UI。

自定义组件

在React中，有2种方法可以定义一个组件。

一个函数组件。

const BlogPostExcerpt = () => {
  return (
    <div>
      <h1>Title</h1>
      <p>Description</p>
    </div>
  )
}

类组件。

import React, { Component } from 'react'

class BlogPostExcerpt extends Component {
  render() {
    return (
      <div>
        <h1>Title</h1>
        <p>Description</p>
      </div>
    )
  }
}

直到最近，类组件是定义组件的唯一方式，它有自己的状态，可以访问生命周期方法，所以你可以在组件第一次渲染、更新或删除时做一些事情。

React Hooks改变了这一点，所以我们的功能组件现在比以前更强大了，我相信我们在未来会看到越来越少的类组件，尽管它仍然是创建组件的完美方式。

还有第三种语法，它使用ES5 语法，没有类。

import React from 'react'

React.createClass({
  render() {
    return (
      <div>
        <h1>Title</h1>
        <p>Description</p>
      </div>
    )
  }
})

在现代的> ES6 代码库中，你很少会看到这种情况。