我们来学习React 16.8里的新特性。

1. 自行配置好React的环境，推荐你使用Create React APP, 你也可以下载本文档Zip解压到本地直接运行. 

cd my-projectyarn 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 (     <>       
     
      {prop.loading}
     
       
     
      {prop.content}
     
         )}

// 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 (      <>        
             
     
      Hell world!{count}
     
                
                         
                        
             
     
          
      
You clicked {count} times
          
       setCount(rand)}>                Click me                  
     
          );}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 (     <>       
     
      T2. message: {message}
     
            )}export default T2;