摘要：劃分標(biāo)準(zhǔn)根據(jù)稿，不同的展示模塊分為不同的組件。比如頂部底部導(dǎo)航列表等容器組件業(yè)務(wù)組件與數(shù)據(jù)源后臺本地存儲進(jìn)行數(shù)據(jù)傳輸操作不止是劃分標(biāo)準(zhǔn)根據(jù)業(yè)務(wù)功能劃分。最常見的是列表組件。

提高可讀性、可維護(hù)性

代碼量大，所有內(nèi)容集中在一起

相同組件無法復(fù)用

業(yè)務(wù)開發(fā)分工不明確，開發(fā)人員要關(guān)心非業(yè)務(wù)的代碼

改代碼時(shí)，可能會影響其他業(yè)務(wù)，牽一發(fā)動(dòng)全身(耦合)

任何一個(gè)操作都導(dǎo)致整個(gè)應(yīng)用重新render

架構(gòu)清晰

相同組件能夠復(fù)用

業(yè)務(wù)分工明確，開發(fā)人員僅專注與自己的業(yè)務(wù)

每個(gè)組件負(fù)責(zé)獨(dú)立的功能，與其他組件解耦合

可使用SCU、memo減少不必要渲染

把相關(guān)聯(lián)的東西放一起（按功能、業(yè)務(wù)）

橫向（按業(yè)務(wù)、功能模塊劃分）

縱向（應(yīng)用、系統(tǒng)層級劃分）

維護(hù)局部數(shù)據(jù): state、ref、后臺返回等

獲取、修改全局?jǐn)?shù)據(jù)

事件處理、數(shù)據(jù)監(jiān)聽處理(useEffect/componentDidUpdate等)

IO: 網(wǎng)絡(luò)請求/本地讀寫

數(shù)據(jù)處理

render

只有render方法、簡單的交互事件處理和state管理。比如Input/CheckBox等。

劃分標(biāo)準(zhǔn): 根據(jù)UI稿，不同的展示模塊分為不同的組件。比如頂部、底部、導(dǎo)航、列表等

與數(shù)據(jù)源（redux/后臺/本地存儲）進(jìn)行數(shù)據(jù)傳輸操作(不止是IO)

劃分標(biāo)準(zhǔn): 根據(jù)業(yè)務(wù)功能劃分。比如登錄、登出、支付、表單校驗(yàn)等

連接業(yè)務(wù)組件和展示組件, 主要用于處理數(shù)據(jù)后傳給展示組件。

展示組件內(nèi)可以有容器組件，容器組件內(nèi)也可以有展示組件

把渲染和功能拆分成不同組件，提高復(fù)用性

登錄組件處理了2件事情:

渲染登錄表單

記錄用戶輸入和登錄狀態(tài)，向后臺發(fā)送登錄請求

class Login extends Component {
  constructor(props) {
    super(props)

    this.state = {
      account: "",
      password: "",
      status: "init",
    }
  }

  handleAccountChange(e) {
    this.setState({account: e.target.value})
  }

  handlePasswordChange(e) {
    this.setState({password: e.target.value})
  }

  handleLoginClick() {
    this.setState({ status: "ing" })
    request("/login", {
      params: {
        account: this.state.account,
        password: this.state.password,
      }
    }).then(() => {
      this.setState({status: "succ"})
    }).catch(() => {
      this.setState({status: "fail"})
    })
  }

  render() {
    return (
      

         this.handleAccountChange(...args)}
        />
         this.handlePasswordChange(...args)}
        />
         this.handleLoginClick()}>登錄
      
    )
  }
}

容器組件負(fù)責(zé)實(shí)現(xiàn)登錄功能，展示組件負(fù)責(zé)渲染內(nèi)容。

如果要實(shí)現(xiàn)另一套登陸組件時(shí)，可直接復(fù)用容器組件，只需要實(shí)現(xiàn)新的展示組件即可。

// 業(yè)務(wù)組件 可復(fù)用性比較高
function withLogin(config) {
  const { mapStateToProps, mapDispatchToProps } = config
  return (Comp) => {
    class Container extends Component {
      constructor(props) {
        super(props)

        this.state = {
          account: "",
          password: "",
          status: "init",
        }
      }

      handleAccountChange = (e) => {
        this.setState({account: e.target.value})
      }

      handlePasswordChange = (e) => {
        this.setState({password: e.target.value})
      }

      handleLoginClick = () => {
        this.setState({ status: "ing" })
        request("/login", {
          params: {
            account: this.state.account,
            password: this.state.password,
          }
        }).then(() => {
          this.setState({status: "succ"})
        }).catch(() => {
          this.setState({status: "fail"})
        })
      }

      render() {
        const propsFromState = mapStateToProps(this.state, this.props)
        const propsFromDispatch = mapDispatchToProps({
          onAccountChange: this.handleAccountChange,
          onPasswordChange: this.handlePasswordChange,
          onSubmit: this.handleLoginClick,
        }, this.props)
        return (
          
        )
      }
    }
    return LoginContainer
  }
}

// 展示組件
class Login extends Component {
  render() {
    const { account, password, onAccountChange, onPasswordChange, onSubmit }
    return (
      

         onAccountChange(...args)}
        />
         onPasswordChange(...args)}
        />
         onSubmit()}>登錄
      
    )
  }
}

// 連接組件
const LoginContainer = withLogin({
  mapStateToProps: (state, props) => {
    return {
      account: state.account,
      password: state.password,
    }
  },
  mapDispatchToProps: (dispatch, props) => {
    return {
      onAccountChange: dispatch.onAccountChange,
      onPasswordChange: dispatch.onPasswordChange,
      onSubmit: dispatch.Submit,
    }
  }
})

把UI上相互獨(dú)立的部分，劃分成不同組件，防止渲染時(shí)相互影響。最常見的是列表組件。

點(diǎn)擊一個(gè)li, 其他li全都重新渲染

class List extends Component {
  state = {
    selected: null
  }

  handleClick(id) {
    this.setState({selected: id})
  }

  render() {
    const { items } = this.props
    return (
      

      {
        items.map((item, index) => {
          const {text, id} = item
          const selected = this.state.selected === id
          return (
            
 this.handleClick(id)}
            >
              {text}
            
          )
        })
      }
      
    )
  }
}

子組件使用PureComponent或memo，并且click事件回調(diào)函數(shù)直接使用this.handleClick，而不是每次都創(chuàng)建新函數(shù)。

點(diǎn)擊li，最多只會有2個(gè)子組件渲染。

// onClick時(shí)需要的參數(shù)，要傳進(jìn)來
class Item extends PureComponent {
  render() {
    const { id, text, selected, onClick } = this.props
    return (
      

        {text}
      
    )
  }
}

class List extends Component {
  state = {
    selected: null
  }

  handleClick(id) {
    this.setState({selected: id})
  }

  render() {
    const { items } = this.props
    return (
      

      {
        items.map((item, index) => {
          const {text, id} = item
          return (
            
          )
        })
      }
      
    )
  }
}