反应组件

React Components简介

组件是一个隔离的接口。例如,在典型的博客主页中,您可能会找到侧边栏组件和“博客帖子列表”组件。它们又由组件本身组成,因此您可以拥有一个Blog post组件列表,每个组件用于每个Blog帖子,每个组件都有其独特的属性。

A react component

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中定义组件的方法。

功能组件:

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代码库。

免费下载我的反应手册


更多反应教程: