有状态组件与无状态组件

有状态组件

有状态组件，即一个组件中存在state,该组件需要与用户进行交互

无状态组件

无状态组件，即一个组件中不包含state。即该组件只用于显示，不用与用户交互(react中，state只有在存在用户交互行为下才使用)

当一个组件是无状态组件时，我们只要根据输入进行输出，这时，我们使用函数式语法更好。实际应用中，我们应该多多将组件拆为无状态组件。

function TestComponent(props){
    return (
        <div>{props.title}</div>>
    )
}

其他

在react，将ui看成一个个组件。即存在以下公式

UI = Component(props,state)

因此，在react，遵循单一职能的原则，ui将会被拆分成一个一个的组件。而在拆分的过程中，如果一个组件是无状态组件，由于无状态组件只关注UI，而不用关心组件状态，所以更加容易复用。我们优先采用函数式的方法创建组件。