[react]export、Route、useParam、useEffect、AJAX、パフォーマンス管理

17409 ワード
テキストリンク

import / export


エクスポートするファイル.関数、オブジェクト、および元の値をjsからexport文にエクスポート
他のファイルからimport文にインポートできます.

  • export named
    複数をエクスポートできますが、カッコ内でスワップできます!
    export名と同じ名前でインポートする必要があります.
    //exportFile.js
    export {myFunction, myVariable} ;
    //importFile.js
    import {myFunction, myVariable} from './exportFile.js';

  • export default
    1つのファイルを1つ少なく書く!
    ファイルからデフォルトでエクスポートされるため、インポートしたファイルに自由に名前を付けることができます.
    //exportFile.js
    export default myFunc//importFile.js
    import myFuncName from './exportFile.js';

    • ページの移動


    詳細アドレスに応じて異なるビューを表示
    ページの移動(詳細ページなど)時/後
    ルータを使用した1ページアプリケーションの実装(SPA)
    ->ページを移動するたびに各HTMLをロードするのではなく、一度受信してから必要なデータだけを受信して画面に表示します

    Route


  • 設定npm install react-router-dom

  • index.js 
    • import { BrowserRouter } from 'react-router-dom';

ReactDOM.render(
  <BrowserRouter>
    <App />
  </BrowserRouter>,
  document.getElementById('root')
);
  • App.jsimport { Link, Route, Switch } from 'react-router-dom';
    • 🚨A is only ever to be used as the child of element, never rendered directly. Please wrap your in a .
    💡react-router-domライブラリの更新構文を適用します.正式な書類
    --> 1. すべての「Route」は「Routes」が庇護しなければならない.
    import About from './pages/About';
import Home from './pages/Home';

ReactDOM.render(
  <BrowserRouter>
    <Routes>
      <Route path="/" element={<App />}></Route>
      <Route path="/home" element={<Home />}></Route>
      <Route path="/about" element={<About />}></Route>
    </Routes>
  </BrowserRouter>,
  document.getElementById('root')
);
    --> 2. パラメータはelement={<構成部品/>}

    useParam()

    import {useParams} from "react-router-dom"; 
    <Route path="/detail/:id" element={<Detail />}></Route>
    /:idはurlの後に任意の文字を受信することができる.ここではidで命名されていますが、任意の名前でも構いません
    /detal/123214や/detal/2354などのランダム値を使用する場合、画面は同じです.
    後の価格によって違う画面を見せるとしたら?
    変数=userParam()urlのすべてのパラメータを格納
  • Detail.js 
    •     let {id} = useParams();
    let id = useParams();操作コンソール.log(id)>{id:2}など.破棄する必要があります

    Link


    ナビゲーションバーでtoプロパティに移動するページパスを指定します.
    🚨エラー解決プロセス🚨
    <Navbar>
  <Nav.Link> <Link to="/">Home</Link> </Nav.Link>
  <Nav.Link> <Link to="/detail">Detail</Link> </Nav.Link>
</Navbar>
    このように設定すると.
    🚨validateDOMNesting(...): cannot appear as a descendant of💡参照工作人员工的话,可以使用链接。と考えられる問題であることがわかりました.
    <Navbar>
  <Nav.Link to="/">Home </Nav.Link>
  <Nav.Link to="/about">About </Nav.Link>
</Navbar>
    ⚠️index.tsx:30 You rendered descendant (or called useRoutes()) at "/"(under ) but the parent route path has no trailing "". This means if you navigate deeper, the parent won't match anymore and therefore the child routes will never render. Please change the parent to .
    あちこち探して、警告文に書いてある...!
    💡index.jsのサブルートディレクトリをより深くナビゲートするには、最初のサブディレクトリに*を指定します.
    <Route path="/*" element={<App />}></Route>

    useHistory


    window.historyと同様に、前後または特定のアドレスに移動させます.
    import { useHistory } from 'react-router-dom';
let history = useHistory();

<button className='bnt-useHistory' onClick={() => { history.goBack( ) }}> 뒤로가기 </button>

<button className='bnt-useHistory' onClick={() => { history.goForward( ) }}> 앞으로가기 </button>

// 특정 링크로
<button className='bnt-useHistory' onClick={() => { history.push('/detail' )}}> 상세페이지로 이동 </button>

    Style


    SASS


    CSSフロントプロセッサ
    セレクタのネスト、条件文、繰返し文、および様々な単位の演算を構文符号化できます.
  • @mixin @include 
    • @mixin 스타일명{
  속성:값;
}
    グループ単位スタイルを変数として指定できます.
    パラメータを使用できます.
    mixin fontSize($size) {
  @if $size == 'small' {
    font-size: 10px;
  }
    条件として使用したり、属性の値として使用したりできます.
    これを使用すると、
    적용할 요소{
  @include 스타일명;
  @inlcude 스타일명(인자);
}
    リファレンス

    useEffect


    depsパラメータに基づいてページをレンダリングするたびにコールバック関数が実行されます.
    useEffect(cb,deps);
  • No dependency 
    • useEffect(() => {});
    レンダリングが発生するたびにトリガーされるため、あまり役に立ちません.
  • [] 
    • useEffect(() => {}, []);
    最初のレンダリング後にのみ発動します.再発動X
  • dependent on a variable 
    • useEffect(() => {}, [prop, state]);
    1回目のレンダリング後、配列内の変数の値が変化するたびにトリガーされます.

    AJAX


    Asynchronous JavaScript AndXML:サーバと非同期通信する技術.
    「更新せずにGETを要求するコード」

    axios

    npm install axios import axios from 'axios';
  • GET 
    • axios.get('~~.json')
.then((result) => {
  console.log(result)
})
.catch((error)=>{
  console.log(error)
})

    パフォーマンスの向上/保守


    関数またはオブジェクトを変数に配置し、構成部品の外部に保存します。


    lazy import


    App.jsなどの大量のインポートが必要な場合に必要な構成部品のみをインポートすることを指定します.import React, {lazy, Suspense} from 'react'; 
    // 기존 import
// import Detail from './Detail.js';
// lazy import
let Detail = lazy( ()=>{ return import('./Detail.js') } );

//해당 컴포넌트 호출할때
  <Suspense fallback={ <div>로딩중입니다~!</div> }>
    <Detail/>
  </Suspense>

    memo


    コンポーネントは常に関連するstate、propsの変更時に自動的に再表示されます!
    親コンポーネントのpropsが変更されると、サブコンポーネントも再レンダリングされます...
    速度低下などの問題があるから!import React, { memo} from 'react'; 
    function Cart(){
  return (
    <Parent 이름="존박" 나이="20"/>
  )
}

function Parent(props){
  return (
    <div>
      <Child1 이름={props.이름}/>
      <Child2 나이={props.나이}/>
    </div>
  )
}
function Child1(){
  useEffect( ()=>{ console.log('렌더링됨1') } );
  return <div>1111</div>
}
let Child2 = memo(function(){
  useEffect( ()=>{ console.log('렌더링됨2') } );
  return <div>2222</div>
})
    Child 1で[名前](Name)を変更した場合、Child 2の[年齢](Age)は関係なく再レンダリングされません.
    構成部品が大きすぎたり、頻繁に再レンダリングされたりしないようにします.
    しかし,既存の変化と比較する演算が増加し,propsが大きく複雑であれば負担になる.
    第二十章Classの継承
    Get/Update_or_create