一、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的基础原则有三条,分别是:

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

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

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

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

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

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

二、组件的划分

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

三、设计原则

React 的组件其实是软件设计中的模块,其设计原则也需遵从通用的组件设计原则,简单说来,就是要减少组件之间的耦合性(Coupling),让组件简单,这样才能让整体系统易于理解、易于维护。

即,设计原则:

  • 接口小,props 数量少;
  • 划分组件,充分利用组合(composition);
  • 把 state 往上层组件提取,让下层组件只需要实现为纯函数。

就像搭积木,复杂的应用和组件都是由简单的界面和组件组成的。划分组件也没有绝对的方法,选择在当下场景合适的方式划分,充分利用组合即可。实际编写代码也是逐步精进的过程,努力做到:

  • 功能正常;
  • 代码整洁;
  • 高性能。