React －－万物皆可组件

发布于 2020年12月21日

By 子舒

一、React 组件是什么？

组件，从概念上类似于 javascript 函数，他接受任意入参（props），并返回作用于描述页面展示内容的 React 元素。

组件允许你将 UI 拆分为独立可复用的代码片段，并对每个片段进行独立构思。

1.创建一个组件

// 函数组件
function Welcome(props) {
  return <h1>Hello, {props.name}</h1>;
}

// class 组件
class Welcome extends React.Component {
  render() {
    return <h1>Hello, {this.props.name}</h1>;
  }
}

2.渲染组件

class Welcome extends React.Component {
  render() {
    return <h1>Hello, {this.props.name}</h1>;
  }
}

ReactDOM.render(
  <Welcome />,
  document.getElementById('root')
);

3.组件

React 的基础原则有三条，分别是：

React 界面完全由数据驱动
React 中一切都是组件
props 是 React 组件之间通讯的基本方式

给组件输入一个参数，最终返回一个 React Element,React Element 就是在页面上展示的内容，相当于一个 DOM 节点

React 一大核心就是－－万物皆可组件

用户界面就是组件
组件可以嵌套包装组成复杂功能
组件可以用来实现副作用

一个复杂的界面可以分割很很多简单的组件，每个简单的组件又可以分割成很多小组件

有些类似于类和对象的概念

二、组件的划分

**无状态组件：**无状态组件 (Stateless Component) 是最基础的组件形式，由于没有状态的影响所以就是纯静态展示的作用。基本组成结构就是属性（props）加上一个渲染函数（render）。由于不涉及到状态的更新，所以这种组件的复用性也最强。例如在各 UI 库中开发的按钮、输入框、图标等等。
**有状态组件：**组件内部包含状态（state）且状态随着事件或者外部的消息而发生改变的时候，这就构成了有状态组件（Stateful Component）。有状态组件通常会带有生命周期 (lifecycle)，用以在不同的时刻触发状态的更新。在写业务逻辑时常用到，不同场景所用的状态和生命周期也会不同。
**容器组件：**为使组件的职责更加单一，耦合性进一步地降低，引入了容器组件 (Container Component) 的概念。重要负责对数据获取以及处理的逻辑。下文的设计模式也会提到。
高阶组件：“高阶组件（HoC）”也算是种组件设计模式。做为一个高阶组件，可以在原有组件的基础上，对其增加新的功能和行为。如打印日志，获取数据和校验数据等和展示无关的逻辑的时候，抽象出一个高阶组件，用以给基础的组件增加这些功能，减少公共的代码。
**Render Callback 组件：**组件模式是在组件中使用渲染回调的方式，将组件中的渲染逻辑委托给其子组件。也是种重用组件逻辑的方式，也叫 render props 模式。