Ract基础之恰当的获取数据一

1、创建一个简单的组件，点击增加按钮计数器加1，点击减法按钮，计数器减一，如下

import React from 'react'

export default class Counter extends React.Component{
    constructor(props) {
        super(props);
        this.state = {
            counter: 0
        }
    }
    handleDecrement = () => {
        this.setState({
            counter: this.state.counter - 1
        })
    }
    handleIncrement = () => {
        this.setState({
            counter: this.state.counter + 1
        })
    }
    render() {
        return (
            <div>
                <h1>{this.state.counter}</h1>
                <button onClick={this.handleDecrement}>-</button>
                <button onClick={this.handleIncrement}>+</button>
            </div>
        )
    }
}

2、上面的简单组件功能没有什么问题，只是有多项职责
（1）将计数器的值保存在状态中
（2）负责显示数据
（3）包含增加和减少计数器的逻辑
将组件拆分得更小始终是一个好主意，每个小型组件带有特定逻辑，这样能提升应用的可维护性，并且可以灵活的应对需求的变更。
如果应用的另一部分也需要同样的增减按钮，以上组件就不能复用，我们可以将增减按钮，单独作为一个组件

import React from 'react';

export const Buttons = ({onDecrement, onIncrement}) => (
    <div>
        <button onClick={onDecrement}>-</button>
        <button onClick={onIncrement}>+</button>
    </div>
)


import React from 'react'
import {Buttons} from './Button'

export default class Counter extends React.Component{
    constructor(props) {
        super(props);
        this.state = {
            counter: 0
        }
    }
    handleDecrement = () => {
        this.setState({
            counter: this.state.counter - 1
        })
    }
    handleIncrement = () => {
        this.setState({
            counter: this.state.counter + 1
        })
    }
    render() {
        return (
            <div>
                <h1>{this.state.counter}</h1>
                <Buttons onDecrement={this.handleDecrement} onIncrement={this.handleIncrement}/>
            </div>
        )
    }
}

现在按钮组件变得纯粹了，被点击时，它们只能通知自身的拥有者，Counter组件代码看起来好多了，并且Buttons组件也可以复用。要让它变得完全整洁，最后一步是抽离显示逻辑

import React from 'react'

export const Display = ({counter}) => <h1>{counter}</h1>

因为不需要保存任何状态，所以这里再次使用了无状态函数式组件。其实没必要拆分这个组件，因为只有一个h1元素。然而，你可能会在应用内添加css类，显示逻辑以根据值改变计数器的颜色等等。总的来说，我们的目的是让组件与数据源无关，这样就能在应用各部分的不同数据源下复用组件。最终Counter组件如下

import React from 'react'
import {Buttons} from './Button'
import {Display} from "./Display";

export default class Counter extends React.Component{
    constructor(props) {
        super(props);
        this.state = {
            counter: 0
        }
    }
    handleDecrement = () => {
        this.setState({
            counter: this.state.counter - 1
        })
    }
    handleIncrement = () => {
        this.setState({
            counter: this.state.counter + 1
        })
    }
    render() {
        return (
            <div>
                <Display counter={this.state.counter}/>
                <Buttons onDecrement={this.handleDecrement} onIncrement={this.handleIncrement}/>
            </div>
        )
    }
}