Loading

随笔分类 -  react

react-router和useRoutes
摘要：react-router和useRoutes hash 模式 路由原理： 我们先来看hash模式，页面首次加载时需要在load事件中解析初始的URL，从而展示进入的页面。当 # 后面的哈希值发生变化时，不会向服务器请求数据，可以通过 hashchange 事件来监听到 URL 的变化，从而进行跳转页 阅读全文
posted @ 2022-05-10 17:11 sunflower-js 阅读(1418) 评论(0) 推荐(0)
♣ webpack起步
摘要：Webpack是什么？ webpack是一个静态的模块化打包工具，为现代的JavaScript应用程序； 对上面的解释进行拆解： 打包bundler：webpack可以将帮助我们进行打包，所以它是一个打包工具 静态的static：这样表述的原因是我们最终可以将代码打包成最终的静态资源（部署到静态服务 阅读全文
posted @ 2022-02-05 23:37 sunflower-js 阅读(64) 评论(0) 推荐(0)
♣ React Hooks的使用
摘要：React Hooks的使用 为什么需要Hook? Hook 是 React 16.8 的新增特性，它可以让我们在不编写class的情况下使用state以及其他的React特性（比如生命周期）。 class组件可以定义自己的state，用来保存组件自己内部的状态；函数式组件不可以，因为函数每次调用都 阅读全文
posted @ 2022-02-04 22:52 sunflower-js 阅读(105) 评论(0) 推荐(0)
♣ react-router的使用
摘要：react-router的使用 路由 前端渲染的理解： 每次请求涉及到的静态资源都会从静态资源服务器获取； 这些资源包括HTML+CSS+JS，然后在前端对这些请求回来的资源进行渲染； 需要注意的是，客户端的每一次请求，都会从静态资源服务器请求文件； 同时可以看到，和之前的后断路由不同，这时后端只是 阅读全文
posted @ 2022-02-03 23:15 sunflower-js 阅读(115) 评论(0) 推荐(0)
♠ react-redux的使用
摘要：redux融入react代码 手动和redux联系 在 componentDidMount 中定义数据的变化，当数据发生变化时重新设置 counter;在发生点击事件时，调用store的dispatch来派发对应的action； 查看代码 //手动和redux联系 import React, { P 阅读全文
posted @ 2022-02-03 21:45 sunflower-js 阅读(45) 评论(0) 推荐(0)
♠ redux的使用
摘要：redux的使用 JavaScript纯函数 函数式编程中有一个概念叫纯函数，JavaScript符合函数式编程的范式，所以也有纯函数的概念； 纯函数的维基百科定义： 在程序设计中，若一个函数符合一下条件，那么这个函数被称为纯函数： 此函数在相同的输入值时，需产生相同的输出。函数的输出和输入值以外的 阅读全文
posted @ 2022-02-03 13:12 sunflower-js 阅读(58) 评论(0) 推荐(0)
♣ AntDesign组件库
摘要：AntDesign组件库 AntDesign的介绍 AntDesign ，简称 antd 是基于 Ant Design 设计体系的 React UI 组件库，主要用于研发企业级中后台产品。中后台的产品 属于工具性产品，很多优秀的设计团队通过自身的探索和积累，形成了自己的设计体系。 AntDesign 阅读全文
posted @ 2022-02-03 11:07 sunflower-js 阅读(622) 评论(0) 推荐(0)
♠ React中的样式
摘要：在组件化中选择合适的CSS解决方案应该符合以下条件： 可以编写局部css：css具备自己的具备作用域，不会随意污染其他组件内的原生； 可以编写动态的css：可以获取当前组件的一些状态，根据状态的变化生成不同的css样式； 支持所有的css特性：伪类、动画、媒体查询等； 编写起来简洁方便、最好符合一贯 阅读全文
posted @ 2022-02-02 23:39 sunflower-js 阅读(93) 评论(0) 推荐(0)
♣ ref、高阶函数
摘要：如何使用ref 在React的开发模式中，通常情况下不需要、也不建议直接操作DOM原生，但是某些特殊的情况，确实需要获取到DOM进行某些操作： 管理焦点，文本选择或媒体播放； 触发强制动画； 集成第三方 DOM 库； 方式一：传入字符串 使用时通过 this.refs.传入的字符串格式获取对应的元素 阅读全文
posted @ 2022-01-29 21:21 sunflower-js 阅读(143) 评论(0) 推荐(0)
♠ react脚手架、组件化开发、render更新流程
摘要：React脚手架 React脚手架本身需要依赖node，所以我们需要安装node环境。 什么是npm？ 全称 Node Package Manager，即“node包管理器”； 作用肯定是帮助我们管理一下依赖的工具包（比如react、react-dom、axios、babel、webpack等等）； 阅读全文
posted @ 2022-01-28 19:07 sunflower-js 阅读(193) 评论(0) 推荐(0)
♠ React的特点
摘要：React的特点 声明式编程 声明式编程： 声明式编程是目前整个大前端开发的模式：Vue、React、Flutter、SwiftUI； 它允许我们只需要维护自己的状态，当状态改变时，React可以根据最新的状态去渲染我们的UI界面； 组件化开发 组件化开发： 组件化开发页面目前前端的流行趋势，我们会 阅读全文
posted @ 2022-01-24 00:18 sunflower-js 阅读(69) 评论(0) 推荐(0)