react专区
文章平均质量分 69
react框架使用技巧,采坑记录,源码解析
webRambler
努力,专注,知行合一!stay hungry,stay foolish!
展开
-
React踩坑记录:Error: Minified React error #31;
根据react官网给出的提示,我们可以清晰的知道,这是由于我们代码书写的错误,导致react组件在render的时候,有一个孩子组件没有正确的返回react支持的数据结构,那么react组件支持render函数返回什么呢?很明显字符串、JSX和数组都可以,于是我们去排查代码。很明显,是react框架爆出来的错,遇到这种问题,别慌,先去看对应的介绍,先打开它提示的这个网址去看看啥情况,于是我们点开。的缩写,由于我们在这里返回了一个对象,所以导致了react框架报出了这个错误,所以,我们只需进行更改就好了。..原创 2022-07-29 10:31:19 · 12780 阅读 · 0 评论 -
postcss简介
前言css预处理器在目前的开发中是很受欢迎的,但是它们也有一些缺点。在今天的介绍中,我们将探讨postcss的优势以及它是如何工作的,还有其一些丰富而且实用的插件。css预处理器的价值和局限性大多数CSS开发人员都非常熟悉css预处理器,像sass、less、stylus等,以及伴随着这些预处理器出现的一些概念,比如file partials, nesting, variables 和 mixins等。随着css的发展,预处理器的一些功能正在渐渐的被原生css所实现,但是还有大量非常实用的功能对于开发原创 2022-01-22 14:35:48 · 3391 阅读 · 1 评论 -
react+typescript正确的开发姿势之正确使用hooks之useReducer
在react + typescript项目中正确使用useReducer我们在Home页面增加一个组件Counter,用来保存一个数值count,来记录点击按钮的次数,如下:// Counter.tsximport React, { useReducer } from 'react'type StateType = { count: number;}type ActionType = { type: string; payload: number;}const原创 2022-01-22 14:33:50 · 1409 阅读 · 0 评论 -
react+typescript正确的开发姿势之正确使用hooks之useState
写在前面要想在react + typescript 项目中正确的使用 hooks ,请务必掌握泛型的使用,关于泛型的讲解,我在上一篇博文中详细的进行了介绍,如果你还不了解 typescript 中的泛型请看上一篇:正确认识typescript中的泛型。如何结合typescript正确使用hooks在react中使用函数式组件,难免会使用到hooks,hooks赋予了函数式组件可以像 class 组件那样拥有状态的能力,那么如何结合typescript正确的使用hooks呢?在react + type原创 2022-01-22 14:31:56 · 1638 阅读 · 0 评论 -
react+typescript正确的开发姿势之函数式组件
函数式组件声明使用typescript正确的声明react函数式组件是通常有三种:直接声明、React.FC 和 PropsWithChildren。直接声明直接声明函数式组件的code如下:import React from 'react';type HomePropsType = { name: string; age: number; children?: React.ReactNode;}const Home = (props: HomePropsType) =原创 2022-01-15 13:26:31 · 2195 阅读 · 0 评论 -
react项目配置react-hot-loader实现模块热更新
今天我们来聊一聊react的模块热更新,熟悉react的同学都知道,使用官方的脚手架,当我们改动页面时,整个页面会被刷新,那我们当然希望页面只刷新我们改动的部分而不是刷新整个页面,那么怎么做到如此呢?千呼万唤始出来,react-hot-loader就是来完成这个伟大的使命的。1. 安装react-hot-loadernpm i react-hot-loader --save2. 在开...原创 2019-03-26 23:44:00 · 8272 阅读 · 0 评论 -
react全局状态管理react-redux
简言之,通过react-redux提供的connect方法将UI组件同store连接起来,connect方法可以接受两个参数,第一个为mapStateToProps(接受两个参数,state,ownProps),用于UI组件的输入逻辑,此建立了从外部的数据(即store中的state对象)到UI组件的props的一个映射;第二个参数为mapDispatchToProps(接受两个参数,dispat...原创 2018-09-11 14:51:01 · 2317 阅读 · 0 评论