React 组件

可以这么说，一个 React 应用就是构建在 React 组件之上的。

组件有两个核心概念：

  • props
  • state

一个组件就是通过这两个属性的值在 render 方法里面生成这个组件对应的 HTML 结构。

注意：组件生成的 HTML 结构只能有一个单一的根节点。

props

前面也提到很多次了，props 就是组件的属性，由外部通过 JSX
属性传入设置，一旦初始设置完成，就可以认为 this.props 是不可更改的，所以不要轻易更改设置 this.props 里面的值（虽然对于一个 JS 对象你可以做任何事）。

state

state 是组件的当前状态，可以把组件简单看成一个“状态机”，根据状态 state
呈现不同的 UI 展示。

一旦状态（数据）更改，组件就会自动调用 render 重新渲染 UI，这个更改的动作会通过
this.setState 方法来触发。

划分状态数据

一条原则：让组件尽可能地少状态。

这样组件逻辑就越容易维护。

什么样的数据属性可以当作状态？

当更改这个状态（数据）需要更新组件 UI 的就可以认为是 state，下面这些可以认为不是状态：

  • 可计算的数据：比如一个数组的长度
  • 和 props 重复的数据：除非这个数据是要做变更的

最后回过头来反复看几遍 Thinking in
React，相信会对组件有更深刻的认识。

无状态组件

你也可以用纯粹的函数来定义无状态的组件(stateless function)，这种组件没有状态，没有生命周期，只是简单的接受 props 渲染生成 DOM 结构。无状态组件非常简单，开销很低，如果可能的话尽量使用无状态组件。比如使用箭头函数定义：

  1. const HelloMessage = (props) => <div> Hello {props.name}</div>;
  2. render(<HelloMessage name="John" />, mountNode);

因为无状态组件只是函数，所以它没有实例返回，这点在想用 refs
获取无状态组件的时候要注意，参见DOM 操作。