React组件拆分之道

jiezi

5 年前

提高可读性、可维护性

代码量大，所有内容集中在一起
相同组件无法复用
业务开发分工不明确，开发人员要关心非业务的代码
改代码时，可能会影响其他业务，牵一发动全身(耦合)
任何一个操作都导致整个应用重新 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 (
      <div>
        <input
          placeholder="账号"
          value={this.state.account}
          onChange={(...args) => this.handleAccountChange(...args)}
        />
        <input
          placeholder="密码"
          value={this.state.password}
          onChange={(...args) => this.handlePasswordChange(...args)}
        />
        <button onClick={() => this.handleLoginClick()}> 登录 </button>
      </div>
    )
  }
}

容器组件负责实现登录功能，展示组件负责渲染内容。

如果要实现另一套登陆组件时，可直接复用容器组件，只需要实现新的展示组件即可。

// 业务组件 可复用性比较高
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 (
          <Comp
            {...this.props}
            {...propsFromState}
            {...propsFromDispatch}
          />
        )
      }
    }
    return LoginContainer
  }
}

// 展示组件
class Login extends Component {render() {const { account, password, onAccountChange, onPasswordChange, onSubmit}
    return (
      <div>
        <input
          placeholder="账号"
          value={account}
          onChange={(...args) => onAccountChange(...args)}
        />
        <input
          placeholder="密码"
          value={password}
          onChange={(...args) => onPasswordChange(...args)}
        />
        <button onClick={() => onSubmit()}> 登录 </button>
      </div>
    )
  }
}

// 连接组件
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 (
      <ul>
      {items.map((item, index) => {const {text, id} = item
          const selected = this.state.selected === id
          return (
            <li
              key={id}
              className={selected ? 'selected' : ''}
              onClick={() => this.handleClick(id)}
            >
              <span>{text}</span>
            </li>
          )
        })
      }
      </ul>
    )
  }
}

子组件使用 PureComponent 或memo，并且 click 事件回调函数直接使用this.handleClick，而不是每次都创建新函数。

点击 li，最多只会有 2 个子组件渲染。

// onClick 时需要的参数，要传进来
class Item extends PureComponent {render() {const { id, text, selected, onClick} = this.props
    return (
      <li
        className={selected ? 'selected' : ''}
        onClick={onClick(id)}
      >
        <span>{text}</span>
      </li>
    )
  }
}

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

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

  render() {const { items} = this.props
    return (
      <ul>
      {items.map((item, index) => {const {text, id} = item
          return (
            <Item
              key={id}
              id={id} // 传进去
              selected={this.state.selected === id}
              text={text}
              onClick={this.handleClick}
            />
          )
        })
      }
      </ul>
    )
  }
}

React组件拆分之道

为什么要拆分组件

如果不拆分

目标

如何拆分组件

一个 React 组件的功能

组件分类

展示组件

容器组件

业务组件

连接组件

组件树结构

案例

逻辑、展示分离

不拆分

拆分后

渲染优化

拆分前

拆分后