react扩展

            首先补充一下上个章节的一点结尾内容。reducer是一个纯函数，纯函数指的是当我们在redux里面定义了我们需要共享的对象后，我们是不可以对共享的对象本身进行改变的。我们在获取更新后的共享数据时，要去重新定义一个新的变量来获取更新后的共享数据并且返回，这样就可以拿到加工（更新后的数据了）。

             还有当我们的项目代码写完之后，往往需要上线到生成环境，我们需要项目打包，运行命令npm run build打包到build文件夹，这时候如果我们想要运行build文件夹，查看我们的代码是否正常运行，需要安装server相关的库，npm install serve -g 然后可以通过serve build直接在build文件夹下部署服务器运行，这样就可以查看打包后的项目是否正常运行了。

        回归正题。

    1.setState

                         

             我们更新状态页面渲染出来了1，但是控制台却是0？调用setState改状态，调用之后react改状态，setState是一个同步方法，不会等待，但是setState引起的react后续更新状态是异步的async，也就是说React的状态更新是异步的。

             

               但是如果我们在第二个参数的地方调用回调函数，这里输出的count就默认为当页面的组件重新渲染完之后，以及状态更新完之后，执行的回调函数输出count，所以是最新的值。

                这种是对象式，还有一种函数式。

                

                可以直接把state和props作为参数拿来用，不需要解构赋值获取什么的，对象式是函数式的一种语法糖（简写）

     2.lazyload

                懒加载，一般在项目中如果项目多组件多，就需要懒加载，用的时候加载。不用的时候不加载。

                

  

             写法是首先引入lazy方法从react中，然后const About = lazy（（）=>{return(import('./About'))}），这样就可以定义About作为一个懒加载组件，当切换到这个路径的时候，才会引入About组件进行渲染。但是如果我们现在注册的路由都是懒加载，那么就需要在我们加载的时候去显示一下内容，可以是虚拟Dom也可以是一个普通的组件。

               这时候引入Suspense方法，用法如上，关键是fallback属性，当包裹的路由组件都是懒加载的时候，fallback需要去指定一个加载中显示的内容，这些都是必要的写法。

      3.Hook

              我之前学的类组件有生命周期，以及this实例里面包含非常多的react带的api可以直接使用，以及props，state，ref进行数据的传输，函数组件只能props，而且没有实例对象。现在函数组件也可以这样使用state，以及react的api。通过hook。

            1.state hook

                        

              

        这是类组件的点击加数字效果。我们用this实例中的state，在this实例中添加函数，以及this实例自带的setState等等，直接通过extens Component继承直接拿来用。

        下面是函数组件点击加数字效果。、

        

        在函数组件通过数组结构的方式从React.useState（0）获取一个初始化的state以及对应的更新state的方法，比如这里是count以及setCount，我们通过直接使用setCount（（count）=>{（count+1）}）这种方式去更新state。而且只要更新了count，就会自动的重新渲染页面。

        为什么每次count更新重新调用Demo组件为什么const count初始化0没有执行呢，因为当第一次初始化的时候react底层帮我们保存了count作为缓存，不会被再次初始化。

        2.effect hook

                我们类组件有生命周期，我们通过生命周期来执行一些特殊时期下的函数。在函数组件内就需要用到React.useEffect(()=>{},[])这个方法。

                

                

          直接用生命周期componentDidMount然后计时器更新，这里用的函数式，对象式会形成函数闭包永远在作用域拿到count=0，导致一直输出的是1。（对象式是注释掉的代码）

        然后我们用componentWillUnmount关闭定时器在卸载前，点击事件点击清除所有组件。

        下面是函数组件。

        

                

            值得注意的是，当我们用React.useEffect(()=>{},[])后面的数组如果为空，表示没有绑定监听的状态，加载更新页面之后只执行一次，相当于componentDidMount，如果写了或者没有添加数组，就会监听对应的状态或者所以的状态，写了就监听对应的状态state或者直接监听所有的state。比如这里的count。而且如果写成

React.useEffect(()=>{//函数体，Return ()=>{}},[])

        如果又返回一个函数，相当于执行了componentwillunmount组件卸载前执行。

        

        （复习，setTimeout(()=>{},1000)这是一个定时器，在1秒后执行里面的函数

        ---setInterval(()=>{},1000)）这也是一个定时器，每经过1秒执行一次函数