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;