摘要：劃分標準根據稿，不同的展示模塊分為不同的組件。比如頂部底部導航列表等容器組件業務組件與數據源后臺本地存儲進行數據傳輸操作不止是劃分標準根據業務功能劃分。最常見的是列表組件。

提高可讀性、可維護性

代碼量大，所有內容集中在一起

相同組件無法復用

業務開發分工不明確，開發人員要關心非業務的代碼

改代碼時，可能會影響其他業務，牽一發動全身(耦合)

任何一個操作都導致整個應用重新render

架構清晰

相同組件能夠復用

業務分工明確，開發人員僅專注與自己的業務

每個組件負責獨立的功能，與其他組件解耦合

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

把相關聯的東西放一起（按功能、業務）

橫向（按業務、功能模塊劃分）

縱向（應用、系統層級劃分）

維護局部數據: state、ref、后臺返回等

獲取、修改全局數據

事件處理、數據監聽處理(useEffect/componentDidUpdate等)

IO: 網絡請求/本地讀寫

數據處理

render

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

劃分標準: 根據UI稿，不同的展示模塊分為不同的組件。比如頂部、底部、導航、列表等

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

劃分標準: 根據業務功能劃分。比如登錄、登出、支付、表單校驗等

連接業務組件和展示組件, 主要用于處理數據后傳給展示組件。

展示組件內可以有容器組件，容器組件內也可以有展示組件

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

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

渲染登錄表單

記錄用戶輸入和登錄狀態，向后臺發送登錄請求

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()}>登錄
      
    )
  }
}

容器組件負責實現登錄功能，展示組件負責渲染內容。

如果要實現另一套登陸組件時，可直接復用容器組件，只需要實現新的展示組件即可。

// 業務組件 可復用性比較高
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上相互獨立的部分，劃分成不同組件，防止渲染時相互影響。最常見的是列表組件。

點擊一個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事件回調函數直接使用this.handleClick，而不是每次都創建新函數。

點擊li，最多只會有2個子組件渲染。

// onClick時需要的參數，要傳進來
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 (
            
          )
        })
      }
      
    )
  }
}