《React+Redux前端开发实战》—2.1.3 无状态组件

2.1.3  无状态组件

　　下面来看看无状态组件，它是React 0.14之后推出的。如果一个组件不需要管理state，只是单纯地展示，那么就可以定义成无状态组件。这种方式声明的组件可读性好，能大大减少代码量。无状态函数式组件可以搭配箭头函数来写，更简洁，它没有React的生命周期和内部state。

　　无状态函数式组件示例：

　　const HelloComponent = (props) =>(

　　 <div>Hello {props.name}</div>

　　)

　　ReactDOM.render(<HelloComponentname="marlon"/>, mountNode)

　　无状态函数式组件在需要生命周期时，可以搭配高阶组件（HOC）来实现。无状态组件作为高阶组件的参数，高阶组件内存放需要的生命周期和状态，其他只负责展示的组件都使用无状态函数式的组件来写。

　　有生命周期的函数式组件示例：

　　import React from 'react';

　　export const Table = (ComposedComponent) => {

　　    return class extends React.Component {

　　      constructor(props) {

　　          super(props)

　　      } 

　　      componentDidMount() {

　　          console.log('componentDidMount');

　　      }

　　      render() {

　　        return (

　　            <ComposedComponent {...this.props}/>

　　        )

　　      }

　　    }     

　　}

注意：React 16.7.0-alpha（内测）中引入了Hooks，这使得在函数式组件内可以使用state和其他React特性。