この記事では主にreact16のいくつかの新機能と、react16の詳細な機能紹介を紹介します。この記事のメインコンテンツを見てみましょう

React 16のアップデート

新しいjs環境要件

react16依靠Map和Set集合和requestAnimationFrame（一个针对动画效果的API）

新機能

- Fragments：render函数可以返回数组和字符串 - error boundaries：错误处理 - portals ：支持声明性地将子树渲染到另一个DOM节点 - custom DOM attributes ：ReactDom允许传递非标准属性 - improved server-side rendering:提升服务端渲染性能

1. フラグメント

   render() { return [ 
   First item
   , 
   Second item
   , 
   Third item
   , ]; }

   ログイン後にコピー

   詳細はAPIを参照してください

2. エラー境界

   以前は、コンポーネントでエラーが発生すると、コンポーネント ツリー全体がルート ノードからアンマウントされていました。 React 16 ではこの問題が修正され、中国語で「エラー境界」と訳されるエラー境界の概念が導入されています。コンポーネントでエラーが発生した場合、エラー境界を使用するなどしてエラーを適切に処理できます。コンテンツはエラーコンポーネントを置き換えます。 Error Boundary は特別な React コンポーネントと見なすことができ、componentDidCatch ライフサイクル関数を追加します。これにより、エラー ログのレポートやコンポーネント ツリー全体のアンインストールなど、エラーを適切に処理できます。 (注: コンポーネントのコールバック イベントのエラーなど、すべてのランタイム エラーをキャプチャするわけではありません。従来の try-catch ステートメントと考えることができます)

   実践:

   エラー境界の抽象チェック パブリック コンポーネント:

   class ErrorBoundary extends React.Component{ constructor(props){ super(props); this.state=({ ifError:false }); } componentDidCatch(err, info) { this.setState({ ifError: true }) console.log(err); } render(){ if(this.state.ifError){ return `this or its children has error`; } return this.props.children } }

   ログイン後にコピー

   Create Aエラーを含む単純なサブコンポーネント:

   class ErrorComponent extends React.Component{ render(){ const str = '123'; return str.toFixed(2); } }

   ログイン後にコピー

   エラー境界コンポーネントを使用して、問題が発生する可能性のあるコンポーネントをラップします

   class MainShowComponent extends React.Component{ render(){ return ( 
       
    ) } }

   ログイン後にコピー

   エラー境界コンポーネントによってラップされたサブコンポーネントでエラーが発生すると、エラー コンポーネントは文字列 (このコンポーネントまたはその子) に置き換えられます。コンポーネント ツリー全体がアンロードされずにエラーが発生しました。 (さらに詳しく知りたい場合は、PHP 中国語 Web サイトReact Reference Manualの列にアクセスして学習してください)

3. ポータル

   ポータルは、親コンポーネントの DOM 階層の外にある DOM に子を表示するためのファーストクラスのメソッドを提供します。ノード。

   ReactDOM.createPortal( child, container );

   ログイン後にコピー

   最初のパラメータ (子) は、要素、文字列、フラグメントなどのレンダリング可能な React 子要素です。 2 番目のパラメータ (コンテナ) は DOM 要素です。

   通常、コンポーネントの render メソッドから要素を返すと、その要素は最も近い親ノードの子として DOM にロードされます:

   render() { // React mounts a new p and renders the children into it return ( 
    {this.props.children} 
    ); }

   ログイン後にコピー

   ただし、DOM の別の場所に子を挿入すると便利な場合があります:

   render() { // React does *not* create a new p. It renders the children into `pNode`. // `pNode` is any valid DOM node, regardless of its location in the DOM. return React.createPortal( this.props.children, pNode, ); }

   ログイン後にコピー

   ポータルとそのイベントのバブリングの詳細については、公式 Web サイトと CodePen の例を参照してください

4. カスタム DOM 属性

   以前のバージョンでは、React は認識されない HTML および SVG カスタム属性を無視していました。属性は data-* フォームを通じてのみ追加できるようになりました。この変更により、React は属性のホワイトリストを削除できるようになり、ファイル サイズが削減されます。ただし、DOM によって渡されるカスタム属性が関数タイプまたはイベント ハンドラー タイプである場合、それも React によって無視されます。

   {}}>
    //错误

   ログイン後にコピー

5. サーバーサイドレンダリングの改善

   サーバーサイドレンダリングのパフォーマンスを改善し、React 16 の SSR が完全に書き直されました。新しい実装は非常に高速で、React 15 のほぼ 3 倍のパフォーマンスを実現し、ストリーミング モードのストリーミングを提供するようになりました。レンダリングされたバイトをクライアントにより速く送信できます。

重大な変更点

• スケジュールとライフサイクルの変更点

• setState を呼び出して null を返すと、レンダーは更新されません。これにより、update メソッドで自分で更新するかどうかを決定できるようになります。

  this.setState( (state)=>{ if(state.curCount%2 === 0){ return {curCount:state.curCount+1} }else{ return null; } } )

  ログイン後にコピー

• render メソッドで setState を呼び出すと常に更新が発生します。以前のバージョンではサポートされていませんでしたが、render で setState を呼び出さないようにしてください。

• setState のコールバック関数は、すべてのコンポーネントがレンダリングされた後ではなく、componentDidMount/componentDidUpdate が実行された直後に実行されます。

  this.setState( (state)=>{ if(state.curCount%2 === 0){ return {curCount:state.curCount+1} }else{ return null; } }, ()=>{ console.log(this.state.curCount); } )

  ログイン後にコピー

1. ReactDOM.render() と ReactDom.unstable_renderIntoContainer() は、ライフサイクル関数で呼び出された場合、null を返します。したがって、このような問題を解決するには、ポータルまたは refs を使用できます

2. setState の変更:

3. 2 つのコンポーネント和> が置き換えられると、B.componentWillMount は常に A.componentWillUnmount の前に実行され、A.componentWillUnmount の前に実行されます。事前に実行される場合があります。

4. 以前のバージョンでは、コンポーネントの ref を変更する場合、コンポーネントの render メソッドが呼び出される前に ref と dom が分離されていました。ここで、dom 要素が変更されるまで ref の変更を遅らせます。これにより、ref は dom から分離されなくなります。

5. React 以外のメソッドを使用してコンテナを再レンダリングするのは安全ではありません。これは以前のバージョンでは機能していた可能性がありますが、サポートされていないと思われます。この場合には警告が発行され、ReactDOM.unmountComponentAtNode を使用してノード ツリーをクリアする必要があります。

   ReactDOM.render(, p); p.innerHTML = 'nope'; ReactDOM.render(, p);//渲染一些没有被正确清理的东西

   ログイン後にコピー

   そして必要なもの:

   ReactDOM.render(, p); ReactDOM.unmountComponentAtNode(p); p.innerHTML = 'nope'; ReactDOM.render(, p); // Now it's okay

   ログイン後にコピー

   この問題を確認してください

6. componentDidUpdate ライフサイクルは prevContext パラメーターを受け入れなくなりました。

7. 一意でないキーの使用は、サブコンポーネントの重複または損失を引き起こす可能性があります。これはサポートされておらず、これまでサポートされていませんでしたが、以前は困難なバグでした。

8. DOM 参照が使用できないため、Shallow レンダラは、componentDidUpdate() をトリガーしなくなりました。これにより、以前のバージョンのcomponentDidMount()の呼び出しとの一貫性も確保されます。

9. Shallow レンダラは、unstable_batchedUpdates() をサポートしなくなりました。

10. ReactDOM.unstable_batchedUpdates には、コールバックの後に追加のパラメーターが 1 つだけ含まれるようになりました。