![](https://img-blog.csdnimg.cn/20201014180756916.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
React
文章平均质量分 81
爱玲姐姐
大家好,我是计爱玲,英文名:Cathy,是一名前端开发工程师,热爱解锁各种前端新技术。我的爱豆是王一博,当然我也想认识更多同行的帅哥,
我的微信jal517486222,欢迎加我好友交流编程技术*^_^*
个人网站:https://jiailing.com
展开
-
React 静态站点生成器: Gatsby
React 静态站点生成器: Gatsby文章出处: 拉 勾 大前端 高薪训练营练习代码地址Gatsby 是一个静态站点生成器,官网地址是:https://www.gatsbyjs.cn/一、静态应用的优势访问速度快更利于 SEO 搜索引擎的内容抓取部署简单二、Gatsby 总览基于 React 和 GraphQL, 结合了 webpack, babel, react-router 等前端领域中最先进工具,开发人员开发体验好;采用数据层和UI层分离而不失 SEO 的现代前端开发原创 2021-01-19 07:52:09 · 1805 阅读 · 0 评论 -
React 服务端渲染框架:Next.js
React 服务端渲染框架:Next.js文章出处: 拉 勾 大前端 高薪训练营练习代码地址Next.js是React服务端渲染应用框架.用于构建SEO友好的SPA应用.支持两种预渲染方式,静态生成和服务器端渲染.基于页面的路由系统,路由零配置自动代码拆分.优化页面加载速度.支持静态导出,可将应用导出为静态网站.内置CSS-in-JS库styled-jsx方案成熟,可用于生产环境,世界许多公司都在使用应用部署简单,拥有专属部署环境Vercel,也可以部署在其他环境.一、创建 N原创 2021-01-19 07:47:38 · 1461 阅读 · 0 评论 -
React 原生实现服务端渲染
React 原生实现服务端渲染 文章出处: 拉 勾 大前端 高薪训练营练习代码地址一、服务器端渲染快速开始1. 实现 React SSR引入要渲染的 React 组件通过 renderToString 方法 将 React 组件转换为 HTML字符串将结果 HTML 字符串响应到客户端renderToString 方法用于将 React 组件转换为 HTML 字符串,通过 react-dom/server 导入.2. webpack 打包配置问题: Node 环境不支持 ESM.原创 2021-01-19 07:45:09 · 1038 阅读 · 0 评论 -
Chakra-UI 学习笔记
Chakra-UI 学习笔记文章出处: 拉 勾 大前端 高薪训练营现代化 React UI 框架 Chakra-UI1. Chakra-UI 介绍Chakra UI是一个简单的,模块化的易于理解的UI组件库.提供了丰富的构建React应用所需的U|组件.文档: https://next.chakra-ui.com/docs/getting-startedChakra UI内置Emotion,是CSS-IN-JS解决方案的集大成者基于Styled-Systems https://style原创 2021-01-06 08:45:36 · 2838 阅读 · 1 评论 -
CSS-IN-JS 学习笔记
CSS-IN-JS 学习笔记文章出处: 拉 勾 大前端 高薪训练营集成 CSS 代码在 JS 文件1. 为什么会有 CSS-IN-JSCSS-IN-JS 是 WEB 项目中将 CSS 代码捆绑在 JS 代码中的解决方案,这种方案旨在解决 CSS 的局限性,例如缺乏动态功能,作用域和可移植性。2. CSS-IN-JS 介绍CSS-IN-JS 方案的优点:让CSS代码拥有独立的作用域,阻止CSS代码泄露到组件外部,防止样式冲突。让组件更具可移植性,实现开箱即用,轻松创建松耦合的应用程序。原创 2021-01-06 08:44:01 · 1002 阅读 · 0 评论 -
Formik 学习笔记
Formik 学习笔记文章出处: 拉 勾 大前端 高薪训练营1. Formik1.1 Formik 介绍增强表单处理能力,简化表单处理流程官网1.2 Formik 下载npm install formik2. Formik 增强表单2.1 Formik 基本使用使用 formik 进行表单数据绑定以及表单提交处理import { useFormik } from 'formik'function App () { const formik = useFormik({ini原创 2021-01-06 08:41:26 · 2191 阅读 · 1 评论 -
React Hooks 学习笔记
React Hooks 学习笔记文章出处: 拉 勾 大前端 高薪训练营1. React Hooks 介绍1.1 React Hooks 是用来做什么的对函数型组件进行增强,让函数型组件可以存储状态,可以拥有处理副作用的能力,让开发者在不使用类组件的情况下,实现相同的功能。1.2 类组件的不足(Hooks 要解决的问题)缺少逻辑复用的机制为了复用逻辑增加无实际渲染效果的组件,增加了组件层级,显示十分臃肿,增加了调试的难度以及运行效率的降低类组件经常会变得很复杂难以维护将一组相干的原创 2021-01-06 08:38:58 · 1014 阅读 · 0 评论 -
React状态管理工具 - MobX学习笔记
React状态管理工具 - MobX文章出处: 拉 勾 大前端 高薪训练营1. Mobx 简介1.1 Mobx 介绍简单,可扩展的状态管理库Mobx 是由 Mendix(代码开发平台), Coinbase(比特币公司), Facebook 开源和众多个人赞助商所赞助的React 和 Mobx 是一对强力组合, React 负责渲染应用状态, Mobx 负责管理应用状态供 React 使用1.2 MobX 浏览器支持MobX 5 版本运行在任何支持 ES6 Proxy的浏览器,不支持 IE原创 2020-12-28 21:11:29 · 970 阅读 · 0 评论 -
React 状态管理工具 - Redux 学习笔记
React 状态管理工具 - Redux文章出处: 拉 勾 大前端 高薪训练营1. Redux 核心1.1 Redux 介绍JavaScript 状态容器,提供可预测化的状态管理1.2 Redux 核心概念及流程Store: 存储状态的容器,JavaScript 对象View: 视图,HTML页面Actions: 对象,描述对状态进行怎样的操作Reducers: 函数,操作状态并返回新的状态1.3 Redux 使用: 计数器案例<!DOCTYPE html><h原创 2020-12-28 21:09:58 · 946 阅读 · 3 评论 -
React基本使用 - 学习笔记
React基本使用文章出处: 拉 勾 大前端 高薪训练营1. React 介绍React 是一个用于构建用户界面的 JavaScript 库,它只负责应用的视图层,帮助开发人员构建快速且交互式的 web 应用程序。React 使用组件的方式构建用户界面。2. JSX 语法在 React 中使用 JSX 语法描述用户界面,它是一种 JavaScript 语法扩展。在 React 代码执行之前,Babel 会将 JSX 语法转换为标准的 JavaScript API。JSX 语法就是一种语原创 2020-12-15 18:55:55 · 779 阅读 · 0 评论 -
Virtual DOM 及 Diff 算法 - 学习笔记
Virtual DOM 及 Diff 算法 文章出处:拉 勾 大前端 高薪训练营1. JSX 到底是什么使用 React 就一定会写 JSX,JSX 到底是什么呢?它是一种 JavaScript 语法的扩展,React 使用它来描述用户界面长成什么样子。虽然它看起来非常像 HTML,但它确实是 JavaScript 。在 React 代码执行之前,Babel 会对将 JSX 编译为 React API.<div className="container"> <h3>.原创 2020-12-15 18:52:09 · 1117 阅读 · 1 评论 -
React核心源码解读 - 学习笔记
《1. 配置 React 源码本地调试环境使用 create-react-app 脚手架创建项目npx create-react-app react-test弹射 create-react-app 脚手架内部配置npm run eject克隆 react 官方源码 (在项目的根目录下进行克隆)git clone --branch v16.13.1 --depth=1 https://github.com/facebook/react.git src/react链接本地源码/原创 2020-12-15 18:47:15 · 2007 阅读 · 0 评论 -
Fiber 学习笔记
Fiber 学习笔记文章出处:拉 勾 大前端 高薪训练营1. 开发环境配置1.1 文件夹结构文件 / 文件夹描述src存储源文件dist存储客户端代码打包文件build存储服务端代码打包文件server.js存储服务器端代码webpack.config.server.js服务端 webpack 配置文件webpack.config.client.js客户端 webpack 配置文件babel.config.jsonbabel原创 2020-12-15 18:44:29 · 1295 阅读 · 1 评论 -
React中防止事件冒泡:e.stopPropagation()
当父子组件相互嵌套时,我们点击子组件时,子组件的点击事件会触发,但由于子组件被包含在父组件中,父组件的点击事件也会触发。为了防止事件冒泡,需要在子组件的点击事件中,写上e.stopPropagation(),就可以防止事件冒泡了????。代码解释:export default App{ handleClick1=(e) => { // TODO } handleClick2=(e) ...原创 2019-10-17 16:29:48 · 3170 阅读 · 0 评论