React 高级用法

React 前言

  了解React的中级用法，高级用法让我们处理大量业务变得游刃有余。

React 高阶组件(HOC)

  高阶组件是React重用组件的高级技术，高阶组件不是React API的一部分，而是React封装的一种模式高阶组件是一个能够将一个组件变为另一个组件的函数。HOC并不会改变输入的组件，也不复制组件。而是在容器中将原来的组件包裹起来。

• 约束
  
  • 只包裹不改变原来的组件
  • 包裹的组件只传递相关的props
  • 兼容性最大化
• 注意
  
  • 包裹组件不会传递refs
• 高阶组件

React 类型检查 PropTypes

  在我们定义组件的时候，通常会定义组件的属性，为了防止使用组件的人遵守我们的规则，可以使用PropTypes来进行类型限制。

• 用法

  import PropTypes from 'prop-types';
  class CommonMessage extends React.Component {
    render() {
      return (
        <h1>Hello, {this.props.name}</h1>
      );
    }
  }
  
  Greeting.propTypes = {
    name: PropTypes.string
  };
  

React 上下文 Context

  Context 通过组件树提供了一个传递数据的方法，从而避免了在每一个层级手动的传递 props 属性。

• 用法
  
  • https://doc.react-china.org/docs/context.html

React 总结

  最好的技术方案就是API文档，多去理解API文档有助于我们去更深入的理解或使用某一项技术。