React 16 の新機能は何ですか? React16の新機能・新機能の紹介

この記事では主に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 [
       <li key="A"/>First item</li>,
       <li key="B"/>Second item</li>,
       <li key="C"/>Third item</li>,
     ];
   }

   詳細は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 (
               <p>
                   <ErrorBoundary>
                       <ErrorComponent/>
                   </ErrorBoundary>
               </p>
           )
       }
   }

   エラー境界コンポーネントによってラップされたサブコンポーネントでエラーが発生すると、エラー コンポーネントは文字列 (このコンポーネントまたはその子) に置き換えられます。コンポーネント ツリー全体がアンロードされずにエラーが発生しました。 (さらに詳しく知りたい場合は、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 (
       <p>
         {this.props.children}
       </p>
     );
   }

   ただし、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 によって無視されます。

   <p a={()=>{}}></p>   //错误

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

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

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

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

   そして必要なもの:

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

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

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

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

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

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

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

開発バージョンと製品バージョンの違いを強調するために、単一ファイルのブラウザバージョンの名前とパスが変更されました

• react/dist/react.js → accept/umd/react.development.js

• react/dist/react.min.js→react/umd/react.production.min.js

• react-dom/dist/react-dom.js→react-dom/umd/react-dom .development.js

• react-dom/dist/react-dom.min.js→react-dom/umd/react-dom.production.min.js

サーバーレンダラーを書き直して改善しました

• サーバー レンダリングではマークアップ検証は使用されなくなり、代わりにベスト エフォート ベースで既存の DOM に追加され、不一致が警告されます。また、各ノードのデータ フィードバック プロパティに空のコンポーネントと注釈を使用しなくなりました。

• サーバーレンダリングコンテナー用の明示的な API が追加されました。サーバーでレンダリングされた HTML を復元する場合は、ReactDOM.render の代わりに ReactDOM.水和物を使用してください。クライアント側のレンダリングだけを行う場合は、ReactDOM.render を使い続けてください。

不明なプロパティが DOM コンポーネントに渡されると、それが有効な値であれば、React はそれを DOM にレンダリングします。ドキュメントを表示

レンダリング関数とライフサイクル関数でエラーが発生すると、デフォルトで DOM ツリー全体がアンロードされます。これを防ぐには、UI の対応する位置にエラー境界を追加します。

非推奨

• reverse-with-addons.js はビルドされなくなりました。互換性のあるすべてのアドオンは npm で個別にリリースされます。必要な場合は、単一ファイルのブラウザー バージョンが利用可能です。

• バージョン 15.x の非推奨はコア パッケージから削除され、 React.createClass は create-react-class として、 React.PropTypes は prop-types として、 React.DOM は act-dom-factories として利用できるようになりました。 act-addons-test-utils は、react-dom/test-utils として使用され、shallow レンダラーは、react-test-renderer/shallow として使用されます。 15.5.0 および 15.6.0 のドキュメントのリファレンスを参照してください。

この記事はここで終わります (さらに詳しく知りたい場合は、PHP 中国語 Web サイト

React ユーザーマニュアル の列にアクセスして学習してください)。ご質問がある場合は、以下にメッセージを残してください。

以上がReact 16 の新機能は何ですか? React16の新機能・新機能の紹介の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。