状态提升、组件组合、React理念

状态提升

• 主要是几个组件需要共用状态数据的情况，才将这部分的共享提升到他们最近的父组件中进行管理
• 一般是通过父组件的 state 及 props 传递函数来完成
• 一般熟知 props 如何使用，并且能熟悉分析组件则会使用
• 这一节不赘述

组件组合

• 组件传递参数时，props.children 相当于组件下包裹的子元素（这一点相当于vue.slot）
• 鉴于 props 无所不能的传递性，props 可用来传递 jsx 对象，故
• 可用其指定不同的位置来放置不同的子元素（这一点与 vue.slot[name=xx] 一致）
• 详情查看代码

class FancyBorder extends Component {
  constructor (props) {
    super(props)
  }

  render () {
    const style = {
      height: '100px',
      border: '2px dotted red',
      boxShadow: 'rgb(255, 191, 191) 0px 0px 8px 10px',
      position: 'relative'
    }
    const bodyStyle = {
      textAlign: 'center',
      position: 'absolute',
      left: '130px',
    }
    const headStyle = {
      textAlign: 'center'
    }
    const leftStyle = {
      position: 'absolute',
      left: 0,
      width: '130px'
    }
    const p = this.props
    return (
      <div className={'react-comp'} style={style}>
        <div style={headStyle}>{p.head}</div>
        <div style={leftStyle}>{p.left}</div>
        <div style={bodyStyle}>
          {this.props.children}
        </div>
      </div>
    )
  }
}

<FancyBorder
  head={<div>HEAD TITLE</div>}
  left={<div>LEFT MENU</div>}
>
<div>BODY MAIN Content</div>
</FancyBorder>

React 理念

• React 最初是为了创建大型、快速响应的网络应用
• 使用React创建应用，第一个需要学会的是划分组件层级
• 在大型项目中，采用自底向上的开发模式有利于编写测试