React 组件设计与思考

React

前言

React 组件灵活性极强，理清组件边界，可以更好地运用，最终达到熟能生巧的境界。

原生组件

笔者生造词：独立声明，关联皆内部可见的组件。粗略分为 smart component, dump component两种。

插槽组件

笔者生造词：渲染过程包含外部组件插槽的组件。最简单的插槽模式，暨prop.children方式使用，示例来自官方文档：

function FancyBorder(props) {
  return (
    <div className={'FancyBorder FancyBorder-' + props.color}>
      {props.children}
    </div>
  );
}

function WelcomeDialog() {
  return (
    <FancyBorder color="blue">
      <h1 className="Dialog-title">
        Welcome
      </h1>
      <p className="Dialog-message">
        Thank you for visiting our spacecraft!
      </p>
    </FancyBorder>
  );
}

此处单一插槽，也可以实现多插槽模式，示例来自官方文档：

function SplitPane(props) {
  return (
    <div className="SplitPane">
      <div className="SplitPane-left">
        {props.left}
      </div>
      <div className="SplitPane-right">
        {props.right}
      </div>
    </div>
  );
}

function App() {
  return (
    <SplitPane
      left={<Contacts />}
      right={<Chat />}
    />
  );
}

定制组件

笔者生造词：固定通用组件部分传参的组件。

function Dialog(props) {
  return (
    <FancyBorder color="blue">
      <h1 className="Dialog-title">
        {props.title}
      </h1>
      <p className="Dialog-message">
        {props.message}
      </p>
      {props.children}
    </FancyBorder>
  );
}

class SignUpDialog extends React.Component {
  constructor(props) {
    super(props);
    this.state = {login: ''};
  }
  handleChange = (e) => {
    this.setState({login: e.target.value});
  };
  handleSignUp = () => {
    alert(`Welcome aboard, ${this.state.login}!`);
  };
  render() {
    return (
      <Dialog
        title="Mars Exploration Program"
        message="How should we refer to you?"
      >
        <input value={this.state.login} onChange={this.handleChange} />
        <button onClick={this.handleSignUp}>
          Sign Me Up!
        </button>
      </Dialog>
    );
  }  
}

高阶组件

笔者定义：接受组件参数，返回新组件的函数。

function withLinkAnalytics(RawComponent) {
  class LinkAnalyticsWrapper extends React.Component {
    componentDidMount() {
      ReactDOM.findDOMNode(this).addEventListener('click', this.handleLinkClick);
    }
    componentWillUnmount() {
      ReactDOM.findDOMNode(this).removeEventListener('click', this.handleLinkClick);
    }
    handleLinkClick = (e) => {
       // Naive check for <a> elements
      if (e.target.tagName === 'A') {
        // Feedback
      }
    };
    render() {
      // Never forget passing props
      return <RawComponent {...this.props} />;
    }
  }
}

延伸思考

关于 高阶组件 与 插槽组件，笔者实践中并不能很好的区分两者。个人判断标准为，UI 的协同使用 插槽组件，业务逻辑的协同使用 高阶组件。

Contact

Email: hjj491229492@hotmail.com