NO IMAGE

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 屬性。

React 總結

  最好的技術方案就是API文件,多去理解API文件有助於我們去更深入的理解或使用某一項技術。