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>
)
}
}