React v.16.3.0リリース

数日前、 ライフサイクルメソッドの今後の変更について投稿し、段階的な移行（更新）の戦略についても触れました。 React 16.3.0では、この移行に役立ついくつかの新しいライフサイクルメソッドを追加しました。 また、待望のイノベーションのための新しいAPI、公式コンテキストAPI、参照転送API、および人間工学的参照APIも提供しました。

公式コンテキストAPI

長年、Reactは実験的なコンテキストAPIを提供してきました。 たとえそれが強力な「もの」であったとしても、そのようなAPIの使用は、「実験的」なAPIを置き換えることを望んでいたため、危険にさらされていました。

バージョン16.3では、より効率的で、 静的型チェックと詳細更新の両方をサポートする新しいコンテキストAPIが導入されています。

古いコンテキストAPIは、16番目のバージョンのすべてのリリースで機能するため、移行する時間があります。

以下は、新しいAPIを使用してテーマを「スキップ」する方法を示す例です。

const ThemeContext = React.createContext('light'); class ThemeProvider extends React.Component { state = {theme: 'light'}; render() { return ( <ThemeContext.Provider value={this.state.theme}> {this.props.children} </ThemeContext.Provider> ); } } class ThemedButton extends React.Component { render() { return ( <ThemeContext.Consumer> {theme => <Button theme={theme} />} </ThemeContext.Consumer> ); } }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

コンテキストAPIの詳細はこちら。

createRef API

Reactは、refを制御する2つの方法を提供しました。通常の文字列でrefを指定する方法とコールバックを呼び出す方法です。 refを単に文字列として指定する方が便利ですが、 マイナスがいくつかあったため、コールバックオプションを使用することをお勧めします。

バージョン16.3では、refを管理するための新しいオプションが追加されました。これにより、refを欠陥のない文字列として指定できるようになりました。

 class MyComponent extends React.Component { constructor(props) { super(props); this.inputRef = React.createRef(); } render() { return <input type="text" ref={this.inputRef} />; } componentDidMount() { this.inputRef.current.focus(); } }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

コールバック参照は、新しいcreateRef APIで引き続きサポートされます。 コンポーネントのコールバック参照を急いで置き換えないでください。 これらはより柔軟であるため、将来の高度な使用のために残します。

createRef APIの詳細については、こちらをご覧ください。

forwardRef API

高次コンポーネント （またはHOC）は、コンポーネント間でコードを再利用するための便利なツールです。 コンテキストをベースとして前の例を取り上げると、テーマをプロパティ（ props ）として「スレッド化」するHOCを作成できます。

 function withTheme(Component) { return function ThemedComponent(props) { return ( <ThemeContext.Consumer> {theme => <Component {...props} theme={theme} />} </ThemeContext.Consumer> ); }; }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

このHOCを使用すると、ThemeContextを直接使用せずに、コンテキストからコンポーネントをテーマプロパティにバインドできます。 例：

 class FancyButton extends React.Component { buttonRef = React.createRef(); focus() { this.buttonRef.current.focus(); } render() { const {label, theme, ...rest} = this.props; return ( <button {...rest} className={`${theme}-button`} ref={this.buttonRef}> {label} </button> ); } } const FancyThemedButton = withTheme(FancyButton); //    FancyThemedButton,    FancyButton //      (* theme*) //  HOC     props. <FancyThemedButton label="Click me!" onClick={handleClick} />;
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

通常、HOCはラップするコンポーネントに小道具を投げます。 残念ながら、 refsはthrowしません 。 これは、FancyThemedButtonを使用するときにrefをFancyButtonに添付できないことを意味します。 focus()



を呼び出すことは不可能であることがわかります。

forwardRef APIは、refをインターセプトし、通常のプロパティとしてさらに送信することを提案することにより、この問題を解決します。

 function withTheme(Component) { //  ,  "ref"   React.forwardRef. function ThemedComponent(props, ref) { return ( <ThemeContext.Consumer> {theme => ( <Component {...props} ref={ref} theme={theme} /> )} </ThemeContext.Consumer> ); } //     , //         DevTools, // , "ForwardRef(withTheme(MyComponent))" const name = Component.displayName || Component.name; ThemedComponent.displayName = `withTheme(${name})`; //  React  ref  ThemedComponent. return React.forwardRef(ThemedComponent); } const fancyButtonRef = React.createRef(); //  fancyButtonRef   FancyButton <FancyThemedButton label="Click me!" onClick={handleClick} ref={fancyButtonRef} />;
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

ライフサイクルメソッドの変更

このクラスを使用してコンポーネントを作成するためのAPIは、数年間変わっていません。 ただし、このモデルの準備が整っていなかった新しい「機能」（ エラー境界や将来の非同期レンダリングモードなど ）のサポートを追加しました。

たとえば、現在のAPIでは、無関係なロジックによってコンポーネントの初期レンダリング （ 初期レンダリング ）をブロックすることは非常に簡単です。 一部には、これはタスクを解決するためのいくつかのオプションがあるという事実によるものであり、したがって、最良のものを選択することは容易ではありません。 エラー処理はしばしば無視され、これがメモリリークを引き起こす可能性があることに気付きました（これは、将来的に非同期レンダリングモードに悪影響を及ぼします）。 また、現在のクラスAPIは、たとえばReactコンパイラーのプロトタイプの作成など、他のアイデアを複雑にします。

これらの問題のほとんどは、次のライフサイクルメソッドに関連しています： componentWillMount 、 componentWillReceiveProps、およびComponentWillUpdate 。 これらのメソッドは、Reactコミュニティに最も混乱をもたらします。 したがって、より良い代替案を支持してそれらを放棄します。

もちろん、このような変更が膨大な数の既存のコンポーネントに影響することを理解しています。 したがって、移行は可能な限り緩やかになります。 また、撤退する方法も提供します（Facebookには50,000個のコンポーネントがあります。段階的な更新も必要です）。

非推奨（非推奨のメソッド）警告は将来の16.xリリースに含まれますが、現在の「ライフサイクル」のサポートはバージョン17まで有効です。また、17番目のバージョンではUNSAFE_プレフィックスでそれらを使用できます。 名前を変更するための自動スクリプトを用意しました。

廃止予定のライフサイクルメソッドに加えて、新しいメソッドをいくつか追加しました。

• getDerivedStateFromProps -componentWillReceivePropsの代替
• getSnapshotBeforeUpdateは、更新が発生する前にDOMからプロパティを安全に読み取るための代替手段です。

ライフサイクルの変更について詳しくはこちらをご覧ください。

StrictModeコンポーネント

StrictModeは、アプリケーションの潜在的な問題を見つけるためのツールです。 Fragmentと同様に、StrictModeは視覚的にレンダリングされません。 このコンポーネントは、追加のチェックと警告をアクティブにします。

StrictModeは開発モードでのみ機能します（ 「prod」ではなく開発モードで ）

すべての問題領域（たとえば、ある種の突然変異）をキャッチすることは不可能であるという事実にもかかわらず、StrictModeコンポーネントは多くの状況で役立ちます。 「厳格モード」で警告が表示された場合、 非同期レンダリングモードでバグが発生している可能性が高いです。

バージョン16.3では、StrictModeは次のことができます。

• 安全でない（古い）ライフサイクルメソッドを使用してコンポーネントを見つける
• 文字列として古いref表記APIを使用することについて警告する
• 予期しない副作用を追跡する

追加の機能は、将来のReactリリースで追加されます。

StrictModeの詳細はこちら。