状态上移优于公共方法

一般组件不应提供公共方法，这样会破坏数据流只有一个方向的原则。

再因为我们倾向于更细颗粒的组件化，状态应集中在远离渲染的地方处理（比如应用级别的状态就在 redux 的 store 里），也能使兄弟组件更方便地共享。

  1. //bad
  2. class DropDownMenu extends Component {
  3.   constructor (props) {
  4.     super(props)
  5.     this.state = {
  6.       showMenu: false
  7.     }
  8.   }
  10.   show () {
  11.     this.setState({display: true})
  12.   }
  14.   hide () {
  15.     this.setState({display: false})
  16.   }
  18.   render () {
  19.     return this.state.display && (
  20.       <div className="dropdown-menu">
  21.         {/* ... */}
  22.       </div>
  23.     )
  24.   }
  25. }
  27. class MyComponent extends Component {
  28.   // ...
  29.   showMenu () {
  30.     this.refs.menu.show()
  31.   }
  32.   hideMenu () {
  33.     this.refs.menu.hide()
  34.   }
  35.   render () {
  36.     return <DropDownMenu ref="menu" />
  37.   }
  38. }
  40. //good
  41. class DropDownMenu extends Component {
  42.   static propsType = {
  43.     display: PropTypes.boolean.isRequired
  44.   }
  46.   render () {
  47.     return this.props.display && (
  48.       <div className="dropdown-menu">
  49.         {/* ... */}
  50.       </div>
  51.     )
  52.   }
  53. }
  55. class MyComponent extends Component {
  56.   constructor (props) {
  57.     super(props)
  58.     this.state = {
  59.       showMenu: false
  60.     }
  61.   }
  63.   // ...
  65.   showMenu () {
  66.     this.setState({showMenu: true})
  67.   }
  69.   hideMenu () {
  70.     this.setState({showMenu: false})
  71.   }
  73.   render () {
  74.     return <DropDownMenu display={this.state.showMenu} />
  75.   }
  76. }

更多阅读: lifting-state-up