欢迎来到尧图网

客户服务 关于我们

您的位置:首页 > 新闻 > 国际 > react扩展

react扩展

2025/6/21 18:44:46 来源:https://blog.csdn.net/A6516565189/article/details/148798163  浏览:    关键词: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秒执行一次函数

版权声明:

本网仅为发布的内容提供存储空间,不对发表、转载的内容提供任何形式的保证。凡本网注明“来源:XXX网络”的作品,均转载自其它媒体,著作权归作者所有,商业转载请联系作者获得授权,非商业转载请注明出处。

我们尊重并感谢每一位作者,均已注明文章来源和作者。如因作品内容、版权或其它问题,请及时与我们联系,联系邮箱:809451989@qq.com,投稿邮箱:809451989@qq.com

热搜词