React Components

问题一：什么是 React Components?

关于 React Components 的概念 www.w3schools.com/react/react… w3school 中给出了这样的定义:

Components are like functions that return HTML elements.

Components are independent and reusable bits of code. They serve the same purpose as JavaScript functions, but work in isolation and returns HTML via a render function.

Components come in two types, Class components and Function components

在 React 官网的中文文档中是这么描述的：组件，从概念上类似于 JavaScript 函数。它接受任意的入参（即 “props”），并返回用于描述页面展示内容的 React 元素。

通过实例来研究 components 的概念

两种主要方法：函数式组件和类组件

写在前面：函数式组件和类组件都是一样的，但是二者怎么转化呢？这是函数式组件向类组件转化的五个步骤：

创建一个继承自 React.Component 类的 ES6 class 同名类。
添加一个名为 render() 的空方法。
把原函数中的所有内容移至 render() 中。
在 render() 方法中使用 this.props 替代 props。
删除保留的空函数声明。

定义组件最简单的方式就是编写 JavaScript 函数：

    import React from 'react'
    import ReactDOM from 'react-dom'
    function HelloMessage() {
    return <h1>Hello World!</h1>;
    } 
    const element = <HelloMessage />; 
    ReactDOM.render(
        element,
        document.getElementById('app')
    );

我们使用函数 function 定义了一个名为 HelloMessage 的组件，同时使用 class 也是可以的：

import React from 'react'
import ReactDOM from 'react-dom'
class HelloMessage extends React.Component{
    render(){
        return <h1>Hello World</h1>
    }
} 
const element = <HelloMessage />; 
ReactDOM.render(
    element,
    document.getElementById('app')
);

其中：

const element = <HelloMessage /> //这是用户自定义的组件。

之前我们遇到的 React 元素都只是 DOM 标签，但是 React 元素其实也可以是用户自定义的组件，二者之间的差别在于：原生 HTML 元素名以小写字母开头，而自定义的 React 类名以大写字母开头，比如 HelloMessage 不能写成 helloMessage。

React 会将以小写字母开头的组件视为原生 DOM 标签。例如，<div /> 代表 HTML 的 div 标签，而 <Welcome /> 则代表一个组件，并且需在作用域内使用 Welcome。此外类似于 JSX 组件类只能包含一个顶层标签，否则也会报错。

在组件中必须返回一个合法的 JSX 虚拟 DOM 元素

组件复合的问题

我们可以通过创建多个组件来合成一个组件，即把组件的不同功能点进行分离：

import React from 'react'
import ReactDOM from 'react-dom'
function FirstName() {
    return <h1>董</h1>;
}
function LastName(props) {
    return <h1>树峰</h1>;
}

function Name() {
    return (
    <div>
        <FirstName></FirstName>
        <LastName></LastName> 
    </div>
    );
}
 
ReactDOM.render(
    <Name></Name>,
    document.getElementById('app')
);

React 中组件的渲染

render() 方法是 class 组件中唯一必须实现的方法,也就是 React 中组件渲染的方法

当 render() 被调用时，它会检查 this.props 和 this.state 的变化并返回以下类型之一：

React 元素。通常通过 JSX 创建。例如，<div /> 会被 React 渲染为 DOM 节点，<MyComponent /> 会被 React 渲染为自定义组件，无论是 <div /> 还是 <MyComponent /> 均为 React 元素。
数组或 fragments。使得 render 方法可以返回多个元素。
Portals。可以渲染子节点到不同的 DOM 子树中。欲了解更多详细信息，请参阅有关 portals 的文档
字符串或数值类型。它们在 DOM 中会被渲染为文本节点布尔类型或 null。什么都不渲染。（主要用于支持返回 test && <Child /> 的模式，其中 test 为布尔类型。)

React 组件不仅可以使我们有能力打包一堆视觉元素而且还可以使我们有能力打包一系列相对应的交互行为。可以说：React 组件是构成 React 应用的基石。

React 组件像一个工厂，接收一系列被称为属性的物料，最终生产（返回）React 元素/组件。

让我们换个角度说，React 组件本质上就是一个 JavaScript 函数，它接收一系列参数，返回 React 元素/组件。以组件化的角度思考构建 React 应用是一个非常棒的想法，因为组件化就意味着模块化与可重用性。

在 React 的官方文档中，大量的 React API 是关于组件的。组件是 React 非常重要的一个概念，从本质上说，组件是 React 给予我们的主要的封装单元。通过一个个组件，我们能像搭积木一样快速搭起一个拥有复杂交互逻辑和视觉界面的大型应用，并且应用中的每个视觉单元又拥有着非常清晰的责任。

React Components 的常见问题探讨和代码实例