无状态功能性组件-Stateless Functional Co

import React, { Component } from 'react';
class NavBar extends Component {
    render() { 
        return (
        <nav className="navbar navbar-light bg-light">
            <a className="navbar-brand" href="#">
                Navbar{" "}
                <span className="badge badge-pill badge-secondary">
                    {this.props.totalCounters}
                </span>
            </a>
        </nav>);
    }
}
export default NavBar;

我们看到 NavBar 中，它是一个只有返回方法的组件，这里面没有事件句柄，没有中间方法去计算什么，只有一个单一的返回方法，同时也没有 state，它只从 props 获取数据。
在这种情况下，我们可以将这个组件转换为，常说的无状态功能性组件，我们不再使用类去定义这个组件。

import React, { Component } from 'react';
//Stateless Functional Component
const NavBar = (props) => {
    return (
        <nav className="navbar navbar-light bg-light">
            <a className="navbar-brand" href="#">
                Navbar{" "}
                <span className="badge badge-pill badge-secondary">
                    {props.totalCounters}
                </span>
            </a>
        </nav>);
};
export default NavBar;

因为不使用带有渲染方法的继承于 Component 的类，而是简单定义一个函数使它但会一个 react 元素，这就是无状态功能性组件。
同样我们也有创建无状态功能性组件的快捷方式。就像我们用 cc 来创建组件类，我们用 sfc 来创建无状态功能性组件。
在这里我们可以将 this.props 中的 this 去掉，把 props 作为函数的参数，因为 react 会在运行时将 props 作为实参传入函数中。
我们还可以使用析构实参的方式简化代码：

import React, { Component } from 'react';
//Stateless Functional Component
const NavBar = ({ totalCounters }) => {
    return (
        <nav className="navbar navbar-light bg-light">
            <a className="navbar-brand" href="#">
                Navbar{" "}
                <span className="badge badge-pill badge-secondary">
                    {totalCounters}
                </span>
            </a>
        </nav>);
};
export default NavBar;

这样我们就省略掉了 ‘this.’
在 counters 组件中使用析构：

import React, { Component } from 'react';
import Counter from './counter';
class Counters extends Component { 
    render() {
        const { onReset, counters, onDelete, onIncrement } = this.props;
        return (<div>
            <button
                onClick={onReset}
                className="btn btn-primary btn-sm m-2">Reset</button>
            { counters.map(counter => 
                <Counter 
                    key={counter.id} 
                    onDelete={onDelete} 
                    onIncrement={onIncrement}
                    counter={counter}/>
                )}
        </div>);
    }
}
export default Counters;