30分鐘學會React Hook, Memo, Lazy

我們來學習React 16.8裏的新特性。

1. 自行配置好React的環境，推薦你使用Create React APP, 你也可以下載本文檔Zip解壓到本地直接運行. https://github.com/yurizhang/fed-study/blob/master/my-project.zip

cd my-project

yarn install

 

2. 在pages目錄下新建test目錄，我們使用這個目錄來學習.在這裏新建t1.js和t2.js

t1.js

/* eslint-disable no-console */
/* eslint-disable react/button-has-type */

// import PageHeaderWrapper from '@/components/PageHeaderWrapper';
import React, {lazy, useState, useEffect} from "react";


const T2 = lazy(()=> import("./t2"));


const PageHeaderWrapper=(prop)=>{
    console.log("子組件刷新...");
   return (
     <>
       <div>{prop.loading}</div>
       <div>{prop.content}</div>
     </>
    )
}

// React.memo()可接受2個參數，第一個參數爲純函數的組件，第二個參數用於對比props控制是否刷新，與shouldComponentUpdate()功能類似。

const Memo = React.memo(PageHeaderWrapper, (prevProps, nextProps) => {
         console.log(prevProps, nextProps);
         return  prevProps.loading === nextProps.loading
        }
    
);
const rand=()=>{
    // console.log("define rand");
    const a=parseInt(Math.random()*10, 10);
    if(a>=5){
        return 1
    }
    return 0
    
}
const test=()=>{
    const [count, setCount] = useState(1);
    console.log('test 組件：',count);
    useEffect(() => {
        console.log('test組件：useEffect test',count);
        document.title = `You clicked ${count} times`;
        console.log('hello:', document.querySelector("#hello").innerHTML);

        // 讓我們傳給useEffect的副作用函數 返回一個新的函數。這個新的函數將會在組件下一次重新渲染之後執行。
        return function cleanup() {
            console.log('useEffect hello:',  document.querySelector("#hello").innerHTML);
            console.log('test組件：useEffect return ',count);
        };
    }, []);  // 給useEffect傳第二個參數。用第二個參數來告訴react只有當這個參數的值發生改變時，才執行我們傳的副作用函數（第一個參數）。

    return (
      <>
        <Memo loading={count} content='test2' />
        <div id="hello">Hell world!{count}</div>
        
        <React.Suspense fallback="T2 loading...">          
          <T2 />          
        </React.Suspense>

        <div>
          <p>You clicked {count} times</p>
          <button onClick={() => setCount(rand)}>
                Click me
          </button>
        </div>
      </>
    );
}





export default test;

 

t2.js  這裏使用了axios,你要先安裝一下，當然你也可以在你的模板文件public/index.htm裏 

<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

/* eslint-disable no-console */
/* eslint-disable react/button-has-type */

import React, {useState, useEffect} from "react";

const T2=(prop)=>{

   const [message, setMessage]=useState(()=>{

        return 'start...';
   });

    function temp(){
        axios.get('http://route.showapi.com/1764-1').then(response=> {
            console.log(response.data.showapi_res_error);
            setMessage(response.data.showapi_res_error);
        })
   }   
   useEffect( () => {
         temp()
      }
   );  // 給useEffect傳第二個參數。用第二個參數來告訴react只有當這個參數的值發生改變時，才執行我們傳的副作用函數（第一個參數）。
   return (
     <>
       <div>T2. message: {message}</div>   
     </>
    )
}

export default T2;