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

React 16のアップデート

新しいjs環(huán)境要件

react16依靠Map和Set集合和requestAnimationFrame（一個針對動畫效果的API）

新機能

-?Fragments：render函數(shù)可以返回數(shù)組和字符串
-?error?boundaries：錯誤處理
-?portals?：支持聲明性地將子樹渲染到另一個DOM節(jié)點
-?custom?DOM?attributes?：ReactDom允許傳遞非標(biāo)準(zhǔn)屬性
-?improved?server-side?rendering:提升服務(wù)端渲染性能

1. フラグメント

   render()?{
   ??return?[
   ????<li key="A"/>First?item</li>,
   ????<li key="B"/>Second?item</li>,
   ????<li key="C"/>Third?item</li>,
   ??];
   }

   詳細(xì)はAPIを參照してください

2. エラー境界

   以前は、コンポーネントでエラーが発生すると、コンポーネント ツリー全體がルート ノードからアンマウントされていました。 React 16 ではこの問題が修正され、中國語で「エラー境界」と訳されるエラー境界の概念が導(dǎo)入されています。コンポーネントでエラーが発生した場合、エラー境界を使用するなどしてエラーを適切に処理できます。コンテンツはエラーコンポーネントを置き換えます。 Error Boundary は特別な React コンポーネントと見なすことができ、componentDidCatch ライフサイクル関數(shù)を追加します。これにより、エラー ログのレポートやコンポーネント ツリー全體のアンインストールなど、エラーを適切に処理できます。 (注: コンポーネントのコールバック イベントのエラーなど、すべてのランタイム エラーをキャプチャするわけではありません。従來の 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 の列にアクセスして學(xué)習(xí)してください)

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,
   ??);
   }

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

4. カスタム DOM 屬性

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

   <p a={()=>{}}></p>???//錯誤

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

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

重大な変更點

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

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

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

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

• setState のコールバック関數(shù)は、すべてのコンポーネントがレンダリングされた後ではなく、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() は、ライフサイクル関數(shù)で呼び出された場合、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

   この問題を確認(rèn)してください

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 を復(fù)元する場合は、ReactDOM.render の代わりに ReactDOM.水和物を使用してください。クライアント側(cè)のレンダリングだけを行う場合は、ReactDOM.render を使い続けてください。

• reverse-with-addons.js はビルドされなくなりました?；Q性のあるすべてのアドオンは 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 のドキュメントのリファレンスを參照してください。

React ユーザーマニュアル の列にアクセスして學(xué)習(xí)してください)。ご質(zhì)問がある場合は、以下にメッセージを殘してください。

以上がReact 16 の新機能は何ですか? React16の新機能?新機能の紹介の詳細(xì)內(nèi)容です。詳細(xì)については、PHP 中國語 Web サイトの他の関連記事を參照してください。