React组件基本应用

4.1 组件简介

• 组件是React的一等公民，使用React就是在用组件

• 组件表示页面中的部分功能

• 组合多个组件实现完整的页面功能

• 特点：可复用、独立、可组合

组件是React的一等公民，使用React就是在用组件，组件表示页面中的部分功能（包含自己的逻辑与样式），可以组合多个组件实现完整的页面功能。例如上面的图：

整个页面可以划分为多个组件，

橙色：的是整个示例应用的整体 ,

蓝色：的是接受所有的用户输入

绿色：展示数据内容并根据用户输入筛选结果

天蓝色 ：为每一个产品类别展示标题

红色：每一行展示一个产品

问题是，如何确定页面中哪些内容划分到一个组件中呢？

但你如何确定应该将哪些部分划分到一个组件中呢？你可以将组件当作一种函数或者是对象来考虑（函数的功能是单一的），根据[单一功能原则]来判定组件的范围。也就是说，一个组件原则上只能负责一个功能。如果它需要负责更多的功能，这时候就应该考虑将它拆分成更小的组件。

当然，在上图中，我们发现’Name‘和'Price' 表头 并没有单独的划分到一个组件中，主要考虑的是功能简单，就是展示的作用，所以没有划分到单独一个组件中。如果，该表头具有了一些比较复杂的功能，例如排序。那么这里可以单独的将表头内容划分到一个组件中。

组件有什么特点呢？

可复用、维护、可组合

可复用：每个组件都是具有独立功能的，它可以被使用在多个场景中。

可组合：一个组件可以和其它的组件一起使用或者可以直接嵌套在另一个组件内部。

可维护：每个组件仅仅包含自身的逻辑，更容易被理解和维护。

下面，看一下怎样创建组件？

4.2 组件创建

关于组件的创建有两种方式，第一种方式是使用’函数来创建组件‘，第二种方式使用’类创建组件‘。

下面先看一下通过函数创建组件。

4.2.1 函数创建组件

所谓函数创建组件，其实就是使用JS中的函数或者是箭头函数创建的组件，所以也称之为函数组件。

具体的创建方式如下：

function Message(){
    return (<div><h1>Hello World!</h1></div>)
}
//在渲染组件的时候，直接使用函数名作为组件的标签名称。这里使用的是单标签，也可以使用双标签。
ReactDom.render(<Message/>,document.getElementById('root'))

当然，关于函数组件有如下几个约定：

• 约定1：函数名称必须以大写字母开头

• 约定2：函数组件必须有返回值，表示该组件的结构

• 如果返回值为null，表示不渲染任何内容

在这里如果使用函数创建的组件，不满足上面的约定会出现错误

下面演示一下使用箭头函数来创建对应的组件。

let Message =()=><div><h1>Hello World!</h1></div>
ReactDom.render(<Message/>,document.getElementById('root'))

现在，已经完成了通过函数来创建组件，那么在通过函数创建组件的时候，是否可以进行传值呢？

是可以的，如下所示.

let Message =(props)=><div><h1>Hello {props.name}</h1></div>
ReactDom.render(<Message name="张三"/>,document.getElementById('root'))

在传递值的时候，就是在渲染组件的时候，给其添加对应的属性，那么这个属性会传递给props,而props就是一个对象。这里可以传递多个值。

let Message =(props)=><div><h1>Hello {props.name},年龄是:{props.age}</h1></div>
ReactDom.render(<Message name="张三" age='18'/>,document.getElementById('root'))

当然这里，也可以使用解构赋值的形式：

let Message =({name,age}) =><div><h1>Hello {name},年龄是:{age}</h1></div>

4.2.2 使用类创建组件

所谓的使用类创

class Message extends React.Component{
    render() {
        return(
            <div><h1>Hello</h1></div>
        )
    }
}
ReactDom.render(<Message />,document.getElementById('root'))

建组件，其实就是用ES6中的class关键字来创建组件。

• 约定1：类名称也必须要大写字母开头

• 约定2：类组件应该继承React.Component父类，从而可以使用父类中提供的方法或者属性

• 约定3：类组件必须提供 render 方法

• 约定4：render方法中必须要有return返回值

在上面的代码中，类组件要继承React.Component，当然每次这么写会非常麻烦，所以在导入react的时候，可以将Component解构出来，如下代码所示：

import React,{Component}from 'react'

解构出来以后，类组件的创建方式如下：

class Message extends Component{
    render() {
        return(
            <div><h1>Hello</h1></div>
        )
    }
}
ReactDom.render(<Message />,document.getElementById('root'))

学IT，上博学谷